The Professional
Women's Sportswear
The Professional
Women's Sportswear
.png)
iHealth and Wellness Foundation
Optimizing Survey Interfaces for Complex Diseases Patients
DURATION:
2023- 2024
PLATFORM:
Responsive Web for Desktop, Tablet & Mobile
MY ROLE:
Product Designer
TOOLS:
Figma, Trello
BACKGROUND
Help patients with complex diseases
iHealth and Wellness Foundation is an online medical and wellness care platform specifically designed for patients with complex diseases. It offers a dual-network system that connects these patients with healthcare and wellness providers. Based in New York City, iHealth and Wellness Foundation is an early-stage tech startup currently gearing up for a proof-of-concept launch.
PROJECT OVERVIEWS
Optimize survey pages to help match clinical trials for patients
The iHealth and Wellness Foundation platform, offering complex information and features. We've mainly focused on developing the Medical & Wellness Provider Lookup, which allows booking appointments and visiting doctors. However, due to limited resources and staffing, improving and deploying the survey page design hasn't been prioritized. It's crucial to optimize these survey pages soon to assist patients with clinical conditions in finding the most suitable clinical trials for their needs.
SOLUTION
Key points to improve Survey Pages Design
-
Simplify the survey interface with a clean, easy-to-read layout
-
Implement a clear and intuitive navigation system
-
Incorporate visual aids
-
Ensure mobile optimization
-
Conduct testing and iteration
Impact And Deliverables
What are the final outcomes and improvements?
-
Created 15 screens each for desktop, tablet, and iPhone.
-
Built 6 variations for initial wireframes.
-
Conducted 4 user testing sessions.
-
Completed 8 rounds of iteration for high-fidelity design.
-
The Redesign Pages will be delivered for publication in 2024.
User Research
How did I analyze old design and consolidate user needs?
HEURISTIC EVALUATION
The problems on old survey pages
I analyzed the old design using heuristic and LATCH methods, following the 10 Usability Heuristics (Source: NNGroup), and the Basic Principles of Design. Below are the main problems that I believe need to be solved.
PROBLEM #1
No User-centricity
Irrelevant content doesn't consider the user’s needs and what they want from the product.
FOR EXAMPLE
The landing page doesn't explain well what the survey for and why users need to take the survey, including the irrelevant images.
IMPACT
Non user-centric design will lead to low conversion rate.
.png){kind=small}
PROBLEM #2
.png){kind=small}
No Visibility of System Status
Users are unsure when the survey will end, even when there are not many questions, which in turn increases the drop off rate.
FOR EXAMPLE
There is no information to keep users informed about their current status or what is happening during a given interaction, leaving them uncertain about their next steps.
IMPACT
Without instant feedback, the design becomes unpredictable, causing users to lose guidance and trust.
PROBLEM #3
Low Visual Hierarchy
Low visual hierarchy doesn't help users navigate the product as doesn't draws attention to the most important pages and elements, and they can't easily find what they need.
FOR EXAMPLE
There is lack of emphasis and direct attention on important elements, like the font size is too small, options of answers are not aligned well.
IMPACT
Low visual hierarchy will be inefficient use experience which results in low completion rate.
PROBLEM #4
No User Control
“Users often perform actions by mistake. They need a clearly marked ‘emergency exit’ to leave the unwanted action without having to go through an extended process.”
FOR EXAMPLE
If users need to leave immediately or come back later to continue completing the survey, there is not such an option for them to do it.
IMPACT
Without building user control and freedom into the product, product will become low usability.
USER NEEDS
Gained insights through usability testing
In the meanwhile, I collected user needs from user interviews and testing, and took out the key points for survey pages redesign which became a guideline during the design process. These key points are based on user insights, which came from the user testing on old design that I conducted. Here is why the old survey pages need to be redesigned.
.png)
Problem, Goals, Painpoints
How did we help patients create an easy-to-use platform?
PROBLEM STATEMENT
In terms of survey design, a crucial question arises:
GOALS
What are the different goals?
Before diving deep into the design process, we also need to understand the different goals.
USER PERSONA
Who are our core users?
Before initiating our design process, we delved into our user personas to gain a clear understanding of who our core users are. Here are our three user types.
Design Challenges & Solutions
How did we navigate the journey from concept to completion?
IDEATION FACE
Looking at other products about survey pages
After having meeting with product owner and gaining insights about what key requirements she wanted for Survey. I started to kick off my research by looking through inspirations and different patterns about Survey pages design, analyzed the competitors and shared with my ideas in Figma with the team.
.png)
EARLY EXPLORATION
Refining our approach to key design solutions
Keeping user needs in mind, I started creating various design sketches with different ideas alongside my teammate. We explored several concepts and then narrowed them down to three wireframes, A, B, and C, for the survey landing page and survey questions pages. We finally chose wireframe B, which we believed was the best. These are what the early wireframes look like.
CONTENT ANALYZE
Using AI tool to identify critical patient requirements in clinical trials
In the other side, I analyzed all the clinical trials and found out the critical common questions among the patient requirements of clinical trials. I also used AI tool ChatGPT to filter the repetitive questions they appeared in different clinical trials to double check the outcomes.
DESKTOP ITERATION
Hi Fidelity design evolution
Here are the Hi-fidelity design with several iterations, although that is not a final design.
