Mor Prom

How can we standardize COVID information for Thai citizens and make it easier to understand?

Problem

Thai citizens are confused by information on the Mor Prom app. There are too many things that are more or less the same. More specifically, there was a redundancy in information all over the original Mor Prom application.

The homepage shows 3 different ways to access your vaccination proof. Confusing, right? 🤔

Each document has the exact same information so Thai citizens weren't sure which one to actually use.

In addition, users reported that it was overwhelming to read heavy medical data on the current form, and much harder to zoom into a PDF on a mobile device. They just want to show the number of vaccines.

Design Goal

The Ministry of Health brought in our design team to help re-design with two goals in mind:

Standardize the COVID process journey so everyone uses the same thing.
Make COVID & medical information more digestible to citizens.

Empathizing under pressure

Summary: No time for research because of COVID. We quickly talked to stakeholders to gather requirements.

The most challenging task about Mor Prom was the fact that we had no time to research due to time pressure. Because COVID was spreading quickly, the ministry wanted to launch the re-design as soon as possible.

Our workaround: gathering requirements from every stakeholders

If we could not conduct full-length interviews, the next best thing we could do was to talk to many stakeholders as possible. We reached out to frontline officers, COVID doctors, friends and family -- and listened to every user journeys, scenarios, needs and pains.

Establishing design principles

Summary: Mor Prom app should be user-friendly at first impression, but still be credible and scientific.

It's important to us to set design principles for the UX/UI designers and UX writers to make sure that our work is aligned to the stakeholder's vision!

1. Re-purposing existing info

We’re not just shuffling information around, we want to re-purpose them to match real use cases.

There are 3 vaccine passes? Let's find out how each one is used and reduce them to 1 pass.

2. Make everything scannable: users should be able to understand their COVID data easily with one glance, and not getting confused by heavy medical language.

3. Medical data is just one click-away: on the other hand, if users need to find and use the 'heavy' medical data, we made sure that it is still easily accessible.

Creating the new info architecture

Summary: COVID vaccine history has the highest priority and most used. The three COVID passes differ how it's used -- digital for personal viewing and physical for legal uses.

Card Sorting

We recruited Thai citizens to prioritize COVID and health info in a card sorting activity. We asked them what they usually use the most and want to see first.

Results:

COVID vaccine history ranked 1st. Wherever people go, they need to show it as proof.

Followed by

PCR/ATK test results
Testing locations map
International COVID
Personal health records

Hospital Use Cases

We also asked doctors to walkthrough the real-life use cases of each medical form: What is the purpose of this form? Who will be the one viewing it? Is it digital-based or paper-based?

The only difference between the forms is how it's used. Digital forms are for personal viewing and PDF forms are for official/legal uses.

In addition, Mor Prom was planning to create a QR passport for future vaccination/medical data. So we took that into design considerations and conducted desk research on QR health passes that other countries have done.

1st Iteration: Lo-fi sketches

Homepage: card sorting really helped us prioritize commonly used information and we reduced 10 menus to just 6 menus that will be used in real life!

COVID pass: We also got rid of redundancies and selected essential information from each medical form to create one, holistic vaccination ID.

Users told us that people often check the number of doses first, so we made sure that it's visible immediately.

Test results and recovery status were less important.

Validating 2nd iteration: does it actually make sense?

Once we designed lo-fi wireframes, we wanted to conduct user testing which was not part of the project timeline. But because the app is going to be used by the entire country, the stakes were high and we managed to convince to at least run a survey to validate our iteration.

Again, we understood the risks of delaying the app. Therefore, we conducted a survey instead of a full-length interviews to minimize time.

Final Design

Solution 1: It's a passport, not a document

COVID information can be quickly scanned like a passport on one page

Only showing relevant data for practical uses (e.g. only the number of doses)

Using color-coded status so someone can quickly glance and concludes, "He's fully vaccinated"

Medical info is one-click away (design principle). If users need to see the official form, it is right below each section

Solution 2: Homepage based on practical uses

Sections that are prioritized from card sorting activity: most-used features, news, & navigation bar

Icons that do not repeat and actually represent their functions

Secondary menus (international pass, COVID survey) are grouped inside primary menus that make more sense

Solution 3: Preparing Thailand's future health app

Creating the QR-passport for virtual health identification in the future

There was a problem...

Summary: The Ministry of Health changed their minds last minute to keep the old COVID document instead of our new digital design. We convinced them not to.

Our doctor encountered a real-life scenario

As we were finishing up our design, one of the doctors on our team had an issue at the airport where security would only accept the official COVID PDF document.

The ministry then made a decision to change up the design and prioritize the old form and the new digital form equally, like this:

When you click on your COVID pass, you can choose between the old PDF doc or the new digital pass.

But we saw that this decision would lead us back to square one because we would be creating redundancies again.

Users will be confused again which one to use.

How we solved it

We reviewed our design goals with the ministry and convinced them that our original goal was to standardize the COVID pass; therefore, we should push for one solution. Luckily, they agreed 🙂
As designers, we knew that it is difficult to change a learned behavior. We also need support beyond UX design. The Ministry of Health plays a powerful role in Thai health so we collaborated with their service design team, marketing team, etc. to communicate this 'new digital design' to the public.