Goodoc

Healthcare Platform For Using Medical Services in Korea

Role

Mobile APP UX/UI Redesign
Data-driven UX Improvement
UI micro interaction (animation)
Web landing page design

Team

Product Design Team, UX Improvement Squad

Tools used

Sketch, Zeplin, Adobe Illustrator, Tableau

#01
MOBILE APP UX/UI REDESIGN

Background

Goodoc was attempting to create new features within the app that would enable users to book appointments with doctors. Through this update for the new version, Goodoc expected not only to enhance the app's functionality but also to improve the overall user experience by means of a redesigned UX/UI concept. As I joined the team midway through the process, I collaborated with various stakeholders and brainstormed solutions using insights from earlier user research.

Goal of this project

→ How might we enhance the patient experience with medical services by providing easier and more convenient access to healthcare?

Background

Telemedicine is currently not allowed in South Korea

As of now, telemedicine is not allowed legally in South Korea, which means patients should visit the clinic if they want to see a doctor.

Hospitals are too chaotic with crowded patients

When the clinics are too crowded, patients have to wait for a long time to see a doctor.

Approach

The ultimate goal of our product was to ensure that all of the check-in procedures could be completed in our app while improving patient flow. Therefore, we redesigned our app for users to move through many tedious aspects of the process—from searching for hospitals to booking—more comfortably.

THE GENERAL JOURNEY OF USING A CLINIC

● : Current offering features by Goodoc
‍● : New opportunities

Pain points

Lack of valuable information about the clinics

"I'd like to learn if this clinic has a good reputation. Especially, when I search for clinics for cosmetic procedures."

Inconvenient process of booking appointments

"I always have to make an appointment for my young son by calling the hospital and giving all the information"

Waiting for their turn without knowing how long it will take

"I wait a long time at the clinic, even though I've booked, without knowing how long it would take, feeling like a waste of time."

AS IS - TO BE

In addition to searching for information about hospitals and the price of procedures in the app’s previous version, several new features for booking a clinic / hospital were needed in the newer version.

Design Concept

Intuitive,

Reliable,

Simple

In-house Testing

Testing with the first version of Home screen

Our team conducted an in-house user test with the first version and got some feedback from other teams' coworkers. Based on the feedback, we could develop our concept and UI design.

Feedbacks

"The wording of the status card is not intuitive or clear for users to understand."

At first, we categorized behaviors for going to the hospital using two different terms: “Reception” (for users going to go to the hospital immediately or within a few hours) and “Booking an Appointment” (for users who want to go to the hospital on a future or specific date). However, these concepts and our phrasing were not intuitive for users since most do not understand the distinction between the two terms.

"The banner at the top prevents main information such as booking status from being emphasized."

We received feedback that the banner looked more appropriate for a commercial platform rather than our healthcare-driven platform. It also visually collided with a booking card at the center.

Empathy Map

After interviews, we created empathy maps to understand

Final Result

Home

The user can see details about their appointment on the home screen. When the user arrives at the hospital and waits for their turn, they will be updated in real-time on their remaining wait time and their order in the queue.

Search

We separated hospitals into two types: standard medical and cosmetic medical hospitals. This is because most users’ purposes in our app are also divided into those two purposes.

Booking an appointment

Users can book an appointment with a hospital for their family members. This allows family caregivers of young children or older parents to make an appointment with doctors on the patient’s behalf.

#02
ux improvement

Approach

We focused on the fact that many users were not logging in to our app.
To solve this problem, we analyzed user behavior data with Tableau.

Goal

How might we increase the login rate of the app?

Define the problems

1. Not user-centered UI

The login UI design failed to consider the fact that users usually log in using their social media accounts. On the login screen, the input lines were placed in a more prominent position than the social media login buttons.

2. Unclear Sign-up Process

‍We also found that the sign-up process was unclear, so some users gave up before completing registration.

Insights

Signing in with a social media account

According to the user behavior data via Tableau, we could find out that most our users who logged in to our app use their social media accounts, especially Kakaotalk. However, the current UI does not reflect this information on the login page, as it places emphasis on the 'email inputs' by positioning them in the center of the page.

Using the 'Thumb-zone' to place buttons

I made the decision to remove the email input section from the center and instead placed the social login buttons within the thumb zone because I believed this change will enable users to easily access and tap on the buttons, resulting in an enhanced user experience.

*Image Source: Luke W — Designing for Large Screen Phones

Resolution

Before

After

Click to enlarge the image

Extending Result

A 14% Increase in Login Rate and Applications to Business

Simply by improving UX, we achieved an increase in both login and sign-up rates.
In addition, this brought about a substantial increase in the number of users logging in with Kakao accounts. Thus, the marketing team took advantage of the increased users, employing marketing strategies that leveraged KakaoTalk Channel, which consequently increased sales as well.

Overall increase in signup rate

Increase in KakaoTalk account login rate

Click to enlarge the image

#03
UI INTERACTION

I designed animation on some UI elements for a better user experience. I crafted them by using After Effect and exported them to Lottie format to make it easier to cooperate with developers.

Animation for the status card on Home screen

Other UI

Toggle button

Loading UI

CTA button in the tablet

#04
WEB LANDING PAGE DESIGN & TABLET INTERFACE

In addition to my work on mobile applications, I also contributed to the redesign of various devices, including web and tablets. Specifically, I took charge of designing a landing page to introduce Goodoc, which involved creating a series of illustration elements to visually highlight the key features and benefits of the service.

TAKEAWAYS

How to collaborate with diverse teams

While working with different teams, including developers, marketers, and data analysts, I learned how to design a viable product in the real world by considering diverse perspectives. Especially, I could understand the end-to-end process to turn my design into the real world by communicating with developers.

Understanding of Data-driven Design

Through this work experience, I realized that data-driven design is crucial for gaining insights from users. Based on the data, we could find out what issues exist in UX or even the business side and the reasons. After coming up with solutions, we could verify whether the design solution works well for users by iterating. Also, I learned it was helpful when it came to decision-making in situations with different stakeholders.

< prev
NEXT >
NAYEON KIM
resumeemaillinkedin