A UX Success Story: Refining the Diet Calculator Function in OnlyGym App

A UX Success Story: Refining the Diet Calculator Function in OnlyGym App

Monday, September 4, 2023

Monday, September 4, 2023

Overview

Overview

Overview

The Diet Calculator is one of the features within the OnlyGym member application. This feature determines dietary needs based on user-provided information and their dietary goals.

The Diet Calculator is one of the features within the OnlyGym member application. This feature determines dietary needs based on user-provided information and their dietary goals.

The Diet Calculator is one of the features within the OnlyGym member application. This feature determines dietary needs based on user-provided information and their dietary goals.

Problem Statement

Problem Statement

Problem Statement

Due to the lack of user experience with the diet calculator feature on the website, the stakeholders decided to enhance the mobile experience to minimize issues related to usability and information. Here are the problem findings we identified:


  • User confusion was caused by the information that needed to be filled out, as selecting 'Simple' or 'Detail' mode was not clearly highlighted.


  • Accessibility challenges due to small text size.


  • Usability difficulties that users encountered.

Due to the lack of user experience with the diet calculator feature on the website, the stakeholders decided to enhance the mobile experience to minimize issues related to usability and information. Here are the problem findings we identified:


  • User confusion was caused by the information that needed to be filled out, as selecting 'Simple' or 'Detail' mode was not clearly highlighted.


  • Accessibility challenges due to small text size.


  • Usability difficulties that users encountered.

Due to the lack of user experience with the diet calculator feature on the website, the stakeholders decided to enhance the mobile experience to minimize issues related to usability and information. Here are the problem findings we identified:


  • User confusion was caused by the information that needed to be filled out, as selecting 'Simple' or 'Detail' mode was not clearly highlighted.


  • Accessibility challenges due to small text size.


  • Usability difficulties that users encountered.

User Flow

User Flow

User Flow

To enhance the user experience, I attempted to simplify the previous user flow into a more efficient one for users.

To enhance the user experience, I attempted to simplify the previous user flow into a more efficient one for users.

To enhance the user experience, I attempted to simplify the previous user flow into a more efficient one for users.

Design

Design

Design

I explored possibilities for a more efficient and user-friendly design in the design phase.

I explored possibilities for a more efficient and user-friendly design in the design phase.

I explored possibilities for a more efficient and user-friendly design in the design phase.

Users can access the 'Diet Calculator' feature through the home page via the left-side menu, in alignment with the stakeholder's feature priority.

Users can access the 'Diet Calculator' feature through the home page via the left-side menu, in alignment with the stakeholder's feature priority.

Users can access the 'Diet Calculator' feature through the home page via the left-side menu, in alignment with the stakeholder's feature priority.

Easy access to “Diet Calculator”

Easy access to “Diet Calculator”

Easy access to “Diet Calculator”

Others information what users need

Others information what users need

Others information what users need

Version 1

Version 1

Version 1

I created a layout structure similar to that of the website version. This choice was made because of its simple design, displaying all the necessary information for the users.

I created a layout structure similar to that of the website version. This choice was made because of its simple design, displaying all the necessary information for the users.

I created a layout structure similar to that of the website version. This choice was made because of its simple design, displaying all the necessary information for the users.

Pros

Pros

Pros

  • Simple and easily comprehensible structure.

  • Users can easily navigate to other information.

  • Minimizes page switching.

  • Simple and easily comprehensible structure.

  • Users can easily navigate to other information.

  • Minimizes page switching.

  • Simple and easily comprehensible structure.

  • Users can easily navigate to other information.

  • Minimizes page switching.

Cons

Cons

Cons

  • Design that may appear monotonous to users.

  • Lack of explanations for each information choice.

  • Design that may appear monotonous to users.

  • Lack of explanations for each information choice.

  • Design that may appear monotonous to users.

  • Lack of explanations for each information choice.

Version 2

Version 2

Version 2

In the second exploration, I tried to explore various component structures to avoid rigidity or monotony, with the aim of ensuring user comfort and efficiency in terms of their experience.

In the second exploration, I tried to explore various component structures to avoid rigidity or monotony, with the aim of ensuring user comfort and efficiency in terms of their experience.

In the second exploration, I tried to explore various component structures to avoid rigidity or monotony, with the aim of ensuring user comfort and efficiency in terms of their experience.

Pros

Pros

Pros

  • Detailed information presentation.

  • Ease and efficiency in selecting various information.

  • A comprehensible information layout on the 'Result' page.

  • Detailed information presentation.

  • Ease and efficiency in selecting various information.

  • A comprehensible information layout on the 'Result' page.

  • Detailed information presentation.

  • Ease and efficiency in selecting various information.

  • A comprehensible information layout on the 'Result' page.

Cons

Cons

Cons

  • Requires and additional click for the "Details" mode.

  • Lack of exploration for the "Details" mode.

  • Requires and additional click for the "Details" mode.

  • Lack of exploration for the "Details" mode.

  • Requires and additional click for the "Details" mode.

  • Lack of exploration for the "Details" mode.

Version 3

Version 3

Version 3

I aimed to analyze client feedback and user efficiency in using the 'Diet Calculator' feature. Finally, based on the 'cons' from the previous explorations, I added a page for selecting the calculator mode.

I aimed to analyze client feedback and user efficiency in using the 'Diet Calculator' feature. Finally, based on the 'cons' from the previous explorations, I added a page for selecting the calculator mode.

I aimed to analyze client feedback and user efficiency in using the 'Diet Calculator' feature. Finally, based on the 'cons' from the previous explorations, I added a page for selecting the calculator mode.

Pros

Pros

Pros

  • Clear presentation of information for each "Simple" and "Details" mode.

  • Distinct pages for each calculator mode.

  • Visual cues to differentiate mode pages or calculator pages.

  • Clear presentation of information for each "Simple" and "Details" mode.

  • Distinct pages for each calculator mode.

  • Visual cues to differentiate mode pages or calculator pages.

  • Clear presentation of information for each "Simple" and "Details" mode.

  • Distinct pages for each calculator mode.

  • Visual cues to differentiate mode pages or calculator pages.

Cons

Cons

Cons

  • Too many different pages for each mode.

  • Too many different pages for each mode.

  • Too many different pages for each mode.

Final Design

Final Design

Final Design

Here is the final design result after going through several explorations.

Here is the final design result after going through several explorations.

Here is the final design result after going through several explorations.

Last

Last

Last

Development

Development

Development

The stakeholders or clients decided to utilize Flutter as the framework for developing the OnlyGym application. Therefore, I had to ensure that the style guide and components were ready for use within this framework.

The stakeholders or clients decided to utilize Flutter as the framework for developing the OnlyGym application. Therefore, I had to ensure that the style guide and components were ready for use within this framework.

The stakeholders or clients decided to utilize Flutter as the framework for developing the OnlyGym application. Therefore, I had to ensure that the style guide and components were ready for use within this framework.

My Learnings

My Learnings

My Learnings

The development of the 'Diet Calculator' feature in the OnlyGym application provided numerous lessons. It was a collaborative project with the client to create a user-friendly design aligned with user needs. The small details and improvements made to this feature served as the success of the project and its ease of use by users.

The development of the 'Diet Calculator' feature in the OnlyGym application provided numerous lessons. It was a collaborative project with the client to create a user-friendly design aligned with user needs. The small details and improvements made to this feature served as the success of the project and its ease of use by users.

The development of the 'Diet Calculator' feature in the OnlyGym application provided numerous lessons. It was a collaborative project with the client to create a user-friendly design aligned with user needs. The small details and improvements made to this feature served as the success of the project and its ease of use by users.

Other Projects

Other Projects

Other Projects

Creating a Clean and Clear Experience for Gym Member Management

Creating a Clean and Clear Experience for Gym Member Management

OnlyGym is a Software as a Service (SaaS) website that provides gym necessities and member data management for gym owners.

OnlyGym is a Software as a Service (SaaS) website that provides gym necessities and member data management for gym owners.

Optimizing Catholic Content: A UI/UX Case Study for Articles and Prayers on a Faith-Based Website

Optimizing Catholic Content: A UI/UX Case Study for Articles and Prayers on a Faith-Based Website

BPN PKKI is committed to providing learning resources and a spiritual sanctuary for the Catholic faithful, allowing them to enhance their understanding of divinity and strengthen their faith through contemplation, prayer, and online article readings at a distance.

BPN PKKI is committed to providing learning resources and a spiritual sanctuary for the Catholic faithful, allowing them to enhance their understanding of divinity and strengthen their faith through contemplation, prayer, and online article readings at a distance.