2023
Health Risk Assessment
HRA is one of the lead products that MediResource created.
The project aims to improve HRA's user experience by addressing the pain points, enhancing usability, and optimizing engagement. The project's success would also reinforce the company's reputation as a customer-centric organization that values user feedback and is committed to delivering high-quality products.
Client /
MediResource
ROLE
UI/UX Designer; Accessibility Expert
DURATION
~3 months
TEAM
1 designer, 1 front-end developer, Back-end engineering team.
Identify Issues 🔍
Identified Issues:
By conducting user testing with 15 participants from all age groups and different cultural backgrounds, the following issues were found:
-
Length of scrolling
-
Inconsistent design
-
Improvement on engagement
-
On elements’ appealing
-
Sectioning of the page is not intuitive
-
Alignment throughout the page
-
Web section reordering
-
Users are confused about where can be clicked
Our Responses:
Bring to 3 goals to achieve with the updated design
-
Consistent design
-
Engaging
-
Better usage of white space
HRA User Flow Map 📌
Before diving into the project, I wanted to have a full understanding of how users would navigate around HRA especially the features within the report. Creating the user flow map will significantly help me identify the current issues that the site is facing, the users' behaviors as well as understand user pain points. The user flow map was created based on surveys, heatmaps, and recordings from HotJar.
Potential Solutions 🔍
.png)
HRA mobile 📱
Mobile first, please!
Despite feedback focusing on the desktop, I began ideation with a mobile-first mindset. Adhering to a mobile-first design principle has greatly benefited me. By compelling to prioritize essential elements on a smaller screen, the transition to larger screens becomes naturally smoother. I started by evaluating the HRA's old reporting format to consider its reuse potential. However, due to accessibility issues, particularly the risk of screen obstruction during zoom-ins, this was quickly ruled out.
HRA mobile mock-up
HRA desktop 💻
%20(2).png)
HRA main page 💻
After finalizing the mobile design, I shifted my focus to conceptualizing the desktop version. Armed with deeper insights into user pain points, my goal was to ensure the desktop design solves users’ concerns while aligning to the mobile one.
My Takeaways 🎉🎉
-
Integrating user feedback: In our monthly survey, we asked users to rate our recently launched website and provide reasons. Thanks to this approach, I was able to quickly identify user pain points and addressed them through incremental changes without a user research that could potentially takes months.
-
Minimizing cognitive load: By presenting filter selections as interactive chips, we simplified the user's cognitive load from "to change a filter selection, click the filter button" to "to change a filter selection, just click it."
-
Emphasize mobile optimization: After adjusting HRA's design based on a mobile first approach, we received many feedbacks from end-users that the design becomes more efficient and saves them a lot of time from scrolling.