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
Optimizing User Experience: Cryptocurrency Trading App Design
Optimizing User Experience: Cryptocurrency Trading App Design
Airaa is a cryptocurrency application that incorporates automated trading features or bots. This application enables users to configure profit or purchase amounts according to their preferences automatically.
Airaa is a cryptocurrency application that incorporates automated trading features or bots. This application enables users to configure profit or purchase amounts according to their preferences automatically.
Refining a Design System for ContentGrow
Refining a Design System for ContentGrow
ContentGrow is a provider of freelancers for writers and blog writers, both for companies looking to hire freelancers and for those seeking in-house writers.
ContentGrow is a provider of freelancers for writers and blog writers, both for companies looking to hire freelancers and for those seeking in-house writers.
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.