Diag app design - Case study

Background story:

Diag is one of the biggest and longest runners in the laboratory test industry. They have been running the business for almost 25 years and being a big name in Viet Nam market. Until 2020, Diag is bought by an US Fund and they decided to inject more innovation of the technology into the business, one of the steps to digitalize, is to build an ecosystem of software that can replace the paper workflow that is very popular in Viet Nam and Diag.

The Project:

The project internal code is REFDOC app, which stands for Referral Doctor’s Application. It’s named Diag Pro on the Appstore and Playstore. The goal of the project is to give the doctor the ability to order Diag’s test easily with their mobile phone, and also have a completely new way to check for the result as soon as the result is ready (which in the old workflow, the patient get the result and bring to doctors, cost about one day or longer). For Diag, the application is created so that they can get more order from the doctors, also a transparent way to keep track of doctors order and commission payments.

My role:

Joining this project at the start, when it is just an idea, my role is a Product Designer.

What I was working on:

At first, I have limited knowledge about the workflow of a doctor, and so as the team, we are all technology guys and haven’t worked as a doctor before. The first challenge I need to overcame at that time is to research on how doctors are working. The goal for the research is to know the workflow of doctors when they do the checkup at their private clinic, then the insight will help us on how we can create an application that would be a handy tool for them.

First I tried to contact my friends who are doctors, I got much information and built a flow that I can test with them. The feedbacks was pretty well and my friends try to show me more insight. But the fact is that my friends are just junior doctors, so they didn’t have a private clinic, which is our main target users. That’s why I and my product manager talked with the customer service team to book some appointment with our current referral doctors to discover more about how doctors are working. I learnt alot after those sessions.

Some first experiments on how I imagine an app for showing test result should be

Back to the work, with much more insights, I completed the wireframe and built a prototype with Figma that I can transfer it to the phone and test with users. I tried to send them to our referral doctors to get feedbacks, and then continously improve the wireframe. Not only on the doctor’s side but also the lab’s side. There are laboratory rules because every result will directly affect patient’s health, so we need to be very careful, so, as a product designer, I need to try the way to combine the strict rules with my most basic rule: create handy tools that works.

Early stage of the UX design, I tried to apply colors at very soon design phase, because status is on of the most important criteria in lab test, and I need to try the way to display them for doctors to see at first sight.

After tested the workflow and the result showed that it works. I started to create the UI, tested many designs exploration to wrap up into a small piece of principal for this application:

Color choosing was the important part, too. Not only we have the need to bring doctors the way to see every patient’s status in the most convenient way, we also need to represent the brand, because our main business is Diag, it’s a testing lab.

So color choosing is one of the part I spent most time on, with many experiments, also color blind experiments.

The blue is Diag’s brand color, the combination should praise the brand yet showing statuses in good way
Many versions of layout and colors have been tested before coming to the final version

UI and UX design is the key successfull stat of this application, because our competitors Jiohealth and HelloBacsi have a big and strong design team also, so as a only product designer of this project, I need to work much more to bring either good UX and UI to our users. Of course, the principal: Handy work tools for doctors.

Options for home page

Much more option until the final

The first design MVP completed after 3 months of hard working.

In the very first phase of the project, I work mostly with the Product Manager and CEO, then after that, developers joined in the team and my task now also work closely with the developers to ensure my design will be implemented correctly. At this phase, I learnt a lot from our mobile developers, because design is design, implementing is a different story, and I need to update/change my design and also the flow to fit with the techonolgy we had at that time.

I was a developer before, so learning how the code works is always fun.

The Application is released after 1 year. The number of ordered test gained by 20% compared to the time period of last year.

Key personal achievements in this project:

This project is the first time I work on a project at the very start, with no fellow designer. The team was just 2 members at the beginning, so the workload was quite heavy, but I overcame all of  them and reliase that I can singlely handle a project as the only product designer in the team.

It was also so much fun and discoveries when I have a chance to work in the completely new industry, the learning curve and the way I empathy with user is one of the most important ability that I gained after this project. Later time in the team, I also handle 2 more design project, and the planning skill of mine got into a next level. I rarely miss the deadline although working with 3 dev teams at one time.

Thank you for reading this case study.