icanbewell
OVERVIEW
Providing easy access to preventive health information for the Canadian public
Preventive health applications have recently become more popular, as the general public needs a trustworthy source of medical information. Considering there was no such app in Canada that could help both patients and clinicians access up-to-date preventive health information, Dr. Cleo Mavriplis, a family doctor, saw an opportunity to create icanbewell in 2018. icanbewell is a mobile-first progressive web application that curates evidence-based information for the Canadian public and healthcare providers on preventive health and wellness.
Although the web application has gone through a few iterations over the last few years, there was never a UX designer working on it. The lack of UX focus was negatively affecting users’ interaction with the application. Hence, the client, Dr. Cleo, decided to take a UX-driven approach and I worked as a UX/UI designer to redesign the application, plan and shape the future of icanbewell.
My work on this project aimed to:
01 Uncover issues affecting the user experience, including usability and navigation
02 Help the team better understand who the users are and how they interact with icanbewell
03 Redesign the application by creating a new brand identity and applying suggestions to fix the issues uncovered
Company
icanbewell.ca
Timeline
4 months (Jan - Apr 2023)
Sofia Silveira, UX/UI Designer
Shahin Mahmud, Developer
Saurav Raj, Developer
Somayeh Shafiei, Data Engineer
Parisa Nikbakht, Project Manager
Liam Peyton, Project Director
Platform
PWA (mobile-first)
Team
How might we help family doctors and patients easily access preventive health information?
PROBLEM
It is important to design an application that is user-friendly and that accounts for usability in order to provide information in a way that is easy to understand and access. However, the usability and navigation issues present in icanbewell, in addition to the user-unfriendly UI, were negatively affecting users’ perception and interaction with the app. The users’ negative experience was consequently resulting in low user adoption and retention.
Therefore, the goal of this iteration of icanbewell was to take a UX-driven approach to uncover issues and give suggestions on how to fix them, culminating in a redesigned version of the application that will direct the team through the next iterations.
PROCESS
Design Thinking
Analysis of current version
Heuristic evaluation
Client interview
Analyzing secondary data
Empathize
Defining user personas
Creating user journey maps
Define
Creating a brand identity
Designing hi-fi wireframes
Ideate
Prototype
Building prototypes in Figma
Testing
Conducting Exploratory Usability Testing
Lessons learned
Next steps
Review
Current version of icanbewell
CONTEXT
The current version of the application consists of 5 pages, as shown below. I first explored the application to learn more about icanbewell and how it currently works.
Landing Page
The Landing Page contains the logo, a description of the app and links to privacy policy, about us and a welcome video, everything in both English and French.
By clicking on the choix santé part of the logo, users are taken to the French version of the app. By selecting icanbewell on the logo, users are taken to the English version of the app.
User and Patient Details Page
In the User and Patient Details Page, users select if they are a patient or clinician and enter patient details.
The app will display curated information based on the type of user, the patient age, the patient sex and the patient sex assigned at birth.
If a user is opening the application for the first time in a while or ever, the system will consider it a new session and will ask them to accept the terms of use.
Body Page
The Body Page displays a human body image of a male, female or non-binary depending on the patient details provided in the a page.
Users can click on different icons or body organs to read information and access links about that topic or organ.
Users can go to the other pages, Topics and Tests, by clicking on the different tabs at the top of the screen. To change the type of user or the patient details, users can click on the button below the tabs.
Topics Page
The Topics Page displays a list of different topics with preventive health information. Users can either see the complete list by clicking “Show All" or see a curated list of topics by clicking on “See Top 10”.
Users can access the Body and Tests Pages by clicking on the tabs on the top of the screen. To change the type of user or the patient details, users can click on the button below the tabs.
Tests Page
The test page shows information on different health tests and allows users to search for a specific test.
Users can access the Body and Topics Pages by clicking on the tabs on the top of the screen. To change the type of user or the patient details, users can click on the button below the tabs.
Uncovering usability issues
HEURISTIC EVALUATION
To better understand how the current version of the app works and the usability issues that users might face, I conducted an evaluation based on Jakob Nielsen’s 10 Usability Heuristics. The usability issues uncovered are shown below.
-
![]()
1. Visibility of system status
On the Body Page, even after closing the organ modal, the organ title continues to be shown and the colour does not go back to default, not giving appropriate feedback to users about what is happening in the system and where they are.
Recommendations
Remove the organ title at the bottom of the page
Change the organ colour to default when modal is closed
-
![]()
2. Match between system and real world
The Landing Page visual hierarchy focuses too much on the logo and just from the name “icanbewell”, users might not understand what the app is about. Moreover, there is no clear indication of where users should click to start using the app.
Recommendations
Reorganize the Landing Page to clearly convey the goal of the app and how it can be used
Add CTA (button) where users click to start using the app
-
![]()
3. User control and freedom
After selecting the language, there is no button to go back to the Landing Page, so users are not able to leave unwanted actions such as selecting the wrong language. On the Body Page, modals have two close buttons, but redundancy is not necessary in this case.
Recommendations
Add back button
Keep modals close button at the top, so it is visible both when options are closed and expanded
-
![]()
4. Consistency and standards
On the Body and Topics Pages, icons are not keeping internal consistency (different sizes and styles). The logo is icanbewell, but the URL remains canbewell. The colour palette is not translated into the app. As a mobile-first web app, users expect a hidden side menu instead of tabs.
Recommendations
Keep icons consistent, either solid or outlined and the same size
Change URL to icanbewell and incorporate colour palette
Change menu from tabs to hidden side menu
-
![]()
5. Error prevention
On the Tests Page, search results are filtered as users type, which can make users more prone to error. Users might forget the correct spelling of a test and not find what they need. On the User and Patient Details Page, the patient's age should be a number between 18 and 150, but there is no indication of that.
Recommendations
Add a search button (icon) beside the search bar
Show search results only after the search is performed
Add a placeholder in the patient ag field to specify the age range
-
![]()
6. Recognition rather than recall
On the Body Page, users find out what each icon means after clicking on them or if they remember from their past interactions with the app. However, to reduce user memory load, they should not need to remember what each icon means.
Recommendations
Add icon labels (and ideally organ labels, but that is not feasible with the current Body Page layout)
Add a search history to the Tests Page (would require users to have an account)
-
![]()
7. Flexibility and efficiency of use
The Top 10 topics shown on the Topics Page are based on the patient's age, gender and sex assigned at birth. However, there might be outlier cases, such as a young person with a special heart condition who needs to access the heart disease topic more frequently.
Recommendation
Allow users to select their own Top 10 topics based on their needs (would require users to have an account)
-
![]()
8. Aesthetic and minimalistic design
The Landing Page contains too much information and some pieces of information are rarely needed. The lack of correct spacing in the app and the colours used compete for users’ attention and decrease visibility. The app does not have a brand visual identity.
Recommendations
Redesign the landing page focusing on what is essential
Create a brand identity
Redesign the app to incorporate the colour palette and improve visibility and navigation
-
![]()
9. Help users recognize, diagnose and recover from errors
On the User and Patient Details Page, the error message “Please select a gender and age between 18 and 150” is confusing and does not appear close to the age field. Additionally, when no results are found, the Tests Page does not show an error message. Instead, users are redirected to the homepage.
Recommendations
Change the error message to “Select an age between 18 and 150” and place it near the age field
Change the age field border to red to indicate where the error occured
Add error message to Tests Page when no results are found and do not redirect users
-
![]()
10. Help and documentation
Users might get confused when using the app for the first time. Although there is a welcome video on the landing page, some users might not see it. Hence, an in-app guide would be helpful as part of the onboarding experience.
Recommendation
Create an in-app guide that highlights the app functionalities with a brief explanation
Learning about the users
RESEARCH
Dr. Cleo is a family doctor and is often doing presentations across Canada, in which she showcases icanbewell. Hence, she has direct contact with all types of users: doctors and patients and was able to share with me data on those users. Aiming to learn more about the users and how they interact with the icanbewell application, I interviewed the client, Dr. Cleo, and analyzed the secondary data she provided.
Through the interview I:
validated the heuristic evaluation findings and my recommendations to fix the usability issues
prioritized the recommendations based on Dr. Cleo’s needs and vision for the app
learned more about the users and the context in which they use the application
understood Dr. Cleo’s needs and pain points as the medical expert
Defining the different types of users
USER PERSONAS
Based on the secondary data provided by Dr. Cleo, I created 3 personas to represent the different icanbewell users.
“As a family doctor, I need to stay up to date with preventive health information and guidelines”
Archie, family doctor
Frustrations
Feels healthcare information is always changing
Information is scattered across the web
Hard to keep up with preventive health information
Goals
Wants to quickly be updated to give the right information to patients especially considering time during primary care visits for preventive health is limited
“It’s difficult to find preventive health info tailored to non-binary and transgender people.”
Oliver, transgender patient
Frustrations
Feels that transgender people do not have equal preventive health access when compared to cisgender adults
It is hard to know at first if a preventive health tool is actually inclusive
Has a hard time remembering what tests he needs to do
Goals
Wants to stay healthy
Wants to have a clear understanding of preventive tests he needs to do as a trans man
“I want to make sure I can stay healthy, especially considering common diseases in my family”
Chantal, French-speaking patient
Frustrations
Does not have adequate health literacy
Is not an organized person and feels it is hard to find preventive health information
Preventive health tools look complex, difficult to understand and cramped with information
Goals
Wants to stay healthy
Wants to understand more about preventive health
Wants to do preventive tests based on family history
By creating user personas it was possible to build a more consolidated view of the different user groups that use icanbewell. The user personas will be used by the team going forward to empathize with the users and make sure all iterations are focusing on user needs and pain points.
The main takeaways uncovered through the personas are:
Transgender patients have a hard time finding preventive health information tailored for them, so the application must look inclusive, inviting and tailored to everyone from the Landing Page, to motivate people to use the app
Patients want to know what type of tests they must do and when so an idea for the future would be to have a test calendar specific for each user and to send them notifications when the test date is approaching (would require users to have an account)
Doctors are very busy, so the app must be very organized to help them quickly find the information they need without much effort
Many patients using the app do not have adequate health literacy and feel overwhelmed when looking for preventive health information, therefore icanbewell must look friendly, straightforward and easy to use and find information
Key takeaways
Understanding the journey each persona goes through
USER JOURNEY MAPS
Based on the secondary data analyzed, I also created user journey maps for each of our personas to better understand their points of interaction with the app and how they feel at each stage of the interaction. With the journey maps, I started thinking about opportunities to solve the pain points each persona faces and, consequently, improve the application.
The journey maps were the last step in the defining stage of the design process and, along with the personas and research findings, culminated in a document with a complete list of suggested changes to improve the usability and overall user experience of the application. The suggested changes were separated into two categories, high priority and future changes, and will guide the team in the future iterations of icanbewell.
It is worth noting that some pain points shown through the user journey maps had already been uncovered through the heuristic evaluation, while others were newly uncovered pain points.
The main takeaways uncovered through the user journey maps are:
icanbewell is not shown among the top results in search engines, so the team must work with an SEO specialist to improve SEO and help icanbewell be indexed higher in results
Some doctors may find the User and Patient Details Page confusing at first, not knowing which fields are related to them or their patients, so this page should be improved clearly distinguish which fields require patients’ information
Providers have access to an “all ages” option in the User and Patient Details Page, but it is not clear how this is useful for them, therefore this option should have a tooltip to let them know how it can be used
Some users feel the way content is organized, especially when using the application on a small screen, makes it hard to read and understand, so the content should be refined and formatted to better fit mobile screens
Some users might find it confusing to have to accept the terms of use on the same page as the user and patient information, especially because they must fill out the form before clicking to accept the terms, so the form and the acceptance of the terms should be split into different pages
Key takeaways
Creating a brand visual identity
BRAND IDENTITY
Initially, the app did not have a consolidated brand identity and did not follow the colour palette used in the logo. Hence, I focused on these colours when redesigning the application to incorporate the brand identity into the app.
Separating the app’s Landing aPge into the English and French pages was one of the client’s highest priorities, so it was important to have a different logo version for each page.
English Logo
French Logo
Imagery
Moreover, to make the Landing Page more friendly and allow users to feel represented, I decided to add a banner with different images representing the people that might use icanbewell. The images should show people from different ethnicities and in different age groups smiling to convey the idea that the app is for everyone and that, with the app, people can stay healthy and live happily. Hence, I separated some sample images to use in the new UIs I designed.
Turning insights into a (re)design solution
IDEATING
Considering the issues uncovered through the research and user journey maps, I then created wireframes of the redesigned app. The current version of icanbewell is shown on the left, while the designs I proposed are shown on the right. It is worth noting that for all screens, I created both an English and French versions.
Landing page before
Too much info competing for users’ attention, not everything is essential
No clear indication of how to start using the app
Landing page after
Image carousel to make the landing page friendly and inclusive
Included policy, about and contact info on the footer, only visible when scrolling the page
Separated the landing page into two pages: English and French
Used hierarchy to convey the message of what the app is about and added a call to action
User and patient details page before
Not clear what should be user info and what should be patient info
Terms of use are shown on the same page, but users cannot accept the terms unless they have already filled the form
User and patient details page + Terms of use page after
Added a button to allow users to go back to the landing page
Organized information to increase visibility and readability
Separated the terms of use from the user and patient details form
Created different sections to help users visually distinguish user input fields from patient input fields
Body page before
Lack of proper spacing, decreasing visibility
Icons are not labeled and are inconsistent in style and size
Tabs are used to navigate between the different pages
Body page after
Created a structure for all pages with a heading and subheading to help users locate themselves and understand how to interact with each page
Icons are labeled, the same size and symmetrically displayed
Added a hidden side menu, accessible on all pages, allowing users to navigate between the 3 content pages and the landing page
Topics page before
Tabs are used to navigate between the different pages
Top 10 is the second option, but when users select the topics tab the top 10 topics are shown first
Topics page after
Top 10 is now the first option
Follows the same page structure created
Hidden side menu for easy navigation
Tests page before
Tabs are used to navigate between the different pages
No search button, results are updated as users type
No error message, if no results are found, users are redirected to the landing page
Tests page after
Follows the same page structure created
Results are shown only after users click on the search icon or the enter key on their keyboard
Clear error message to help users understand and recover from errors
Hidden side menu for easy navigation
Testing the usability of the first UX iteration of icanbewell
PROTOTYPING & TESTING
I tested the designs with 6 participants, two being family doctors and 4 being patients (non-medical). Participants were invited to participate by Dr. Cleo, who sent an email to people in her network. Considering the participants’ busy schedules, Dr. Cleo and I decided to perform an unmoderated and remote usability test, as this would give them the flexibility of performing the test in their own time.
As this was the first UX iteration of the app, and the designs created were not yet being developed, the goal of the test was exploratory, to help us get the participants’ opinions and see their emotional impressions of the app. It was also helpful to gather ideas for potential new features.
Each participant used their own phone to access a prototype of the app. To help them navigate the prototype and avoid getting only superficial answers, I created a usability testing protocol, which was provided to participants to guide them during the testing. The protocol was composed of brief instructions about the app, the link to the prototype and a few questions to structure their feedback. It is worth noting that, since we would not be able to ask follow-up questions due to the unmoderated nature of the test, we focused on getting qualitative answers that would give us a richer feedback, as opposed to quantitative answers. Access the testing protocol here↗
While a couple of participants had never used icanbewell before, the others knew what the current version of icanbewell looked like. Either way, all participants found the redesigned app is straightforward and easy to navigate. Moreover, they found the reduction of text, especially on the landing page by splitting the English and French pages, was beneficial and made the app more inviting and modern. The participants that had already used icanbewell pointed out the new designs look clearer and said they liked the use of photos on the landing page instead of only graphics. Most participants said the app looks professional and credible, which could eventually lead to higher user adoption and retention.
Some great suggestions for new features and content include:
adding information on different diets and linking it to different topics such as nutrition, physical activity and blood pressure
asking users’ cultural background, as there are some diseases specific to or more common in certain cultural groups
using photos of overweight people, first nations, physically handicapped, etc. to increase inclusivity
change some icons that are not easily recognizable
Results
Next steps and lessons learned
REVIEW
In the short term, the next step would be to analyze all the ideas suggested by the participants to decide which ones will be implemented in the app. Additionally, a more robust prototype could be created to allow for more thorough testing. Finally, after the necessary changes are made, the new designs will be deployed.
With this project, I learned how important it is to make sure the team is on the same page and understands the importance of UX, especially when the project did not have a UX focus from the start. By communicating and explaining the design decisions and the reasoning behind them, I was able to build more trust with the stakeholders and make sure the whole team adopted a user-centered mindset.
As I leave this project, I am confident that the work I did goes beyond just redesigning the icanbewell application, as it created a shift in the team that will be essential to continuously improve the user experience and will help shape the future of icanbewell.
Want to read more?
Grandma Tech
Teaching the elderly how to use mobile apps through gamification
Amazon 🔒
Designing a Planner Tool for Amazon while working as a UX Designer at Athlon
HomePeace
Helping roommates to live together more peacefully