Loading
SEO NAME
UI / Branding

exowear

what’s the story?

Physical therapy has the potential to improve the lives of millions, yet only 30% of patients comply with their prescribed exercises. ExoWear is building a wearable device to help patients and physical therapists monitor the progress of at-home exercises. The Chicago-based startup approached my team of four to lead the branding and visual design for their patient-facing companion app.

what does the research say?

Previous to our collaboration, ExoWear contracted a UX research team to learn more about the needs of physical therapists and their patients. After several rounds of usability testing, the UX team provided the following wireframes:

what does exowear say?

For our kick-off meeting with ExoWear, we presented a few trends and visual directions from competing products in the market.

corehab

bluejay2

bendlabs

force

Few competitors have companion apps and their websites suffer from text-heavy interfaces with limited visual hierarchy. Color palettes vary drastically across the competitive landscape, however most are outdated, muted, or clashing. After seeing our visual analysis, ExoWear wanted us to incorporate the simplicity and white space from BlueJay and engaging colors from Corehab.

what’s our north star?

After initial conversations with the ExoWear founders and further collaboration with the UX research team, we defined the following design principles to guide the rest of our process:

what should we bring to life?

With these principles in mind, I explored a few visual directions for the product and presented the following style tiles to the client:

The client felt my first and second style tiles aligned with their vision the most. The third tile shared visual qualities with a trendy sports/fashion wearable, however, the client wanted to attract the older demographic (75% of the market segment) with a more glanceable and professional look. For the next iteration, I saturated the colors from my first tile and incorporated the friendly brand voice from the second tile.

what do users say?

We conducted two rounds of user testing during our three-week design process. User feedback guided a variety of improvements to the wireframes and my initial designs. 

untitled-08899

untitled-08878

untitled-1

untitled-2

Dashboard

Users felt there was still a lot of content on the dashboard and wanted the most important information front and center. I divided the dashboard into two tabs: the “today” tab informing users how many sessions they have left to complete and the “progress” tab showing a deeper dive into performance over time. I also designed a more glanceable interface by incorporating leg illustrations, a saturated color palette, and bold typography.

dashboard2

Empty State

In cases when physical therapists have not yet assigned a personalized regimen for the patient, I designed a new “empty state” screen. The original wireframe incorporated the same components of a session in progress. The inapplicable content overwhelmed the user and made them feel there was a lot left to accomplish, whereas a personable illustration and short message helped them feel informed and in control.

empty-state

Coach Mark

In the session overview wireframe, there was a permanent reminder to strap on your ExoWear sensor and press start. After testing this layout, users expressed learnability—after you do it once, you’ll remember it for the next session. Because the UX team designed interactions that were easy to learn, I removed the permanent reminder which allowed space for scannable illustrations. The reminder came later through the use of a coach mark—an instructional overlay that only interrupts the user once when first using the app.

coach-mark

Skipped Exercise

The client expressed the importance of hiding the “skip” button to discourage patients from skipping exercises. When hidden at the bottom of the screen, 70% of users still noticed the button. My goal for the design was twofold—hide the “skip” option while making the “start” button more prominent. I designed a fixed “start” button at the bottom of every exercise screen so users remember to press it before beginning the session. I moved the skip option to the right of the tab bar, and although not hidden behind a scroll, the visual hierarchy led to only 20% of users noticing it.

skip-exercise

Sensor Recording

Once the user selects “Start ExoWear”, a live recording of their leg movements appears. Users wanted to know how they were performing in terms of their extension and flexion goals during the session. I redesigned the recording screen to include corresponding degrees of movement and a visual indicator of their goals.  

what’s the result?

After rounds of iterations, I arrived at my final designs. I presented the following screens and InVision prototype to the client:

task-flow-1

task-flow-2

task-flow-3

what’s next?

The ExoWear team plans to implement several elements of my designs for the launch of their new app. In order to enforce visual guidelines and improve communications with their development team, I created the comprehensives style guide below:

what did i learn?

This project taught me how a  deep understanding of the user experience influences effective UI design. Because the physical therapy domain was foreign to me, my final designs could not have been executed without an ongoing collaboration with the UX research team. It was important to learn as much about the user research and core use cases before deciding on the visual direction and brand voice of the product.