MTL Fit Redesign

1. Background

Project Overview

This is an ongoing project. The information below was last updated on 23 Oct 23.

About MTL Fit

MTL Fit is a health app owned by Muangthai Life Insurance (MTL), a prominent insurance company in Thailand. It strives to promote a holistic and enjoyable healthy lifestyle, guided by the slogan "being healthy is easy and fun." Its user base includes both the general public and MTL customers. For more about my UX/UI design work at MTL Fit, click here.

2. Process

Understanding the Objectives

We started this project with the goal of redesigning MTL Fit to align with the current vision and business objectives.

MTL Fit's objectives include:

• Addressing various aspects of holistic health, including exercise, nutrition, mental health, and sleep.

• Catering to users at all levels, from beginners to experts in health and wellness.

• Serving a diverse user base in terms of age and gender.

• Offering benefits and rewards to health-conscious individuals, starting with current MTL customers and expanding to non-customers.

• Ensuring the app is fun, engaging, useful, and user-friendly.

Critical metrics for success included new user acquisition, monthly active users (MAUs), star ratings, and the conversion of non-customers into customers.

In this redesign project, I assumed a pivotal role as the Lead UX/UI designer, working closely with the newly hired junior UI designer, the product owner, and the product manager.

Creating the Value Proposition

Together with the product owner and the product manager, we conducted competitive analyses to identify opportunities and threats. We also conducted in-depth interviews with the target user groups to understand their needs, goals, and pain points. This informed the creation of a value proposition that addressed both user and business objectives.

The value proposition include:

• The slogan is "Being healthy is easy and fun."

• For users, MTL Fit is a comprehensive health and wellness application that empowers individuals at all stages of their wellness journey through a community-driven support network. Unlike competitors who rely on rewards, MTL Fit focuses on guiding users on adopting and maintaining a healthy lifestyle.

• For MTL, MTL Fit serves as a channel to bring MTL closer to customers' lives.

Creating the List of Requirements and Prioritization

After establishing the value proposition and obtaining stakeholder approval, I assumed the lead in translating the app's objectives and value propositions into a comprehensive list of features, including their main objectives and key elements, and mapping out the overall app flows. I effectively managed this responsibility due to my year-long immersion in comprehending the app's features, flows, various scenarios, as well as collecting user insights from user interviews and feedback from real usage.

Following this, I collaborated with the product owner and the product manager to prioritize the features. My contribution involved weighing each feature to determine its importance and impact, balancing it against the constraints of limited development resources. This process helped us make informed decisions about which features should be included in Phase 1 and Phase 2.

For Phase 1, we collaborated on creating a realistic timeline for the design and development processes. I also pushed for having clear short-term milestones and improving design sprint management.

The main features for Phase 1 included exercise, nutrition, health data, challenges, and the point system. For Phase 2, we planned to introduce additional key features such as mental health, sleep, events, MTL Fit shop, and more.

Designing the UX of Key Features

I proposed starting with the key features of Phase I to gain a comprehensive overview of the app.

In this stage, I developed mid-fidelity wireflows for each key feature and discussed UX and design decisions with the product owner. My approach incorporated user empathy and past user feedback to anticipate user needs, pain points, and contexts. I also examined competitors and other apps and learned from what worked and what didn't in the current version of MTL Fit.

While designing the UX, I focused on the following areas:

Utility: I ensured that each feature would have all the necessary elements to fulfill its objectives, defining the screens and functionalities and mapping out the user journey. For the existing features that were to be transferred to the redesign, I traced back to understand their intended purposes and verified that improvements wouldn't result in the loss of essential elements.

Usability: My emphasis was on enabling users to achieve their goals easily, efficiently, and swiftly, examining the user journey from the users’ perspective to ensure it was smooth and intuitive. I also addressed the navigation structures for seamless user movement within the app. For the existing features, I identified known issues from user feedback or technical constraints and proposed addressing these issues during the redesign.

Communication: I applied design principles to visually guide users through the features, such as establishing visual hierarchy, using familiar UI patterns, and designating clear primary and secondary calls to action.

UX Writing: I organized all the information that needed to be communicated to users, determined the placement of text, and crafted language that resonated with users.

Handling Various Contexts: In addition to the default screens, I considered all the possible scenarios for each screen, such as loading states and error states, to guarantee a seamless user experience.

Developing a New Design System

Simultaneously, I took the lead and assisted in developing a new UI style and design system.

We established that the new UI style should maintain MTL's brand identity, featuring the signature pink color and the fonts used by MTL across digital platforms. However, we also aimed to break away from the traditional insurance company appearance. When users interact with the app, they should perceive it as a health app designed for everyday use rather than an insurance app. The style should resonate with a broad audience, be suitable for all genders and various age groups, and appeal to both non-customers and existing customers.

The new junior UI designer was primarily responsible for exploring the new style, while I undertook various other aspects of the project, working on the design of the current app version. The other designer had the freedom to explore innovative concepts and think beyond the constraints of the old design system. Meanwhile, I maintained a big-picture view and established the visual design direction. I made decisions regarding the styles for various elements to best serve the app's objectives. Additionally, I communicated with the product owner to discuss the style and defended the design decisions.

Subsequently, the junior UI designer and I adopted the new style for the six key screens, including the home, exercise dashboard, nutrition dashboard, health data dashboard, challenges dashboard, and points dashboard. This step allowed us to envision the new version of the app comprehensively. Creating these key screens as the initial step provided a clearer sense of the new style and facilitated the ongoing development of the design system.

Testing Key Features with Users

I proposed that we should initially test the key screens with users to assess the project's direction and provide guidance for the next steps. This testing encompassed evaluating the redesign concept, UX, navigation, and style.

I created a prototype that linked all six main screens and conducted face-to-face moderated usability tests with six participants, including three males and three females. These participants closely matched the personas of our app users. I assumed the role of the lead interviewer, with the product owner and product manager acting as observers. To begin, I explained our objectives, which were to have users try the prototype as if they were using it in real life and to gather feedback, both positive and negative, to steer the app's future development.

During the user testing of the prototype, I asked participants for their immediate impressions of the screens and encouraged them to express themselves freely without any reservation. I aimed to comprehend their thoughts, preferences, dislikes, and intuitive understandings of the screens without explicit instructions. Subsequently, I asked clarifying questions to delve deeper into their perspectives and feelings about specific elements.

After the completion of the testing, I summarized the research findings and devised recommendations for the next steps. The testing allowed us to gain insights into how users responded to the key screens of the redesign, guiding us on what to do next. It highlighted areas where we excelled and where there was room for improvement, ensuring that we had a clearer direction.

My subsequent steps will involve finalizing the design system and designing each feature to be included in the developers' sprints.

3. Lessons

In this project, my responsibilities significantly expanded compared to my previous roles, which involved introducing new features to an existing app using the existing design system. This project felt more like starting from scratch, requiring comprehensive planning for the entire app, consideration of both short-term and long-term features, and the development of a new design system. With higher expectations from stakeholders, this project presented a greater challenge, leading to substantial professional growth in my capacity as a UX/UI designer.

Several key aspects of my learning experience include:

Business Aspects: I delved much deeper into the business aspects than ever before. Understanding the broader business perspective became crucial, with each design decision needing to align with the business's requirements.

Enhanced UX Skills: My UX skills saw significant improvement as I had to approach every feature holistically. It was essential to not only enhance the existing UX but also ensure that new features and flows delivered an exceptional user experience, even within tight timeframes.

Advanced UI Skills: My UI skills progressed beyond my previous responsibilities, where I primarily utilized the existing design system. I had to explore new styles and identify elements that would seamlessly integrate with the app.

Leadership and Collaboration: Leading a junior UI designer and working more closely with the product owner and product manager played a pivotal role in my learning journey. I strived to streamline the collaborative process, making it more efficient, and ensuring that the process would consistently lead to the end product that satisfies both user and business requirements.

In summary, leading this redesign project provided an exceptional learning opportunity. Such opportunities are rare for designers with only one year of experience, making it incredibly valuable and contributing significantly to my professional growth as a UX/UI designer.