Heru - Portal & AR

UI/UX

Web

AR

Design Systems

Research

B2C

Page Contents

Project Contents

Overview

Discovery & Research

Flows & Wireframes

Design System

UI - Web

UI - AR

Overview
What is Heru?
Heru, Inc develops vision diagnostics applications for commercial AR headsets including Magic Leap and Hololens. The software enables eye doctors and technicians to deploy eye exams to diagnose patients for major vision deficiencies such as glaucoma and color blindness using tests run on the headset.
Opportunities
Identify and resolve major user pain points, incorporate the Heru brand across both the web portal and AR headset experience, create a consistent design system, and improve overall usability from the legacy portal.
My Role
Lead UI/UX designer, create the design system and UI components, improve the user journeys, workflows, and overall UX, and assist in user research and testing.
Team
Me (Lead Designer, Product Owner, UX Researcher, Project Manager, Head Optometrist, Lead Engineer, Clinical Testing Lead.
Discovery & Research
1
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.
2
The Lead UX Researcher and I traveled out to multiple eye-care clinics to observe users in action using contextual inquiry. We shadowed doctors and techs and observed them running the eye exams on their patients using the portal and AR.
3
Using the POEMS worksheet method, we documented people, objects, environment, messages, and services. We also conducted user interviews, compiled surveys, and then documented key takeaways.
4
Based on this research, I created primary personas for the physicians (optometrists), technicians (who assist the physicians), and admins of the clinics.
5
From those personas we wrote user stories and pain points in collaborative sessions with the stakeholders and lead developers.
‍
User Flow & Wireframes
1
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, and the user stories, I designed a new user flow showing our vision for Portal Redesign (MVP).
2
Once the user flow was approved, I moved on to create wireframes for the major sections of the web portal that highlight core functionality. This first one is of the homepage dashboard.
3
I wireframed the major sections of the portal including Test Results for Contrast Sensitivity (shown here). I also wireframed results for color vision, vision field, and dark adaptation tests.
Design System
1
Informed by the wireframes and Heru’s brand style guide, in Figma I built a design system to span across our responsive web portal, AR headset displays, and future products. First, I met with our lead developer and determined that we’d use the Fluent UI framework as starting point and then customize. This image shows the primary color swatches that are accessible in both light and dark mode.
2
I created the font hierarchy using the wireframes as a guide for the font sizes and weights needed.
3
Based on the branding guidelines, I created components for logos and iconography.
4
Utilizing Figma auto-layout and variants, I constructed controls and text field components.
5
Lastly, I composed variants for list controls and call to action buttons across numerous states.
Final UI - Web Portal
Next, in Figma I used the design system as building blocks to convert the wireframes into high fidelity UI mockups. Research found that most portal users preferred 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 the major sections including the Homepage Dashboard, Create an Exam, Patient Details, and Test Results. After multiple rounds of revisions, I handed off the design assets to development and created a realistic prototype for user testing.
Final UI - AR Headset App
In conjunction with the web portal, I partnered with the product ownerand lead developer to design new AR diagnostic vision tests for the Magic Leap. Tests include Contrast Sensitivity, Color Vision Screening, Color Vision Extended, Visual Field, 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.
Back to Top

More Projects

© Mark David Lopez, 2024