MTL Fit

1. Background

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.

MTL Fit marked my professional entry into the field of UX/UI design, where I took on the responsibility of being the sole UX/UI designer on the team. My responsibilities encompassed designing new features and enhancing existing ones, all within the framework of agile development sprints.

Key highlights of my work from the past year include:

• Introduction of the nutrition feature

• Introduction of the team challenge feature

• Introduction of the photo download feature

• Enhancement of the dynamic pricing feature

• Continuous improvements to various other features

2. Process

Understanding Objectives and Relevant Factors

Before embarking on the design of any feature, it was imperative for me to grasp several critical aspects:

Business Perspective: I focused on deciphering how the feature I'd be designing aligned with the business objectives. Examples of business objectives included aiming for a more holistic health experience, enhancing overall functionality, and integrating new technologies. They also involved quantifiable measures such as increasing new users, growing monthly active users, and improving app ratings.

User-Centric Approach: I delved into understanding how the feature would cater to the needs, goals, and pain points of different user groups, including individuals who are starting their health and wellness journey and those who are looking to optimize their well-being. I strived to identify what could make the user's journey in health and fitness more enjoyable and engaging. I played a pivotal role as the voice of the user within the team and employed user stories to align team perspectives with user needs.

Technical Considerations: It was essential to envision how the feature would be technically implemented, considering the efforts required from our development team. Identifying technical opportunities and limitations was crucial for seamless integration.

Legal Aspects: Some features involved legal issues, including data privacy and consent considerations. It was crucial to ensure that my design approach addressed these concerns comprehensively.

Project Timeline: Understanding the project's timeline was essential, including the level of urgency and the effort required for design. In some cases, I had to opt for minimum viable products to provide quick proof of concept.

Once all aspects were thoroughly discussed and concluded, I proceeded with the UX design process with clear objectives and relevant considerations in mind.

Designing a Useful, User-Friendly, and Engaging App

I embarked on developing user flows and low-to-mid fidelity wireframes, combining them into comprehensive wireflows. At this phase, I worked on the following areas:

Utility: I ensured that each feature would have every element necessary to meet its objectives. This involved defining all the screens and their functionalities, as well as mapping out the user journey.

Usability: I focused on enabling users to achieve their goals easily, efficiently, and swiftly. I examined the user journey from the user's perspective, making it as smooth and intuitive as possible.

Various Contexts: Beyond the default screens, I considered all the other possible scenarios of each screen, such as loading states and error states, to ensure a seamless user experience.

Communication: I employed design principles to visually guide users through the feature, 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. For the English version of the app, I also translated the texts into English with the assistance of Chat GPT and Grammarly.

My approach incorporated user empathy to anticipate user needs, pain points, and contexts, as well as past feedback from real users. I also drew inspiration from other apps and existing UI patterns to enhance my designs. Throughout the design process, any questions or concerns I had were further discussed with relevant stakeholders, colleagues, and third parties.

Then, I proposed the wireflows to the product manager and explained my design decisions thoroughly. When they were approved, I transitioned to the visual design and mockup phase:

Visual design and Mockups: I aimed for pixel-perfect designs, adhering to the rule of 8 and maintaining consistent spacing. The mood and tone of the designs were aligned with the existing design system, with the introduction of new elements as necessary to meet the feature's objectives. Illustrations were integrated to add an element of fun to the app. Throughout this phase, I continued to seek feedback from others and seek examples to enhance the visual designs further.

Testing with Users

Once the mockups were ready, I conducted moderated remote usability tests. This approach ensured that the designs were not solely based on assumptions but were validated through real user feedback. The insights gained from usability testing were invaluable and guided continuous design improvements.

During usability testing, I typically began by asking users for their initial impressions of the screens. I wanted to understand what users thought about each screen and what they believed they could do without any explicit instruction.

Subsequently, I provided task-specific instructions, simulating scenarios and asking users to perform tasks related to the feature. This allowed me to observe how users interacted with the app in a more focused manner.

In some cases, I exposed users to different states of the same screen to assess their comprehension of variations between states.

With budget constraints limiting the frequency of user testing, I chose to test when the feature mockup was relatively complete. While one downside was the occasional need to revisit aspects of the UX (which could be addressed more quickly if testing occurred earlier, before reaching a fully polished version), the advantage was that it allowed users to experience the app as realistically as possible, providing insights that closely resembled how they would interact with the actual application.

After the testing sessions were finished, I summarized the findings and iterated the designs. The iterative process allowed for a more refined solution, ensuring the feature met users' functional and emotional needs.

Assisting the Development Phase

After addressing user feedback and finalizing the design, I prepared for the development hand-off by creating comprehensive wireflows that detailed all aspects of the feature.

I walked the product manager through the entire flow and helped assess the effort required for development. During sprint grooming sessions, which occurred every two weeks, I presented the wireflows to the team.

Subsequently, I maintained open communication with the development team throughout the development process, addressing implementation issues and ensuring a seamless integration of designs.

3. Lessons

I feel privileged that for my first job as a UX/UI designer, I had the opportunity to work as the sole in-house designer for the team in an agile environment. This experience has been invaluable in honing both technical and soft skills for the entire app design and development process.

One of the valuable lessons I gained from this experience was actively defining feature objectives and shaping user-centric directions from the outset. For me, It was never just about receiving feature requirements from stakeholders. Additionally, this design journey significantly bolstered my knowledge and skills across various aspects of UX/UI design. In areas where I already had a foundation, such as UX and usability testing stemming from my psychology background, I had the opportunity to further refine my skills. I encountered diverse user needs, contexts, and scenarios, enhancing my ability to meet user goals comprehensively.

On the other hand, in areas where I had less prior experience, like UI design and UX writing, my abilities and confidence grew substantially. Lastly, being the sole UX/UI designer in an agile team provided plenty of opportunities for me to learn to work more collaboratively and efficiently with professionals from different domains—a valuable lesson that may not have been as accessible in a larger company with a sizable UX/UI team. I also learned to better articulate my design decisions and engage in constructive discussions.

As for what I hope to do more in the future, I would like to incorporate quantitative data collection and analysis related to user behavior into the design process. The lack of this prevents us from taking advantage of learning from real user interactions. Adding this step should immensely help in making more informed design changes that enhance the product's usability and effectiveness.

While my experience at MTL Fit has been fulfilling, I look forward to exploring new challenges and further developing myself as a UX/UI designer.