Disclaimer:
This case study is based on a real-world project; however, certain details such as the product name, branding, colors, and some core functionalities have been modified or omitted due to Non-Disclosure Agreements (NDAs) and confidentiality agreements. While efforts have been made to accurately represent the project, it may not fully reflect the complete scope or functionality of the actual product. Thank you for your understanding.
Project Overview:
BioAge is a revolutionary project that sheds light on the discrepancy between chronological age and biological age, offering insights into how our bodies age and providing personalized strategies for optimal health and wellness. By leveraging advanced testing methodologies in blood biometrics and genetic analysis, BioAge aims to redefine how individuals approach aging, fitness, and nutrition.
Problem Statement:
While chronological age* is a well-known concept, it often fails to reflect the true state of our bodies' health and vitality. BioAge** addresses this discrepancy by assessing individuals' biological age based on comprehensive testing of biomarkers in blood and DNA. This approach offers a more accurate and personalized understanding of aging and provides actionable insights for improving overall well-being.
* Chronological age is a person's age based on the passage of time from their birthdate.
** Biological age, here mentioned as BioAge, assesses an individual's health and vitality based on biological markers and physiological function.
* Chronological age is a person's age based on the passage of time from their birthdate.
** Biological age, here mentioned as BioAge, assesses an individual's health and vitality based on biological markers and physiological function.
Task:
Design a web platform that goes beyond traditional age measures and provides individuals with a more accurate understanding of their overall health and aging process.
The solution should empower users to make informed lifestyle choices that promote longevity and well-being.
How I did it?
Project kicked off by collaborating with an experienced client on Miro and FigJam.
Together, we defined the problem, identified the target user audience, and outlined project objectives. While drawing and taking notes in parallel, I asked a lot of questions to guide the process (I knew client was experienced in building Digital Products and that really helped with defining.
Project kicked off by collaborating with an experienced client on Miro and FigJam.
Together, we defined the problem, identified the target user audience, and outlined project objectives. While drawing and taking notes in parallel, I asked a lot of questions to guide the process (I knew client was experienced in building Digital Products and that really helped with defining.
I couldn't help but wonder if I was boring the client with my barrage of questions. However, to my relief, he handled it like a pro, and we shared a lighthearted moment when he jokingly asked if I was aiming for a Guinness World Record for the most questions asked in a workshop. This collaborative effort, peppered with humor, streamlined communication and led to the development of a nearly finished information architecture sitemap.
Here you can see snippet from Miro board that we collected on workshops:
Based on that, I started with Full Admin Userflow, because Admin can access User part to upload things and edit info
Wireframing:
Next thing I started were lo-fi wireframes. In meanwhile, while I was taking my time and enjoying to visually present userflow with lo-fi sketches, things got interested because I was told we are shrinking deadline, and I should with *no pressure* start *drawing things* - gotta love this job :)
Next thing I started were lo-fi wireframes. In meanwhile, while I was taking my time and enjoying to visually present userflow with lo-fi sketches, things got interested because I was told we are shrinking deadline, and I should with *no pressure* start *drawing things* - gotta love this job :)
Recognizing the urgency of the project and the clarity of our defined problems, I made the executive decision to expedite the process and dive straight into high-fidelity design. This shift allowed us to visualize the solutions more effectively and iterate rapidly, ensuring that we stayed on track in sprin to meet our project goals within the given timeframe.
So I put my working cap and started drawing High-Fi wireframes.
Challenge #1 - Graphs
As I progressed with the design work, I hit a roadblock when it came to creating graphs, especially because of the complexity involved in conveying multiple messages clearly. I faced several challenges, such as showing the difference between biological and chronological age, demonstrating the impact of certain parameters, and visualizing changes in blood parameters over time while providing detailed information like dates and descriptions.
This posed a significant challenge, particularly in finding a balance between the technical capabilities of frameworks like Chart.js framework, and the need to ensure that the graphs were easy to understand and visually appealing. Despite these hurdles, my focus remained on creating graphs that effectively communicated the necessary information in a straightforward and accessible manner.
After several iterations and tweaking the knobs, I insisted & successfully advocated for custom-made graphics instead of relying on frameworks. This decision allowed us to have more control over the design and ensure that the graphics met our specific needs. It was a bit of a struggle, but in the end, we achieved visuals that were tailored to our project requirements and conveyed information in the most effective way possible.
After several iterations and tweaking the knobs, I insisted & successfully advocated for custom-made graphics instead of relying on frameworks. This decision allowed us to have more control over the design and ensure that the graphics met our specific needs. It was a bit of a struggle, but in the end, we achieved visuals that were tailored to our project requirements and conveyed information in the most effective way possible.
Challenge #2 - Biomarkers
Ever heard of MVP? Sometimes it feels more like "Everyday Something New"!
Our client surprised us mid-design with another feature request. Keeps things interesting, right?
The first solution was basic draft of general statistics panel on the left side, followed by 6 customizable cards, adjusted by the admin to match each patient's needs based on the doctor's report. These cards prioritize the most relevant results, tailored to what the patient wants to see (because who doesn't want to highlight their strengths?).
Ever heard of MVP? Sometimes it feels more like "Everyday Something New"!
Our client surprised us mid-design with another feature request. Keeps things interesting, right?
The first solution was basic draft of general statistics panel on the left side, followed by 6 customizable cards, adjusted by the admin to match each patient's needs based on the doctor's report. These cards prioritize the most relevant results, tailored to what the patient wants to see (because who doesn't want to highlight their strengths?).
News from client were that the "Your biomarkers" section on the left shouldn't provide an overview of biomarkers but should be called something like: "Priority targets for the period". The text within this box will then include data about when the tests were conducted. And then the big lists of test type and dates...
So, i put on my thinking cap and tried to design something like this...
So, i put on my thinking cap and tried to design something like this...
...and I wasn't happy with either one of solutions.
So, the first option? Let's just say it had more text than an end-user manual. The second one? Well, it gave us two choices. Option one: hover over icons and play the guessing game. Option two was like suggesting a clickable menu with navigation, who needs a Rubik's Cube for navigation?
I skipped that one too.
So I got an idea to just ask client if we can squeeze another test there - they were on board with the idea, so I went back to the drawing board and came up with the next iteration. After testing it out, this version turned out to be the best fit, meeting both the user's needs and the client's expectations.
So I got an idea to just ask client if we can squeeze another test there - they were on board with the idea, so I went back to the drawing board and came up with the next iteration. After testing it out, this version turned out to be the best fit, meeting both the user's needs and the client's expectations.
Challenge #3 - Admin Input
The third challenge I faced was to quickly design a user-friendly content and data management system for the admin. We needed a solution that could be easily trained and utilized by the admin without the need for a complicated CMS dashboard development or solution with too many options.
The third challenge I faced was to quickly design a user-friendly content and data management system for the admin. We needed a solution that could be easily trained and utilized by the admin without the need for a complicated CMS dashboard development or solution with too many options.
Our goal was to keep the product minimal while still providing an integrated solution for efficient content and data management.
So, I decided to stick with the good old modals, and it turned out to be the best solution. I used them extensively throughout the project, ensuring consistency in design across the board. I even came up with a way to use one modal for uploading PDF reports for multiple sub-pages, making the process more efficient. This approach not only kept the frontend design consistent but also ensured a great user experience for the admins.
Result:
The result was a custom-made web platform launched within three months, meeting tight deadlines and exceeding user expectations. The implementation of modals streamlined content and data management for admins, ensuring consistency in design and enhancing the user experience.
The result was a custom-made web platform launched within three months, meeting tight deadlines and exceeding user expectations. The implementation of modals streamlined content and data management for admins, ensuring consistency in design and enhancing the user experience.
If you're curious, check out the prototype below.
