Michelle Lin

Stroll Health

 

Redesigning Stroll Health's Consumer-Facing Patient Portal

 
USER RESEARCH | USER EXPERIENCE DESIGN | DESKTOP + MOBILE INTERFACE DESIGN | VISUAL DESIGN

 

News Flash! Stroll Health recently won TRACTION'S HEALTH 2.0 STARTUP CHAMPIONSHIP using our redesigns! 

 

Project Overview

ABOUT STROLL
Stroll Health, an early-stage health tech start-up, allows medical professionals and patients to make personalized, value-based referrals and informed decisions, respectively, regarding health imaging procedures and services of the sort. 

CHALLENGE
To put it simply, people do not trust the internet when it comes to booking major medical procedures and imaging services. Stroll had an MVP patient-facing web portal which allowed consumers to search for medical imaging procedures and facilities — however, it was incredibly difficult to navigate, had a dated user interface and required a redesign to secure proper funding.

ROLE
Product Designer

SOLUTION
•  A new consolidated task flow to simplify the search + booking process
•  Rewritten copy to rid complicated jargon
•  Mobile-responsive design
•  Modernized user interface design


TIMELINE
7 weeks


Results


The Design Process

 
Design Process for Stroll.png
 

Discovery

1 WEEK • COMPARATIVE STUDY OF COMPANIES • DEVELOPMENT OF USER PERSONAS • USER INTERVIEWS

Researching the Competition

We kicked off the Discovery phase by looking at the websites of other companies similar to Stroll — both those in the health-sphere and others such as Yelp, AirBnB and Kayak that also focused on price comparison and transparency. In doing so, we found that Stroll Health (at the time) was lacking a unique value proposition that really made it stand out in comparison to its competitors. 

We also uncovered common patterns in the websites of these companies which helped to guide our design decisions along the way.

 
Pros and Cons.png
 
 

Persona Development

Due to the specificity of Stroll Health's major value proposition, we really needed to understand the intended audience of the application. And, considering the fact that the founder of Stroll did so after realizing there was a huge problem with price transparency in the healthcare sector — he inspired one of the two personas we created. Ladies and gents, meet Georgia and Jay. 

Jay Persona.png
 

User Interviews and Synthesis

In total, we interviewed 16 people — 4 of which lacked health insurance. We were able to uncover the user behavior patterns of how people searched and booked medical appointments, as well as the major pain points they faced while doing so.

Takeaways.png

Define

1 WEEK • DATA MODELING + INFORMATION ARCHITECTURE • USER JOURNEYS + TASK FLOW(S)

Information Architecture

Through data modeling and an exploration of the previous patient portal, we mapped out six major features of the new patient portal. We chose to keep the key portions of the old, and incorporated some new one features to both address the uncovered pain points from our first set of user interviews and market research.

 

From User Stories + Use Cases to Task Flows

After much deliberation, flow critiques and brainstorming to fill in the gaps of a premature consolidated task flow that would accommodate those who would use Stroll's patient portal. The three major use cases are as follows: 1). Booking With Insurance2). Booking Without Insurance and 3). Browsing.

IMG_6982.jpg

The Final Consolidated Task Flow...

Task Flow.png

Ideation

1 WEEK • CRAZY 8S • WIREFRAMING (LO- + MID-FIS)

Google Ventures Design Sprints' Crazy 8s

To begin envisioning the mobile UI, we utilized the Google Ventures Design Sprints' "Crazy 8s" as a means of diverging and exploring as many UI options as possible (without groupthink). The GV Design Sprints were designed to allow for rapid prototyping in order to user test as soon as possible. Due to the scope of the project and the number of designers on the team, we decided to switch it up a bit and changed the exercise to the "Crazy 4s". 

 Each dot or heart represents a "like" of a certain UI element.

Each dot or heart represents a "like" of a certain UI element.

 

Mobile Lo-Fi's

Feeling inspired after the GVDS's "Crazy 8s" (or "4s"), we went on to create the first set of mobile Lo-Fi's. Below are some of the original screens I created prior to conducting user testing.

 

User Testing (Part Deux)

We used Marvel to set up four prototypes with specific scenarios a user would encounter while navigating the Stroll mobile web app to conduct our second set of user testing. This helped us gain further insights, informed design decisions (such as adding a "Call" button) and validated why it was necessary for a user to be able to create an account. Below are some of the changes we made, post-usability testing, to two of my Lo-Fi screens from the first section of the task flow. 

PROBLEM 1.png
PROBLEM 2.png

Prototype

1 WEEK • DESIGN PRINCIPLES • HI-FIDELITY DESKTOP + MOBILE RESPONSIVE PROTOTYPES

Establishing Design Principles

Knowing the founder's vision of Stroll Health, as well as our knowledge of the current health tech landscape, we established the following design principles prior to diving deep into the visual and UI design of Stroll's patient portal.

 

Mobile Hi-Fi's

Below are some of the final mobile hi-fidelity screens, which encompass the "Start Search" section.

 

Simplified Prototype


Validation

2 WEEKS • USABILITY + COMPREHENSION TESTING

User Testing (Part Trois)

For the final round of user testing — which included comprehension testing, usability testing and a final user interview with the completed desktop Hi-Fi's — we interviewed a total of 10 people which ranged from in-person user testing to remote testing via Skype through Marvel prototypes and screen-sharing. 

Ultimately, the comprehension tests led to the most changes in the high-fidelity desktop mocks. All in all, three sets of Hi-Fi's were created prior to the final delivery.

As a huge advocate of Designing for Accessibility, this was my personal recommendation to the team as one of the older interviewees mentioned how much the bright background hurt her eyes. Based on our research, most seniors find the color yellow to be harsh on their eyes. In fact, the best hugs for those that are older are the three primary colors — red, green and blue, as well as other muted tones. 


Delivery + Reflection

1 WEEK • ZEPLIN • FINAL SKETCH SCREENS + PROTOTYPES

This was the largest design team I'd ever worked with  — which was an absolute struggle from time to time due to the wide range of bold and blunt personalities. This redesign taught me that large teams are often times not the most effective and can really slow a project down. It was also quite difficult at times because only the project leads were in contact with the main client. However, we were able to collaborate as designers throughout every step of the project as we held a common goal and vision. In the end, we were able to create a digital product that is not only user-friendly but also being fully implemented by Stroll Health.