Mordee

Making telehealth services become more accessible.

MorDee

META DATA

Timeline

Mar – DEC 2021
(9 months)

type

Mobile application

CLient

True Digital Group Co., Ltd.

Employer

Boonmee Lab

Tools

Figma
Figjam

Process

User research
UX/UI Design
Usability test
Design system
Branding

Link

Visit website arrow_outward

Background

MorDee is a telehealth service that aims to provide all-in-one healthcare services for Thai patients through a mobile application. Its key features include video call consultations, personal health data management, and an online pharmacy. These services proved especially valuable during the COVID-19 pandemic, when health services became more available and accessible to the general public through online channels.

In 2021, Boonmee Lab was tasked by the client to redesign the application to align better with their current plans. As a lead designer, I worked closely with the client to enhance the user experience in three key areas: appointment booking, privilege discount application, and booking confirmation. The project involved user interviews, designing new user flows, creating high-fidelity user interfaces, and delivering the design handoffs for developers to implement the new design.

Challenge

During the COVID-19 pandemic, many health services shifted to online platforms to maintain their operations and remain accessible to the general public. This resulted in competitive market of the telehealth industry, with an increasing numbers of companies promoting online doctor consultation services. Each application might have slightly different features, but their core values can remain similar.

It was important for a design team to tailor the mobile application experiences that impress users, marketing the app in a way that highlights its unique value propositions and become a preferred choice when dealing with their health concerns. This involves understanding the target market, crafting compelling messaging, and using the intuitive interactions to drive conversions.

my role

Lead UX/UI Designer

Conducted research and interviews with target users to gather and analyze usability feedback, informing the design of product interactions.

Designed user flows and interactions for the application, informed by user research and testing.

Created high-fidelity prototypes adhering to Apple App Store and Google Play Store design guidelines.

Research

During COVID-19, there was an increasing demand of accessible health services especially through online channels. As people were trying to avoid unnecessarily home leaving and getting physical contact.

The telehealth consultation become one of the popular choices during that time, proving convenient for people staying home. Despite these advantages, there were unreliable services and applications that didn't meet public standards. When delivering services through online channels, it is crucial to gain trusts and provide the equal level of experiences to what they can expect in physical services.

I started by examining the motivations and usage patterns of telemedicine app users, focusing on why and how they utilize these services. The research indicated that the primary appeal of teleconsultations lies in their convenience—users are drawn to the ability to quickly access professional medical advice whenever symptoms arise. The existing booking process was already quite user-friendly: users would launch the app, utilize search and filter functions to find preferred doctors, choose a suitable date and time, and then provide a brief description of their symptoms to secure an appointment.

Despite this efficiency, we identified opportunities for enhancement. By streamlining certain aspects of this process and introducing more intuitive navigation features, we could further reduce barriers and improve overall user experience, making it even more seamless and accessible.

Previous version of application

The client was concerned that the previous version of their application was not only visually outdated but also lacked a clear visual hierarchy and a consistent design system, making it difficult for users to navigate and use effectively. These shortcomings did not align with the client’s current strategic direction, which emphasizes user-friendliness, insurance benefits and instant consultations. To tackle these issues, we organized a workshop with the client to dive deep into the existing problems.

Business Strategy

The client aimed to leverage partnerships with insurance providers as a core component of their business strategy to attract users to their online consultation application. By integrating with insurance companies, the app can offer users the ability to easily access services covered under their health plans, reducing expenses and streamlining the payment process.

Moreover, these partnerships can enhance the app's credibility and trustworthiness, as users often feel more confident using health services that are endorsed by their insurance providers. This strategy not only helped in attracting new users but also in retaining them by consistently delivering value through their existing insurance benefits. Therefore, it was crucial for the design team to promote those benefits to be accessible and intuitively used in the application.

Unpacking workshop

This unpacking session was crucial for us to grasp the client's perspective on the current design and to identify specific pain points. Through interactive discussions and hands-on activities, we explored the shortcomings of the old interface and gathered valuable insights on what the users found frustrating or lacking. We placed our design focus in the primary user flow, from app installation and registration to landing on the homepage for the first online doctor consultation.

There were several perspectives we went through, for example, task objectives, data requirements, key barriers, and potential edge cases—presenting them in different colored sticky notes. This helped highlight the key scenarios we needed to improve the experiences.

Additionally we also reviewed competitive analyses that provided us with a clearer picture of where the market stands and what competitors are excelling in or lacking. This analysis was critical in determining the unique value proposition of our product.

From insights to design objectives

This comprehensive approach from the unpacking workshop has set a solid foundation for our next steps in the design process, ensuring that we move forward with a user-centered, data-informed strategy. By synthesizing all these elements, we were able to outline clear, strategic design objectives.

Unclear Visual Hierarchy

The application lacks a clear hierarchy of actions for users. The interface is too plain and doesn't offer sufficient visual cues to encourage user engagement and conversions.

Doctor Availability

The application lacks indicators for doctors currently available online. Appointments appear to be scheduled in advance, which may not meet users' immediate consultation needs.

Unseen Privileges

There is a lack of information to inform users if they can use personal insurance or benefits to discount the appointment fee. This misalignment doesn't support the client's plans to partner with several insurance companies. These partnerships aim to promote convenient health benefits and attract users to the application.

Appointment Reminder

Users often forget their appointment times and are unaware when their consultations are due to begin. The app should provide a dedicated space for users to receive notifications and maintain a record of their consultation history.

Early Design Iterations

After conducting a workshop with the client and interviewing users of various ages, we gained a better understanding of the actions users expect to see and how they make decisions when booking appointments with online doctors.

User flows

We aimed to streamline the booking consultation flow to meet users' needs for different doctor search conditions and offer immediate bookings with available doctors. By reducing unnecessary steps, users can quickly complete their appointment bookings.

For instance, we moved the sign-up and sign-in process to occur after users find their preferred doctor. This change allows users to land on the home page and explore the app's features without any initial barriers.

First iteration

Instead of requiring users to complete the registration process when first opening the application, we proposed leading users directly to the homepage. This allows them to explore the app's features and available benefits immediately. Users can then complete the signup process later, when they're ready to confirm an online consultation.

Available doctors

On the homepage, it's important to guide users to book online consultations in several scenarios. We assumed that most users would either search by their symptoms or browse through doctors available for immediate appointments. This approach caters to users seeking quick medical advice based on their current health concerns. Additionally, I displayed profile images of doctors to build trust and credibility for new users.

Search by symptoms or departments

Users should be able to quickly filter available doctors by symptoms or department. Alternatively, users can search for specific doctors by name if they have a preferred physician in mind.

Booking

After finding the right doctor, users can book an online consultation by selecting an available time slot and preferred consultation channel. It's crucial for users to provide detailed information about their symptoms and their duration, enabling the doctor to use this information during the consultation. At the payment confirmation stage, users have the option to apply insurance benefits or discount coupons before finalizing their payment.

User Testing

We built prototypes and conducted in-depth user testing with 20 online participants across various age ranges to gather feedback on the new user experiences. Overall, the feedback was positive. However, we identified some areas for improvement through observation.

Users found the available benefits from insurance partners too hidden. They were unable to check these benefits until reaching the payment page.

Users wanted to see more available doctors for instant booking. The design of carousels and horizontal scrolling in the instant consultation section were not intuitive enough for exploring the list of doctors.

After searching for doctors by symptoms or departments, users didn’t know if they there were available doctors for immediate booking. They expected a similar experience to the options presented on the home page.

Final UI Design

After analyzing the feedbacks, we did multiple iterations of prototyping to refine and enhance the user experience. We continued this process until we were confident that we had achieved a final design that aligned with stakeholders' expectations.
‍
The client also wanted to rebrand the application from True Health to Mordee, removing the corporate name "True" to make it more appealing to the general public. The new palettes were then introduced, transitioning from red tones to teal palettes to make it suit better for healthcare industry.

We significantly improved UI for home page and user flows in appointment booking, introducing new pop-up interaction to let users quickly check availability and make a confirmation within a few steps. The design was proved to enhance navigation and increased conversion rates.

86%

of users prefer an instant consultation with available online doctors rather than waiting for scheduled appointments.

64%

of users reported starting their doctor search based on their current health concerns or symptoms, while the remaining 37% began by browsing health departments to find available doctors.

70%

of users didn't have a specific doctor in mind before making appointments. They typically scanned doctors' biographies and made decisions based on the availability, number of cases treated, and price, in that order.

Instant Consultation

I have designed a pop-up overlay interface that appears when users tap on the list of doctors on the home page, allowing users to quickly check if they have any available benefits that can be applied to their consultation with the selected doctor. Privilege discounts are prominently displayed within the modal.

Additionally, partner insurance companies can promote their brands and privileges through this feature, creating added value for both users and partners.

Schedule Consultation

Users can switch tabs between immediate and scheduled booking modes. In the "Available Now" tab, users can book instant consultations. While, the "Schedule" tab displays the soonest available appointments where users explore additional dates and time for their schedule.

Tag filters

Users can quickly filter the list of doctors by selecting popular symptom tags located beneath the search box on the home page. I designed a small tag component to conserve vertical space, ensuring more room to display the doctor listings.

Once a filter is selected, it is applied to the search results page. The layout remains consistent, allowing users to seamlessly switch between browsing doctors for immediate or scheduled appointments.

Booking Confirmation

We enhanced the booking flow by making the UX writing more user-friendly, adopting a conversational tone instead of an action-oriented one. Users can now describe their health concerns and symptom duration to the doctor. On the payment page, they have the option to select or change their preferred privileges for the booking. Upon completing the payment, users receive a booking confirmation.

Consultation reminder

Ten minutes before the consultation, the system reminds users through both operating system and in-app notifications. These notifications appear at the top of the screen, ensuring users don't miss their appointment. When users enter the consultation room, they are directed to a virtual waiting area until the doctor joins. Once the doctor enters the call, users can join and begin their consultation via audio or video.