A website that strives to provide expert health guidance
UX design by Jiaqi (Xenia) Zhou

Welcome to My Project
Project Overview
My research is to evaluate the UX design of a healthcare site -- Healthline. The number of people using the internet as an information source about health continues to grow. Even though there are a lot of medical information searchable online, users complain that some health websites are not easy to navigate, and users are skeptical about the credibility of the information. It is important for a health information website to implement design thinking with a human-centered approach. Therefore, my project aims to enable healthline users to navigate the site easily and find credible solutions to their health concerns.
Design Statement
The healthline website provides up-to-date health news/articles, medical information on common health conditions, health tools such as the symptom checker, online doctors, and the human body systems. Although all the information and tools are available on the website, it is not easy to navigate. After conducting the heuristic evaluation and testing, I determined that the healthline website lacks three main features. The first issue is about professional guides. The site does a good job providing articles fact-checked by its nutrition team. However, some users need more than that. It would be better if users can communicate with the professionals about their concerns either through a discussion board or chatbox. The second issue is about simplicity. There are many medical terminologies that are not familiar to users, so it might be difficult for users to engage with the website. Also, the website lacks icons to increase fluency and improve task performance. The third issue is about accessibility. The healthline website does not have a top menu bar that clearly presents what services the website offers, nor does the site have high font contrast and color contrast. More importantly, the hamburger menu on the left corner contains ambiguous content, which makes users confused how to start their journey on the website.
Competitor Analysis
I originally chose to focus on the home appliance business that provides innovative products to serve consumers in their everyday life. I feel obsessed with everyday gadgets because they offer assistance in our daily life and help us live a better lifestyle. I believe that not only the design of products that leads to the company’s success but also the accessibility of its website. The first website is the website for Philips, which has a high level of brand awareness and has the most influential product design. The second website is the website for a local home appliance store called Home & Farm Kitchen Supply, which is welcome by local people for its unique cooking utensils. I hope to contribute to the UX design of these two websites and improve customer satisfaction and loyalty.
After conducting a heuristic evaluation on usa.philips.com, several usability concerns needed to be addressed. Therefore, I conducted the usability test on Philips website to understand whether its design smooths or hinders the test process when the user is completing the tasks. The pilot test aims to measure the effectiveness, efficiency, and satisfaction of the Philips website. The test also tries to identify any shortcomings that the website should be improved on and increase conversions. Task 1 will test the aesthetics and efficiency of the use of the toothbrush heads product page. This task aims to check whether useful information will be captured by the user quickly, and how much irrelevant information is presented as the user is browsing the product. Task 2 will test the consistency and minimality of the pasta makers’ product page. This task will check whether having lots of products related pictures, both static and dynamic, will make the user engaged or tired. Task 3 will test the effectiveness of the search box. Some users may prefer to find a product by typing in the keyword in the search box at the top instead of going through the catalog. The goal is to see how the user interacts with the website and find his desired product in a minimal amount of time.
Usability Test on Philips:
User Research
After the usability testing, I conducted the contextual research on health-related web page users. The goal is to get insights into the reason why people use the internet for health-related subjects, what kind of health information websites users usually visit, and what are the pros and cons of those websites. The research helps me understand some website design challenges and what users are seeking from health-related online resources.
UX Storytelling
After the user research, I targeted my users from age 18 to 40, who can access the internet easily, and they would be more likely to turn to the internet for the solution. I created three personas and scenarios that depicted the users of the healthline website. My first Persona is Cindy, an accountant in San Francisco, whose goals are to keep her son healthy and try to balance work and family. My second persona is Paul, a Uber driver in Jackson, MS, whose goal is to maintain a healthy weight and improve health quality. My third persona is Doria, a third-year college student who has depression and seeks assistance from healthline.
Cindy
Accountant
During weekdays, Cindy has to go to work at 9:00 AM after she sends her son to her mother’s home. Cindy will pick up her son after work at around 6:00 PM. It’s 7:30 AM, Cindy wakes her son up peacefully as usual. She realizes that there are patches of red and itchy skin on her son’s cheeks and some on the neck. She thinks making an appointment may need to wait for several days, but the closest clinic for walk-in service is about an hour’s drive. She doesn’t have time to take her son to wait at the clinic for a walk-in. During her breakfast, she visits the Healthline site and tries to use the Symptom Checker to find any solutions. The Symptom Checker also allows Cindy to filter keywords to get more accurate results. It’s possible that her son has normal eczema, and the site provides several options to help with symptoms.
On the same page, Cindy is allowed to visit a physician online on the same day from 8 AM to 8 PM, and she can choose a preferred physician that speaks her language. Luckily, Cindy can choose the 8 AM meeting with a Chinese-speaking physician; otherwise, she will need to wait until the next available appointment at 6:30 PM.
Cindy soon finishes breakfast and turns on the Zoom meeting on her laptop. The consulting lasts 30 minutes, and the physician lists out foods to eat and avoid when having eczema. In minutes, the physician sends out the prescriptions to Cindy’s preferred pharmacy. Cindy can pick up the medication after she receives notification from the pharmacy through the message. At about 9:00 PM, Cindy sends her son to her mother’s home, and she gives her mother the list of food recommended by the physician (written in Chinese). She asks her mother to pick up the medication in the nearby Walgreens Pharmacy if she is available. Otherwise, she’ll need to pick up after work. With the help of a virtual meeting with a physician, Cindy is able to keep her son healthy and go to work without worrying too much about her family.
Paul
Uber driver
Every morning at 6:30, Paul gets up to start his workday because early morning is one of the peak times for Uber drivers. He does not have time to make breakfast, so he drives to the nearby McDonald’s to buy a Sausage Burrito. During lunchtime, Paul often visits Panda Express before he takes a nap in his car. Paul finishes driving at about 6:00 PM and has dinner with his family. After dinner, he usually lies on the couch to play with his phone or iPad. This is Paul’s daily routine.
However, he feels like his situation is getting worse as he has increased sweating even after dinner in the winter, and has trouble breathing at night. He begins to pay more attention to the health news and visits some health sites when he has time. Sometimes he would take a walk in the backyard after dinner and does some simple exercises. However, he couldn’t stay motivated because he does not see any changes in his body. One day, when he’s browsing the healthline website, he happens to see a forum created for people with obesity to share experience, and there are specialists answering questions. Users can also make appointments with specialists to do a weekly 10 minutes check-in so that the specialists can set up healthy meal plans and workouts for individuals.
Users are able to set up an account on the website to enter their daily workout time and weight into a progress tool. Even if Paul does not have time to meet with a specialist every week, he can do the daily workout/diet logs using the progress tool and stick to the plan. In this way, the specialist can keep track of the progress to make adjustments to the plan. With the doctor’s professional advice and the tool to track the progress, after a month of using the health site, Paul successfully loses 10 pounds.
Doria
Third-year college student
Doria is a hard-working third-year CS major student. Despite her hectic class schedule, she also works part-time on campus as a front desk. After finishing the work, she nearly has time to join parties with friends. She usually stays up very late to get her homework and projects done. While she stresses over busy schedules, she is so frustrated to find out she has irregular menstrual cycles. Worse still, she may suffer from depression when facing pressure from school and the process of applying for internships. Her depression and terrible health condition make her feel isolated.
When she is feeling emotionally distressed, she often goes on social networking sites to share her thoughts instead of talking to her friends and families. She also tends to read some articles from health sites to see if she can get more information to improve her health. She tries to enter “depression” to the search box to see if she can find any helpful information. However, she does not want to read long and tedious medical reports. She also has concerns with information reliability from those sites. She happens to read an article from the Healthline site about college life and depression. There is a subsection talking about how depression affects women’s menstrual cycle, which triggers Doria’s interest. The article does not use many complex medical terms, and it allows users to leave comments or shares their thoughts, views, and emotions anonymously. Doria feels delighted as she finds out many college students also have the same experience.
The site also offers a chatbox for users to talk to a professional psychologist. The chatbox is 24/7 available whenever users need some professional guidance. If needed, the psychologist may suggest having a video meet-up with Doria to provide better treatment. Though Doria is skeptical about the reliability of the chatbox, she gives it a try. She also receives psychological treatment through video consultation. She feels like she is being taken care of, and she can talk to someone she can trust. Besides taking antidepressant medication and hormone medication, the psychologist also suggests well-balanced meals throughout the day. To keep monitoring Doria’s health, she is encouraged to share her progress on the site with the psychologists or any specialists she prefers.
Wireframe and Graphic Design Element Variation




DISCOVER
Low-fidelity Prototype
After finishing the UX storytelling, I started the low-fidelity prototype based on three features I wanted to incorporate into the healthline website. The purpose of this low-fidelity prototyping is to use limited time and resources to get insights into users' needs and receive feedback to detect and fix major interface issues. I initialized my ideas by hand-sketching, then I updated the interfaces on Balsamiq. By using the Balsamiq Mockups to frame the interface, we can identify the pathways users take to complete the tasks and whether they understand the content. Since there are many medical terms on the healthcare website, it is important to accommodate people with different health literacy and different familiarity. With low-fidelity prototyping, we can invest more time and resources to optimize the user experience in the later stage.
![]() | ![]() | ![]() |
---|
Testing the Wireflow:
High-fidelity Prototype
After creating the low-fidelity prototype, I was ready to work on the interactive prototype using Figma. Based on the Balsamiq interface, I first set up the header, footer, menu, and contents on each page. Next, I added buttons and icons to increase clarity and readability. I applied the layout grid (12 columns) to ensure consistency across the page. Then, I adjusted and checked the buttons, foreground, and background colors by using Contrast Checker. After all the pages were set up, I added the interaction to each button and made sure they were assigned to the correct page. Finally, I conducted user testing and received feedback from my peers so that I can improve the usability of my prototype.
Evaluation and Revision History
Cognitive Walkthrough
The cognitive walkthrough was conducted remotely. My peers commented that some of the features on the tools' pages are confusing. For example, they did not know why the Tools page would take them to the Symptom Checkers, which was the first page of the Tools. They found that the side menu with checkbox was unclear as they did not know whether these were one of the selections/choices or buttons to use other tools. Some buttons contained too many words, so I should cut down to make it look clearer. The text size of the title should be adjusted to make it more distinguishable.

Impression Test
After I finished designing the interactive prototype, I recorded an impressive test with a friend of mine. The user's first impression was an image of two men (but actually there's only one man) and the color blue. The user believed the color blue matched the theme of the healthcare website, and the image reflected a sense of professionalism. Even though the user felt the size of the image looked good to him, he could not recall the "wellness tool" section below the image during the 5-second impression test. Therefore, I'm considering whether I should adjust the size of the content on the landing page.
Accessibility (color-contrast) check
Before I applied colors to the prototype, I ran the audits to check the color code on the original website. The audits showed the background and foreground colors do not have a sufficient contrast ratio. The foreground color is iris blue (#01ABD9), and the background color is white (#FFFFFF), which results in a 2.73:1 contrast ratio. To increase the brightness between two colors, I used WebAIM to adjust the lightness of the foreground color and checked which color will give a contrast ratio larger than 4.5:1 to target the WCAG (level2, AA) recommendation. I decided to use the Bahama blue (#1F5A7F) for the foreground color with white background (#FFFFFF). Some texts are in black font color (#000000), which is very high in contrast with the white background. As for the original footer, the background color is light orange (#FBF5ED) and foreground colors include black (#000000), grey (#918F8F), and iris blue (#01ABD9). The color contrast between light orange and grey, light orange and iris blue is pretty low, so I decided to change the background color to seashell (FFF8F5), texts in grey are changed to black (#000000), and texts in iris blue (#01ABD9) are changed to Bahama blue (#1F5A7F).
Before
After
Usability Testing
Usability testing was conducted to evaluate how well the interactive prototype has been designed. After the UT, I made some changes based on the feedback from the user:
- Enabled View/Print PDF and Download button for users to print their medical records
- Resized the map on the medical records page
- Changed the button shape on the confirmation page
- Specified the articles are written by professionals and have fact-checked
- Allowed users to type in keywords using their keyboards
- Separated article and discussion board
- Added a pathway on the top of the article to remind users how to get back to the last page they were on
- Re-designed the goal checker page, so users can write notes if they want instead of just checking the boxes
- Added interaction on the goal checker page

Pitch Video

Conclusion
UX design is an iterative process and requires design thinking with a human-centered approach. When going through the design process, I've learned that it might be easy to create a website, but making a website that can fulfill users' needs is another story. Therefore, as a UX designer, we need to listen to different users' needs, generate data, and design a prototype that is user-friendly and accessible. It is not just simply presenting the contents to the users, but how approachable are the contents.
One difficulty throughout the design process was that I was subjective about the contents so I would add some elements that I preferred. However, I realized that a good UX design is the result of research, interview, testing, prototypes, and feedback from users. After completing the assignments step by step, I am glad that I’ve learned many skills including heuristic evaluation, usability testing and analysis, user research, creating persona and scenario, and prototyping.
Thank you Dr. Cho for giving me a chance to explore UX design and providing critical feedback to help me improve my project.
