UI/UX (Case Study): My Healthy — Health Mobile Application From Farmagym

Hi, my name is Andre Setyo Nugroho, a beginner UI/UX Designer. In this project, I collaborated with the Ministry of Education and Culture of the Directorate General of Higher Education together in the Merdeka Belajar Kampus Merdeka (MBKM) program, one of which is an independent study, this independent study activity is an academic activity that can be a choice for students to convert 20 credits of courses. For 2022, I am collaborating on an independent basis with Alterra Academy partners. In this project I got the task to make a health application from PT Farmagym.

The Challenge

PT Farmagym Sehat Sekali is a company engaged in fitness related to obesity, weight loss, and maintaining stamina. These products are the source of income for now:

  1. Organic foods and drinks that can lose weight by controlling the nutritional value according to the needs of consumers, and
  2. Providing a place for consumers to use fitness equipment whose use is separate between men and women,

Recently, the business development team wanted to expand the market by holding a Farmagym Tech program that offers attractive promo promos. with unhealthy lifestyles such as staying up late, lack of sleep, eating junk food and etc.
The company hopes to help them achieve their big dreams by starting a healthy lifestyle such as exercising, fitness and eating healthy foods, which of course the company will facilitate

I. Overview

My Healthy is a health-based application that offers several features such as sports, selling organic food and some very helpful articles in the form of tips for users in realizing a healthy lifestyle. With this application product, it is hoped that it can help the community, especially students, in managing their healthy lifestyle time. Of course, with this application, PT Farmagym’s hopes can also be realized in improving the quality of their company’s products

  • Timeline: August— October 2022
  • Clients: PT Farmagym Tech
  • Tools: Figma, Zoom, Maze
  • Role: UI/UX Designer
  • Summary: This project is one of the projects I worked on in 2022 in order to participate in the Certified Independent Study and Internship Program (MSIB) as a UI/UX Designer with the Alterra Academy partners.

II. Goals

For product improvement in PT Farmagym Tech, application design is very much needed before going to the developing apps stage. With the application, it will make it easier for consumers to be able to enjoy all the facilities offered by PT Farmagym

III. Methodology

In making the prototype design of the My Healthy application, I used the Design Thinking method to approach problems and solve the ideas collected based on empathy for human-centered problems, so that I could meet the needs of my users and find the ideal solution.

IV. Research Result

4.1 Empathize

Empathy is the first step in design thinking because it is a skill that allows us to understand and share the same emotions with others. Through empathy, we can put ourselves in the other person's shoes and understand how they feel about their problem, situation, or situation. (Edutopia,2015)

At this empathize stage I try to understand my users in determining their problems, their point of view, their needs and everything related between the user and the My Healthy health application. By placing me as a user I understand their lives and open a new perspective on health app insights

I made a chart to understand the core of the problem and determine the initialization of the initial solution to solve the problem, don’t forget to identify users at an early stage so that I can narrow my users,

This identification makes it easier for me to understand user problems in the early stages of the PT Farmagym Tech study case.

4.2 Define

After I understand and analyze some of the user’s needs and problems, the next step is to analyze and understand the results obtained in the previous stage and decide what is needed by the user which can then be concluded into a specific solution.

Before going further, I try to define what users feel and want when they want to have a healthy lifestyle on an empathy map, the results can be known through the user persona that I created.

This persona serves to represent the characteristics and behavior of the target user

By making this user persona, it is easier for me to identify several users who are used as a core problem and the solution to be achieved so that it can be concluded into the specific problems experienced by users in various aspects.

4.3 Ideate

In this ideate stage, I collect various solutions that can solve the problems that existed in the previous stage and by using brainstorming I concentrate on ideas to produce a basis for ideas to make an innovative design prototype that will be made.

— Solution

I used the research interviewing method for several student respondents and grouped them using affinity diagrams, I used 2 groupings, there are Frustation and Ideal Product.

After grouping the ideas based on user frustration, I made a prioritization of ideas to make it easier for me to group the design ideas which will proceed to the prototyping stage. I group them into 2 categories: priority and feasibility so that I can know the most important needs and desires of my users.

4.4 Prototype

The first step for prototyping , I approached several category features that would make it easier for me to make applications and make it easier for users to complete their goals and meet their needs, by focusing on goals, it would make it easier to design prototypes to solve problems, therefore I created a User Flow and Task Flow

With user flow and task flow, my goal of making prototypes is more focused and can focus more on user needs

Wireframe (Low Fidelity Design and Prototype)

To make it easier to make the application design look high fidelity and simplify the layout process before entering the high fidelity stage, I tried to create several wireframes so that I could focus more on the content and information structure that I will display in my application design.

From the wireframe, I tried to describe the user flow that I created earlier into my application wireflow so that the flow of the user journey with my application can be seen in the early stages of the prototype.

Style Guide

After all sorts of wireframing I created my style guide, which is useful for developing the user interface of my application, the style guide I created includes:
1. Colors
2. Typography
3. Buttons
4. Text Fields
5. Icon
6. Dropdown
7. Checkbox
8. Radio Button
9. Navbar
and others

— User Interface

My application product is called My Healthy, which means that my health has a meaning to maintain a healthy lifestyle for your own health. This application is intended for the entire community, especially students who do not have time to regulate their healthy lifestyle such as exercising or maintaining a healthy diet. With this application is expected to help students in maintaining a healthy lifestyle.

High Fidelity Prototype

V. Testing

For the testing stage, I conducted interviews with several respondents, with the background of a student who has or is not related to a healthy lifestyle problem. I asked some questions about health and gave my users/respondents the opportunity to try out the prototype that I had made for the My Healthy application

In testing the prototype on my application design, I gave 7 usability tasks to the user, so that the user when trying the prototype could be more focused. Some of the tasks that I propose include registering a new account, logging in with a new account, checkout organic food, inputting physical data, doing independent exercise, reading articles and entering food into charts. Some of the results of usability testing are as follows:

In addition, I further identified the usability bag that I gave earlier with indicator 1 being successful and 0 being failure.

In this research, several difficulties and conveniences were made in using the My Healthy application design. Some of the difficulties experienced are when the user does independent exercise and is confused about completing the page because the finish button on the page is very small and not notified. For others from the majority scale, they have met the criteria because the average of each usability task given gives good results, which is close to 1 or perfect/successful.

VI. Conclusion

In this application design iteration, I do it in stages according to what the user complains about the most and I have been going to redesign both from the user interface and from the prototype side I will change it according to user needs. My main focus in conducting this research is to provide users with a good, simple and attractive system and flow so that users can focus more on their healthy lifestyle.

VII. Recomendation

As the results of research on the product design of this application, users have confusion about the physical data entry feature where this is usually done by users on the profile page. Then the button at the finish workout can be raised so that it is notified that it is a button and not ordinary information. In addition, users suggest that there should be a tutorial (modal) first for each page/task so that ordinary users can know the functions of each button or text.

Read the full article here

Leave a Reply

Your email address will not be published.

Voice Summit 2022 Interviews Part 2 with Skilled Creative, Women In Voice, 169 Labs, VUX World, Veritone, and Attention Live – Voicebot Podcast Ep 279

Voice Summit 2022 Interviews Part 2 with Skilled Creative, Women In Voice, 169 Labs, VUX World, Veritone, and Attention Live – Voicebot Podcast Ep 279

Bret is founder, CEO, and research director of Voicebot

Travelling safely in Chicago on public transportation— UX Research Study

Travelling safely in Chicago on public transportation— UX Research Study

Table of Contents Hide Inquiry planGoogle Form Survey (Prior to Long-Form

You May Also Like