Heru
For the web portal redesign project, I started by running a UX discovery with the stakeholders including the Product Owner, Clinical Lead, Development Lead, and Head of Optometry. We identified business goals, primary/secondary users, user goals, devices used, and project milestones for MVP. The primary goals were to identify and resolve major user pain points, incorporate the Heru brand, create a consistent design system, and improve overall usability from the original Legacy Portal.
Shortly thereafter my coworker and I traveled out to multiple eyecare clinics to observe users in action (contextual inquiry). We shadowed doctors and technicians and observed them running the eye exams on their patients using the Heru portal and AR headset app. We documented user needs and goals, challenges, environment, medical equipment & software, and ergonomic factors. We also conducted user interviews and compiled surveys.
Based on this research, I created primary personas for the physicians (optometrists), technicians who assist the physicians, and admins of the clinics. From those personas we wrote user stories and pain points in a collaborative session with the stakeholders (some of which were primary users) and lead developers.
Next, I documented the user flow of the existing (legacy) web portal and then linked the pain points to it's major sections. Based on the user research, a heuristics evaluation of the legacy web portal, and the user stories, I designed a new user flow showing our vision for Portal Redesign (MVP). Once presented and approved by the stakeholders, I moved on to create wireframes for sections of the web portal that highlight its core functionality.
Informed by the wireframes and Heru’s brand style guide, in Figma I began building a design system to span across our responsive web portal, AR headset displays, and future digital products. First, I met with our lead developer and determined that we’d use the Fluent UI framework as starting point and that we’d need a good amount of customization to fit the interface needs.
Next, I laid out the primary color swatches for both light and dark mode, verifying that all colors pass accessibility standards. I also created the font hierarchy using the wireframes as a guide for the font sizes and weights needed. I imported pre-built Fluent UI components and then customized them to fit our branding and user’s needs. I used Figma’s auto layout and variants (multiple states of similar components) to build the system which included iconography, controls, text input fields, buttons, navigation, and much more.
Next, in Figma I used the design system as building blocks to convert the wireframes into high fidelity UI mockups. We found that the majority of portal users prefer tablets, so we started the responsive web designs with iPad sizing and enabled it to scale up or down to fit all screen sizes. I focused first on major sections of the web portal including the Homepage Dashboard, New Exam, Patient Details, Test Result Overview, and Test Result Details. After multiple rounds of revisions, we are now moving to the user testing phase and then handoff to development.
In conjuction with the Portal Redesign project, I’ve worked with the stakeholders and lead developer to design new AR diognostic vision tests for the Magic Leap. Tests include Contrast Sensitivity, Color Vision Screening, Color Vision Extended, Visual Field Fast Track, and Dark Adaptation. Once the physician or technician runs the AR exam on their patient using the headset device, it sends the test results back to the web portal for the doctor to review.
