Top
 

DocFlight Website Redesign

Redesign of a telemedicine company website to create an efficient and engaged user flow for their clients in China

 
 
 

About the Project

This is a two-month website redesign project for a medical technology company that connects patients in China to doctors in the US through virtual consultations or overseas treatment. The website serves as a platform where clients can learn about the company and its service areas. By redesigning the website, I aimed at providing a user flow for users to browse the website and get the information they need in the most efficient way.

My Role

This is an independent project. I was the UX researcher and designer. I conducted interviews, surveys, and usability testing for user research. Competitive analysis was performed as marketing research. Then I created wireframes and prototypes for experience design, interaction design, and visual design.

 

USER RESEARCH

docflight user research.jpg
 

User Interview

Before I could start ideating the redesign, I needed to understand who this website would be serving, why they would come here, and what they would be looking for from the website. Having the three key questions in mind, I developed an interview protocol by myself and looked for participants who I thought would be potential users to have the interview with me. Since the company's target audience are patients in China, I interviewed 6 participants between age 30 to 55, who reside in China. I conducted the 30-minute interview with each of them through phone call.

 

In the interview, I divided my questions into two major directions:

1. About Overseas Care

Overarching question: What's the opinion of Chinese patients towards overseas care?

  1. Why would they want to see an American doctor, but not go to a hospital in China?
  2. Would they accept the method of virtual consultation?
  3. Would they trust the American doctors?
  4. ......

2. About the company

Overarching question: What would a patient want to know about the company before he decides to work with it?

  1. What qualifications of the company would they like to see?
  2. What are the traits of a reliable company or service?
  3. Why would one company win over the other?
  4. ......

By asking these questions, I expected to learn the pain points of patients in China so that I could define the guiding principles of the new website design.

 
 

Affinity Diagramming

I used the affinity diagrams to understand the large amounts of qualitative data. I invited a colleague to join in the brainstorming session. We read through the interview transcripts and wrote down valuable points on post-it notes, put them on the white board, and reorganized them into different groups. By doing this activity, I got a clear understanding on the user behavior and user flow.

 
Affinity.png
 

Survey

Based on the initial data results, I created an online survey for further understanding of the users. 36 valid surveys were collected and the results were generated into charts through an online tool. By asking the following questions in the survey, I received many valuable answers to my design questions.

 

Survey Structure

1. Demographics

  • Age group
  • Educational level
  • Annual family income

2. Current user frustrations

  • Overall satisfaction rate on China’s medical system
  • Pain points of getting treatment in China

3. About overseas care/telemedicine

  • Willingness of trying a new method
  • What to expect (good/bad)

4. Expectations on the company

  • Ranking of different aspects
Sample Survey Created in Chinese

Sample Survey Created in Chinese

 

Charts generated from an online tool (in Chinese)

Education Level
High School: 14% | Undergraduate: 64% | Graduate and above: 22%

Family Income
Less than 30K: 33% | 30K - 75K: 44% | 75K - 110K: 17% | 110k and above: 6%

Satisfaction with Medical Treatment in China
Very high: 3% | High: 5% | Medium: 39% | Low: 36% | Very Low: 17%

Willingness of Trying Overseas Care
High: 47% | Medium: 44% | Low: 8%

Issues Experienced
Short treatment time: 28 people
Unable to see the doctor because of too many patients: 24 people
Too expensive: 10 people
Poor hospital environment: 8 people
Low efficiency of staff: 8 people

 

What information do users value the most and the least?


Through the survey, I was able to tell what users would search the most when they are on the website in general. These results brought me valuable insights on how I should recreate the user flow. For example, showing the quality of doctors and hospitals DocFlight has access to should become the most prioritized content on the website. In regards to the company introduction, users are more interested in checking out the service areas and procedures. Therefore, this information should be displayed more prominently than the other.

 
 

About Overseas Care

 
importance 1.png
 
 

About the Company

 
importance 2.png
 

Usability Testing

 

In order to further understand the issues that exist in the current website, I developed a series usability testing tasks for users to interact with the website. The testing tasks were inspired by the insights I retrieved from the interview and survey results.

 

Scenario:

Your friend was diagnosed with breast cancer and could not get good treatment results in China. You heard about a service about visiting a US doctor and would like to find more information about it. A friend recommended DocFlight to you, and you open the site on a Saturday morning.

 
 

Tasks:

  1. Find out what disease specialties DocFlight has resources with

  2. Find out a doctor who is specialized in breast cancer

  3. Find out the hospital he/she is affiliated with

  4. Find out any successful case DocFlight has completed in treating breast cancer

  5. Find out the procedure of how to work with DocFlight

  6. Know more about the founding history of DocFlight and the team

  7. Contact to get more information

 
usability testing hand.png
 
 
 

Results:

Many usability issues were uncovered during the four usability tests I conducted. I listed the three major UX issues that basically occurred to every participant. There were also some UI issues pointed out in the testing, but I would be focusing on solving the UX issues primarily for this project to make sure the website could work more functionally.

 
 
 
arrow down.png
 

Major Usability Issues

Usability 1.png
Usability 2.png
Usability 3.png

Confusing Homepage Navigation

Secondary navigation menu in the middle of homepage does not provide a strong visual clue of how it functions.

Dual-navigation on homepage may bring confusion to users.

Discontinuity Between Pages

There is a lack of connections between the doctor page, hospital page, case study page, and specialty page. Users would have to go back to the homepage to enter a different page, which could break a logical and natural user flow.

Lack of Filtering or Sorting Feature

There is no filtering/sorting feature on some text-heavy pages, (i.e. the doctor page and the hospital page). This would cause difficulty for users to find a specific piece of information

 

Competitive Analysis

Five medical technology company websites were selected for a comprehensive competitive analysis. After browsing these sites thoroughly, I was able to draw six findings that will influence the redesign.

 

 
 
Competitors.png
 
 

Design Insight

 

1. Use carousel slider for homepage images (and the partners section)
2. Separate the specialty section from other content on homepage and place it prominently
3. Use visual icons and hover effects to introduce service content and highlights
4. Display authorized documents or correspondences between the company and the hospital to increase credibility
5. Service procedure could be best represented by a flow chart
6. Use real photos to catch users’ attentions in the news section

 

WIREFRAMING & PROTOTYPING

Artboard.png

Find the information (doctor, hospital, case study) of a specialty more fluidly

In the updated prototype, I redesigned the 'specialty' page to make sure it could be linked to the related 'doctor', 'hospital', and 'case study' page. Users will be directed to these pages based on his interest when he is viewing a specialty. As I learned from the user research, the factor of medical resource and qualification is what clients would value the most. Therefore, a fluid user flow of moving along the specialty and its treatment resources is essential to the efficiency of the website.

DocFlight prototype.png

View medical resources and company services more efficiently

Medical resources and company services are the two main aspects that users would evaluate before they make a decision. On current website, when users are directed to an overall page of hospitals, doctors, or case studies, there are no filtering or sorting features for them to narrow down the results. Therefore, filters are added on the redesigned website to increase the search efficiency. Also, the titles of doctors, hospitals, and case studies are linked to the corresponding pages in order to provide a quick path for users to access the information. In addition, on the 'service' page, a flow diagram was created to better illustrate the procedure of each type of service.

Docflight prototype 2.png

Back to homepage or view other work below