Tencent Healthcare Projects

OVERVIEW

Problem

On Public Medical Services Inquiry page of Tencent Healthcare, one of the Mini-programs on WeChat App, the functions are displayed in the form of a list. However, there are a total of 31 Provinces in China, and the public services in each district are different. Therefore, for some cities with more medical public services, the page would be very long if the layout is still simply in the form of lists without organization.

Screenshot of the original version

Users can hardly find what they are looking for.

Here is the screenshot of original Public Services Inquiry page with a list of services items in Shenzhen. The items are, for example, "E-certificate Medical Insurance Record", "Cross-provincial Medical Services Inquiry", "Maternity Insurance", etc. For most of the services, the names are too long and complicated to remember, and it is hard for users to quickly find what they are looking for.

Users need to keep pulling up the pages.

There are more than 20 Provinces in China, and the public services in each district are different. Users need to keep pulling up the pages if the district has more services items.

Research

▎COMPETITIVE RESEARCH

Alipay - App Center

Here is the English version of Alipay. The categories are very clear and easy to remember, such as "Convenient Life", "Shopping & Entertainment" and "Wealth Management". It is convenient for users to immediately understand what kinds of apps Alipay have, and helps them quickly locate the app they would like to use.

National Medical Insurance App - Home Page

Similar as My Health Card, the four main features are placed at the top. The second category is "Query Services" includes “Payment History" and "Medical Insurance History". This interface design makes it easy for users to find the information they're looking for without being bogged down by what appears to be endless content.

WeChat - My Health Card

My Health Card is a mini-program on WeChat App as well and is one of the products of Tencent Healthcare. In here, the three main features are placed at the top, they are "Schedule Covid Vaccines", "Register for Appointment" and "Health Record". Other related features, such as "In-network Hospitals" and "Blood Sugar Management", are categorized as "Tools". Card UI is one of the best options here.

▎DESIGN GOALS

Improving the efficiency to find the target content.

From the user research, we learned that most users could hardly understand those service items since the names are non-literal, and they might need a good navigation to help them find target contents quickly instead of looking at them and remember them one by one.

▎ Therefore, the first strategy to achieve my design goal would be using Card Sorting strategy (Open-card sorting) to explore new categories, and re-organize topics into those categories based on users' mental models and scenarios. We were using the whiteboard and sticky notes to conduct Card Sorting by grouping different services items into different categories.

▎ Based on our user research, the second strategy to achive our design goal would be optimizing the page layout and its information architecture.

Based on the design goal, open-card sorting strategy was using to explore new categories. Here are the items product team provided that need to be categorized:

(P.S: The differences in language and culture, as well as the policies in different countries, may result in inaccurate translation. In some cases, more explanation and background knowledge may be necessary to help readers understand the meaning of these terms and phrases.)

Five participants attended this activity and they came out with different results. After summarizing the results of their findings, the items are divided into the following groups:

▎INSIGHT

The 13 items can mainly be divided into 4 different categories, they are Health Plan Eligibility Benefit Inquiry, Facilities Inquiry, Out-of-area Coverage Inquiry, and Other Inquiries.

•

Design

Having understood the design goals, I started brainstorming and developing ideas that can help me achieve the goal.

Improving the efficiency to find the target content.

So far, users see all of the contents laid out on the page, where the contents look so similar and prevent them from finding the ones they need. From my user research, I learned that users don't want to waste time on reading the titles one by one or even trying to figure out what those are. Instead, they want to target the content they need immediately.

▎DESIGN IDEATION: SKETCH

The layout can be present in the form of list with clear heading and subheadings in order to attract users' attention, giving a proper understanding of what to expect from clicking on a link.

With this idea in mind, I quickly drew out the sketch and thought about the pros and cons.

The clear heading Public Medical Services Inquiry was added to the top of the page in order to let users know that they are on this page. Location "Shenzhen" was moved beneath the heading. The items are grouped by the specific categories with card.

Pro: Users have already had the basic understanding of what the contents are.

Cons: 1. No highlights of the key features if the contents or categories become more and more;
2. The layout would look empty if there is only 1 category.

▎INSIGHTS

Based on the user research and pros and cons, I came up with two more findings to optimize the page layout and its information architecture in order to achive our design goal.

The layout can be present in the form of list with clear headings and subheadings in order to attract users' attention, giving a proper understanding of what to expect from clicking on a link;
Rules for layout selection: If items ≤ 5, no classification needed; if items > 5 and with specific categories, choose the layout with classification;
To highlight 3 key features in the Recommendation section if there are many categories existing in the page. The 3 key features are chosen based on users' core needs, and are arranged in order according to the individual behavior or click-through rates from the area (communicated with our product team and they will provide the data).

To adhere to the findings above, I came up with four different cases/scenarios. So, I decided to do some math here.

1. Items ≤ 5, category = 0

2. Items ≤ 5, 0 < categories ≤ 2

3. Items > 5, categories = 3

4. Items > 5, categories > 3

▎WIREFRAMES

With the findings in mind, I started thinking about the different layout for different scenarios.

01. No classification layout is needed when the amount of public services in a city are less than 5 and no categories exist (random items in random arrangement). The reason I am not going to use the layout with classification here is to avoid too much empty space.

02. Layout with classification can be used when the amount of public services in a city are less than 5, but the categories need to be 1 or 2.

03. Using the layout with classification when the number of public services in the city are greater than 5, and the number of category is 3. To help users increase the speed of searching for specific information with titles, subtitles and card that seperate different areas.

04. Using the layout with Recommendation section on top only when there are many categories (the number of category is greater than 3) existing in the page . The 3 key features are chosen based on users' core needs, and are arranged in order according to the individual behavior or click-through rates (Product team will provide the data).

05. These two layouts are added for keeping the banner.

06. Word wrapping in different situations:

▎HIGH FIDELITY DESIGN

With all the different scenarios/ cases in mind, I started diving into details.

01.Layout without Classification

When items ≤ 5 and category = 0, the layout with no classification can be used.

02.Layout with Classification

When items ≤ 5 and 0 < categories ≤ 2, layout with classification can be used. If there are items in the same category, use the one on the right side.

03.Layout with Classification

When Items > 5 and categories = 3, the layout with classification can be used. To help users increase the speed of searching for specific information with titles, subtitles and card that seperate different areas.

04.Layout with Classification + Recommendation

When Items > 5 and categories > 3, this layout can be used. Since there are too many categories and items, users could not target the content they want to find immediately, the recommendation zone would be really important at this moment.

05. Classification + Banner
(+Recommendation)

If the banner is required, and the services are classified, these two layout can be used.

What I Learned...

▎Considerations for Redesign

This is my first time doing an internship as an UX designer, and especially in such a big tech company in China. Redesigning an existing page with a large user base, designing the same product in different cases/ scenarios, and adding a new feature to it can be an exciting and challenging experience. It pushed me to think deeply about what type of cases the users will capture useful information more quickly, and to consider about the logic behind it.

However, working with a large user group has also required me to make more conservative choices that fit better with users' existing mental models. But I'm not sure if this is the best approach for redesigns, so I'd love to learn and discuss more about it!

▎Improvement on Skills

One of the most important skills I learned during my internship in Tencent is the importance of understanding user needs and expectations. User research is essential to identify user pain points and design solutions that are both useful and usable.

In addition, I also learned about the importance of designing for different use cases and scenarios. I think that this skill is critical in ensuring that the design is flexible enough to accommodate different users' needs and expectations. By considering various use cases, the product can be both user-friendly and intuitive.

Another essential skill I learned is the importance of collaborating with other designers, developers, product managers, and stakeholders. Good communication skills are crucial to ensure that everyone is on the same page, and the project moves forward smoothly. As I worked on redesigning the page and adding new features, I had to collaborate with UX researchers and the product team to ensure that the final product met their needs and expectations.

Thank you all for reading through the whole redesign project! Hope you enjoyed learning about my design and thought process. As I said, this is my first time redesigning an existing product (a page) with a large user group, so I'd love hear your feedback and learn from you! :)

Public Medical Services Inquiry Page Redesign