AUG 2024 - SEP 2024
Redesigning Evolutio - A virtual physical therapy application transforming personalized exercises and digital health services.
CLIENT
Evolutio
ROLE
UX/UI Design
Interaction Design
CONTRIBUTION AND IMPACT
Accelerated the redesign of an existing product through a 4-week hybrid Design Thinking & Lean UX framework
Led the transformation of a critical decision-making flow into a step-by-step guided process
Achieved a 37% increase in average conversion rate post-usability testing
THE CONTEXT
The patient portal of Evolutio is a mobile application designed specifically for existing customers to quickly schedule appointments, receive prescribed exercises, and communicate with their registered physical therapists.
USER PROBLEM
Users are struggling with an unintuitive Navigation bar, no other way to schedule appointments but input a credit card upfront, difficulties following the exercise instructions, and a number of unresponsive UI elements.
Moreover, there is no dedicated page for appointment-related features or user management (only accessible via Home), while user's documents and tools excessively take up the Nav bar UI.
Evolutio mobile UI prior to redesigning
BUSINESS PROBLEM
The current design lacks overall consistency, visual communication and cohesiveness, which fails to convey its brand language and hinders the business ability to attract and engage users in terms of remote physical training activities.
Three key insights from Evolutio usability analytics report of Jul 12 - Aug 8 period:
0%
of total Appointment Scheduling events
⬇ 48%
decrease in average app Engagement time
⬇ 34%
decrease in average Exercise Session duration
THE OBJECTIVE
Design a user-friendly experience that allows customers to easily navigate through the app and perform fundamental tasks such as scheduling appointments or easily engaging in the prescribed exercises, with a business-minded direction that aim to improve ROI.
THE SOLUTION
BUSINESS GOAL MEETS USER-CENTRIC DESIGN
A product strategy aimed to increase conversion rate by at least 10% and a design approach that puts users front and center throughout the entire process.
While conducting every phase of our redesign process, we carefully took all important aspects into account, including our project objective: to design a user-centered experience that also meets the business requirements.
Proposed Solution
User Interviews Insights
Stakeholder Interviews Insights
Current App Analysis
BEFORE AND AFTER
Home
Schedule
Exercise
Messages
Profile
THE PROCESS
DISCOVER
∎ Primary Research (User and Business Interviews)
∎ Secondary Research
∎ Current Product Analysis
∎ Competitive Analysis
DEFINE
∎ Research synthesis (Affinity Mapping)
∎ Solution-oriented HMW Statements
IDEATE
∎ Sketches and Wireflows
∎ MVP User Flows
DEVELOP
∎ Wireframing
∎ Lo-fi and Hi-fi Design
∎ Rapid Prototyping
∎ UI & Visual Design
∎ Design System
TEST
∎ Usability Testing
∎ Feedback Implementation
01
DISCOVER
STAKEHOLDER INTERVIEWS
The business goal is to increase the average conversion rate - especially in how users schedule their appointments, engage in their prescribed exercise sessions, and improve the visual appealing of the app.
We met with the Evolutio owner once a week to discuss and align on the design decisions. Three important insights from our meetings:
1
Increase appointment booking events by at least 10%
2
Improve average engagement time of the exercise sessions
3
Redesign the UI and create more visual appealing that align with the branding
USER INTERVIEWS
Current users expressed difficulty navigating between pages, scheduling appointments due to insufficient information, having limited secure payment options, confusion over the technical contents (i.e. medical terms without a description), and difficulty understanding the exercise instruction flows.
In addition to the past user feedback on the app shared by the Evolutio owener, our team also reached out to over 5 users to understand their goals, needs and pain points when using Evolutio on a weekly basis.
By letting the participants interact with the app, we were able to collect the issues they were facing, and identify the most pressing changes needed. We would asked questions such as:
How did you feel about the navigation?
How easy or difficult was it to perform [certain task]?
What do you think should change?
Here are some important quotes from the interviews:
“I think besides having the icons, the Navigation bar at the bottom should maybe like have names like ‘Home’, ‘Invoice’, etc. for easier recognition.”
Jonathan, 31
“After booking, I appreciate a clear confirmation of my appointment to ensure I don’t forget.”
Jessica, 34
“I dislike the fact that I was asked to put in my credit card prior to seeing any other relevant information…”
Thao, 27
“I often find myself more likely to feel motivated to interact with an app regularly if it is visually appealing.” (laughs)
Ankita, 26
50% of users struggled with navigating in between screens to complete their tasks, whereas 38% reported unpleasant experience with the current appointment booking process.
50% Complained on the overall navigation and the Nav bar
38% Complained on appointment scheduling process
12% Would like an exercise progress tracking feature
To sum up, our user interviews resulted in three crucial findings:
1
Users want to effortlessly navigate throughout the app
2
Users need a more intuitive and accessible way to book appointments
3
Users wish the exercise contents could be easier to follow
SECONDARY RESEARCH
Previous studies have shown the positive impacts of virtual physical therapy in recent years, as it meets the increasing demand for convenience and flexibility, as well as personalization from a digital product.
We began to conduct secondary research by reading over 12 academic studies that would help us answer our research questions on topics such as:
Core features and potentially new features that improve the overall experience
Existing challenges of the current experience
Factors that influence user satisfaction and retention
Our Evolutio team's Figjam board filled with reading notes
As a result, we were able to prove that our primary research's findings are strongly supported by previous discoveries. In addition, the secondary study has helped us look at the usability problems with an open mindset, which would lead to further concept exploration.
Two key insights from our secondary research:
1
Matching results are also found in core features of existing telehealth products, such as appointment scheduling and video consultation
2
People love progress tracking/analysis, as this can help measure the effectiveness of their exercising activitities
CURRENT APP ANALYSIS
The lack of navigation cues and visual communication as well as the inconsistency of the UI design (especially the use of icons or CTA buttons) disrupt the overall usability and branding cohesion.
For this task, we meticulously observed each screen and identified potential current usability issues to better inform our design decisions.
❌
Lacking Log in/Sign up options
No options to log in or sign up directly using email addresses i.e. SEO options
❌
Indistinguishable background area vs input field
One color use makes them less recognizable
Log in/Sign up
❌
Only one way to schedule appointments
❌
Confusing section without a title
Inconsistent with other sections that have a title to inform the content type
❌
Plain technical content design
Lacks visual communication, hard to understand at a glance what the exercises are about
Home
❌
Calendar view is not proper
Insufficient calendar information to be seen
❌
No dedicated space for appointments
Appointments in general are only accessible via Home screen on an overlay
Overlay (on Home)
Exercise Prescription
❌
Disorganized UI
❌
CTA clutter
And confusing word choice (Home - 1, Home - 2, etc.)
❌
No visual hierarchy
Exercise titles, subtexts and icons are not properly in place or aligned
❌
Outdated chat box design
Not user-friendly for a modern messenger tool, inconsistent with design standards
❌
Too large texts for speech bubbles
Messages
Side Menu (on Home)
❌
Unfriendly/Outdated UI
Side menu is no longer a common practice for modern mobile app design
❌
Scattering of user's extras (Invoice/Medical Form)
Information that fall under the umbrella of "User"/"Profile" are made main pages accessed via Nav bar, which is an uncommon practice
Navigation Bar
❌
No dedicated page for user management, such as a "Profile" page
COMPETITIVE ANALYSIS
Our result has revealed that since two competitors focus solely on digital therapy programs and the other is mainly geared towards scheduling appointments, they lack certain flexibility and accessibility in their designs. Therefore, making our solution available for both seamless appointment scheduling and exercise video instructional programs is essential to set ourselves apart.
We conducted an in-depth analysis of direct competitors including three popular telehealth products: PhysiApp, Zocdoc, and Kaia Health.
By analyzing their strengths and weaknesses, we aimed to understand their approaches towards similar problems, using the 8 Usability and Heuristic Factors that shape user experience.
Features (MVPs)
Account Registration
Profile Management
Therapist Directory
Appointment Scheduling
Video Consultations
Exercise Programs (Instructional videos)
Progress Tracking
Reminders / Notifications
Payment Processing
Communication Tools
Privacy & Security
Navigation
Easy to navigate
Accessibility
Available in different languages
Consistency & Standards
Cohesive experience through consistent design and interaction
User Control & Freedom
Options to backtrack, modify or cancel
Error Prevention
Options to backtrack, modify or cancel
Recognition rather than Recall
Recognizable design elements, low cognitive load required
Visual Design / Brand Identity
Clear color scheme, font and art direction
Overall Rating
7/10
9/10
8/10
02
DEFINE
RESEARCH SYNTHESIS
The affinitization process has helped us identify common user goals, expectations and usability trends. In general, users look for a virtual physical therapy product that offers them convenience and flexibility in performing the most simple tasks, a way to track their progress, easy communication, as well as a resourceful and secure place.
Gathering insights from our studies, we created an Affinity Map to capture emerging themes that would guide us later in idea generation.
Research Synthesis - Affinity Map
HMW STATEMENTS
Due to our limited project scope, we agreed to prioritize working on the MVPs (Minimum Viable Product) given the short timeline and the business requirements. HMW statements help us redefine which problems to be focused on, and spark creative thinking, ready to generate potential solutions in the next ideation phase.
After forming solid HMW statements, we mapped out these potential solutions on a prioritization matrix, and were able to pick out the most critical and feasible design directions to move forward with.
Prioritization Matrix - HMW Statements
Learning about our business goals, user insights, current app analysis and competitive analysis, we were able to lay profound directions for the next steps
Key takeaways
An app-wise navigation upgrade and critical functionality improvements were highly considered for our user-focused solutions.
Time and budget constraints necessitated prioritizing only the MVP flows for this redesign project.
03
IDEATE
SKETCHES
Having the redefined directions laid out, we began to quickly explore potential design solutions for the app UI with sketches.
For this task, each of us created a version of the Home screen, and two additional screens by our choices.
SOLUTION PROPOSAL
A proposed solution constructed of 3 essential parts aimed to improve the overall user experience of the app, at the same time to pursue the business goals.
Based on our research insights and concept sketches, we came up with a design proposal that would need to happen in three following steps:
1
Redesign Navigation bar's features and UI
+
2
Add a new dedicated page "Schedule"
+
3
Add a new dedicated page "Profile"
A quick comparison to better demonstrate our Nav bar redesign solution.
Current Nav bar
Proposed redesign
❌
Scattering of user data and documents in Nav bar
By common practices, the content of "Invoice" and "Medical Form" tab is considered part of user profile management
❌
Lacking space for important features that drive most traffics of the app
Meanwhile, the goal is to increase appointment scheduling events by at least 10%
❌
No labels for the icon CTAs
Could cause confusion
💡
Add 2 new dedicated pages: "Schedule" and "Profile"
"Schedule" page: appointment scheduling, upcoming/past appointments, appointment details, etc.
"Profile" page: account management, notification settings, etc.
💡
Make "Invoice" and "Medical Form" part of the new "Profile" page
Instead of taking up space in the Nav bar, invoices and medical form are now accessible via the (user) "Profile" tab
💡
Add labels for the icons
Clear navigation
Since I specifically proposed adding a new dedicated page for appointment scheduling and appointment-related features, I also made extra sketches and presented them in a wireflow format with my stakeholders to better communicate the idea.
Conceptualized this solution upon user feedback and business goals, I proposed the Appointment Scheduling flow including three following MVPs:
A call-to-action "Make an Appointment"
A step-by-step guided process trackable by a progression bar on top that walks users through multiple stages of scheduling an appointment with their physical therapist: (1) Select a Therapist, (2) Select a Service, (3) Select a Date & time, (4) Select a Payment Method, and (5) Appointment Overview
A confirmation message to notify users on successfully scheduling their appointment
USER FLOWS
Upon finalizing our MVPs, we generated in total 5 user flows: Onboarding, Appointment Scheduling, Exercise Prescriptions, Communication tools, and Invoices.
Using Information Architecture such as User Flow is one of the most effective ways to get the engineers aligned, and also to help make the upcoming development process more digestible.
04
DEVELOP
WIREFRAMES & PROTOTYPES
Once the MVPs were thoroughly constructed, we started creating Lo-fi wireframes and prototypes focusing on connections between pages, main functionalities, and visual implementation.
Home
Schedule
Exercise
Messages
Profile
UI DESIGN & STYLE GUIDE
Reworking the entire design system was also part of our discussion, in order to maintain a visual cohesiveness for the app.
Design System
Typography
05
TEST
USABILITY TESTING
We managed to conduct 2 rounds of usability testing with participants identified as someone who engages in remote physical therapy activities at least once a month. Measuring the usability KPIs was crucial for the final design.
Round 1: Lo-fi Testing & Feedback Implementation
For the initial round, 4 users were asked to interact with the Lo-fi prototype. We tried to gather their feedback on the overall experience navigating through the app, and were able to identify some glaring issues.
1
56% of users prefered selecting date & time for their appointment in one page without extra taps
2
70% of users had difficulty understanding the flow of the exercise instructions
Round 2: Hi-fi Testing & KPI Metrics (Conversion rate)
After making changes based on the user feedback we got from the previous round of testing, we started the second round observing how participants would interact with our Hi-fi prototype.
Users were asked to perform certain MVP tasks, and the results were used to measure our conversion rate.
Evolutio usability conversion rate
(Percentage of users who complete a desired action)
96% Successfully scheduled an appointment
79% Successfully engaged in exercise programs and tracked their progress, but with some difficulties
96% Successfully sent a message to the therapist and attach files
83% Successfully accessed user documents such as Invoices and Medical Form
SUCCESS METRICS
89%
positive feedback on the Nav bar and appointment scheduling feature redesign
37%
increase in the average conversion rate, exceeding the initial 10% business goal
2%
errors in task success rate, where most given tasks were completed without major difficulties
BEFORE AND AFTER
Home
BEFORE
AFTER
❌
No visual hierarchy and confusing content design
Sections are not labeled properly
Visual hierarchy and clearly indicated sections
Visual hierarchy is established that allows seamless navigation
Schedule
(Upcoming Appointments)
BEFORE
AFTER
❌
Open to an overlay on Home page, without any Call-to-action
Users cannot make an appointment from this screen, nor view a detailed calendar
A dedicated page for appointments, with a clear Call-to-action
Users are able to view upcoming/past appointments, as well as schedule for new ones
Schedule
(Make an Appointment)
BEFORE
AFTER
❌
Payment method is required before anything else
High turndown rate
Step-by-step guided appointment scheduling process
A booking process that walks users through steps and a variety of options, with sufficient information to help users make informed decisions.
Exercise
(Exercise Prescriptions)
BEFORE
AFTER
❌
Plain content design
Lacks sufficient information and visual communication, resulting in low engagement rate
Engaging visual cues that clearly communicate what the content is about
Medical terms are aided by descriptions and images
Exercise
(Exercise Program)
BEFORE
AFTER
❌
Disorganized UI
Section title and buttons are not following any hierarchy, causing confusion
Visual hierarchy and well-organized UI elements
Technical terms are also corrected
Messages
BEFORE
AFTER
❌
Unfamiliar messenger UI, with poorly functioning chat tools
Not following industry standards, likely to add more cognitive loads for users only to be able to get used to this UI
User-friendly messenger tool following industry standards
Familiar UI commonly found in messenger apps
Profile
BEFORE
AFTER
❌
Outdated design for user settings
In addition, no dedicated space for user management
Dedicated page for user management
Easily accessible from Nav bar
Invoices
BEFORE
AFTER
❌
No CTAs for payment
Lacks call-to-action for users to pay their unpaid invoices
Clear CTAs and establisted visual hierarchy
Users can pay their unpaid invoice with one tap
Medical Form
BEFORE
AFTER
❌
Outdated design that does not prevent user errors
Very long form with no indication of required sections and no "skip" option
Clearly indicated required sections with progression bar at the top
"Skip" option for user convenience
INTRODUCING EVOLUTIO APP
REFLECTION
CHALLENGES
Budget issues and time constraint did not allow us to explore further design possibilities.
After discussing our rough ideas with Evolutio's owner, the budget topic came up. As a result, a dedicated "Therapist Profile" page was not required for the patient mobile portal. However, according to our user interviews, it would be incredibly helpful for users to view therapist information at a glance, before booking.
We overcame these challenges by focusing entirely on the MVPs balanced between a user-centered design solution and a business approach.
Here is how we attempted to solve the above conflict between a limited business budget vs a user need.
1
Therapist information was incorporated as part of the appointment scheduling process
2
A user profile page "Profile" was developed instead of a therapist profile page, as part of our user-centered design approach
WHAT I LEARNED
Working with limited resources gave me the freedom to venture on different design approaches.
The initial state of Evolutio mobile app was nearly unusable. Having started out without a well-established design system was challenging, yet I took it as a great opportunity to hone my skill set.
Collaboration is key. We closely worked together with the product owner, allowing us to iterate early on the design before shipping.
Our internal design team dynamic also played a pivotal role in shaping my collaborative experience. I acknowledge my contributions as well as my flaws, and reflect on them for future growth.
TEAM FEEDBACK
"Great team! dedicated and hardworking. I am really satisfied with the work and results.", commented Benoit Lebel, Evolutio President, Sep 2024.
