Duration: Sept 2022 - Nov 2022
Role: UI Design
Tools: Figma, Lucidchart
The Problem
Users require an application that motivates them to engage in physical activity using minimal equipment, provides quick and healthy meal recipes, and allows customization of workout routines according to their unique needs. The success of the application can be determined by observing its integration into users' daily routines.
The Solution
GetFit introduces users to various kinds of workouts and recipes that can be accustomed easily to suit the user's goals.
A diverse set of the exercise list
The detailed recipe with information on calorie intake
Customize workouts with a click of a button
User Persona
“I love the thought of having something that could really work with my schedule. Being as busy as I am makes it tough to exercise otherwise.”
Name: Rebecca
Age: 26 Years
Gender: Female
Education: Master’s in Software Development
Marital Status: In a relationship
User Goals:
-
Rebecca wants to lose weight and get in shape, as her sedentary job doesn’t allow a lot of time for exercising.
-
To help with this goal, Rebecca wants to find a tool that will help her fit exercise routines into her busy schedule.
-
As a beginner at working out, Rebecca also wants something that will help her learn how to properly exercise.
-
As a new person in the fitness world, she wants to try some easy recipes that she can include in her diet.
-
Rebecca wants to keep herself updated about fitness through blogs.
Environment:
-
Physical: Rebecca lives in an apartment with her boyfriend and 3-year-old daughter.
-
Social: She has several friends from her software development job, and one of them recommended this tool as something she should check out to help her reach her goals.
-
Technological: Rebecca is very tech savvy, as she works on computers every day.
User Flows
I designed the user flows with the goal of accommodating different user tasks and making it easy to navigate the app.
The three important user tasks are:
-
Engage in physical activity using minimal equipment
-
Access quick and healthy meal recipes
-
Customize workout routines according to their unique needs
.png)
Early Sketches and Wireframes
The app ideas were sketched to create an efficient sign-up process and easy access to exercises. Users can choose workouts based on preferences, and the app features a graphical data representation for easy understanding.
When developing mid-fidelity wireframes, I carefully considered essential aspects such as content placement, eliminating unnecessary elements, and emphasizing different interactions between the screens.
Visual Design
Moodboard
The subsequent stage involved infusing visual elements into the application. To do so, I created a moodboard that exudes an energetic and vibrant vibe, with bright orange serving as the dominant hue. Choosing orange as the primary color for the UI was a strategic decision, as it embodies the essence of health, wellness, and fitness, the core focus of the GetFit app. The vibrant hue of orange is highly noticeable and effectively draws users' attention to crucial elements, such as action prompts or crucial information. Moreover, its versatility allows it to complement a wide array of other colors, making it a versatile choice for the color scheme of the application.
Style Guide
The GetFit Style Guide includes the logo design, typography, and color palette that adhere to the material design guidelines. It also features icons created with figma, specific UI elements, vibrant images, and illustrations, as showcased in the following slides.
Animations
In an effort to enhance the user experience, I incorporated animations into scenarios where the app may take a moment to load. This includes a progress bar and play button, both of which serve as visual cues to keep the user informed of the app's status while they wait. By providing these animations, I aimed to keep the user engaged and reduce the feeling of delay or boredom during these waiting periods.
The Final Design
Prototype in Figma
I created a high-fidelity prototype in Figma that brings the design to life by incorporating detailed visual elements, animations, and interactions. The high-fidelity prototype provides a near-realistic representation of how the application will look and function, allowing for in-depth user testing and feedback before actual development.
Reflections
-
The appropriate selection of colors for the prototype was crucial to creating the desired mood and tone for the app.
-
The determination of the optimal type and timing of animations presented both challenges and opportunities for creativity.
-
The color selection involved experimenting and making modifications to meet project specifications.
-
The creation of consistent icons was a crucial aspect in ensuring a smooth and intuitive user experience, and was also a fulfilling aspect of the design process.
In the Future
-
Enhance the design for dark mode to provide a visually appealing and modern aesthetic that is easier on the eyes.
-
Explore the use of 3D elements to deliver a hyper-realistic visual experience.
-
Place a greater emphasis on conducting user research and testing to gather valuable insights and feedback on the app.
