USER PERSONA

After we understand the user’s needs and goals, we are able to create user personas that represent the typical users of our product. By defining user personas during the design process, we can understand the user’s needs, improve usability, reduce risks, and increase engagement. It provides valuable insights into the user’s preferences, behaviors, and pain points, which can be used to create a product that aligns with their needs and resonates with them emotionally.

Rebecca

Age: 35 years
Job: Software Developer
Status: Mother and in a relationship
Fitness Level: Beginner

“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.”

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 to working out, Rebecca also wants something that will help her learn how to properly exercise.

• Rebecca wants help finding routines she can enjoy.

Tasks

• Rebecca wants to be able to find exercises that match her goals of losing weight and getting in shape.

• In addition, she wants to find short exercises that she can do multiple times per day in between other activities.

• She wants the tool to keep her motivated as well, as her schedule can often be distracting

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 STORIES

• As a new user, I want to learn about different exercises, so that I can figure out what is best for me.

• As a new user, I want to be shown how the exercises are done, so that I know I’m doing them correctly.

• As a frequent user, I want to be able to earn achievements or rewards, so that I can stay motivated.

• As a frequent user, I want to be able to schedule exercises for working out, so that I build positive habits.

• As a frequent user, I want to complete daily challenges, so that I can have an additional way to stay motivated.

• As a frequent user, I want to track progression and record what I’ve done, so that I can see my progress over time.

• As a frequent user, I want to be able to share routines with my friends who may also be interested, so that I can encourage them to become healthier.

USER FLOW

With the information provided from the previous step, we were able to identify the key features and functions of our app and map out the user flow, starting with the main screen and branching out to different features. We considered a card sorting method to created an intuitive navigation system that helps the user achieve their fitness objectives. We tested the user flow with beta testers and made adjustments based on their feedback.

LOW-FiDELITY WIREFRAMES

During the design process, I began creating wireframes to reflect the steps in the user flow. Initially, I sketched low-fidelity wireframes and then designed mid-fidelity wireframes to add more screens. I ensured that the design was minimalistic, intuitive, and easily scalable to other screens such as tablets and desktop computers. The wireframe stage involves creating a visual representation of the product’s layout and helps to refine the design before moving on to prototyping.

defining the look and feel

At this phase of the process, it was time to consider how the app should look and feel. To initiate this process, I began by creating a moodboard that reflected the concepts and values our product was built upon and defined in the previous stages, such as 'Encouraging,' 'Positive,' and 'Energetic.

Before finalizing any decisions on typography, imagery, or color, I believe it's essential to conduct a brief exploration and A/B testing with potential users and fellow designers to gather feedback on these UI elements. Experimenting with various styles has helped me evaluate and validate my design choices for the app.

HIGH-FIDELITY WIREFRAME

the next step in the design process was to refine the design. To accomplish this, I created a high-fidelity wireframe that included more detail and accurately represented the final product’s appearance and functionality. A high-fidelity wireframe is a detailed visual representation of the product that shows how the user interacts with the various elements on the screen. This stage helps to ensure that the design meets the user’s needs and expectations before moving on to prototyping.

STYLE GUIDE

the next step in the design process was to refine the design. To accomplish this, I created a high-fidelity wireframe that included more detail and accurately represented the final product’s appearance and functionality. A high-fidelity wireframe is a detailed visual representation of the product that shows how the user interacts with the various elements on the screen. This stage helps to ensure that the design meets the user’s needs and expectations before moving on to prototyping.

ICONS

Monochromatic: Icons are solid color in accordance to the color palette and contrast.
Outlined: The icons are outlined for a more modern look and feel that aligns with the mood.
Stroke: Outline stroke is 1,5, which give visibility at the minimum icon sizes and maintains uniformity and coherence in the design.
Soft Edges: Soft and lightly rounded edges to make shapes with a friendly and welcoming look.
Geometric: Simple and consistent shapes that are readable and provide a well balanced, minimalistic icon appearance.

typography

COLOR PALETTE

BUTTONS

Primary

Button BG: Orange 100 / #ff6c06
Text: White / #ffffff

On Hover

Button BG: Carmesi 100/ #c43b00
Text: White / #ffffff

Secondary

Button BG: White / #ffffff
Text: Orange 100 / #ff6c06
Border Color: Orange 100 / #ff6c06
Border With: 1px

On Hover

Button BG: White / #ffffff
Text: Carmesi 100/ #c43b00
Border Color: Carmesi 100/ #c43b00
Border With: 1px

other extra examples ui elements

Background: Orange 100 / #ff6c06
Element: White / #ffffff

Background: Dark 40/ #b9bac0
Element: White / #ffffff

Bar BG: White / #ffffff
Progress bar: Orange 100 / #ff6c06
Border Color: Dark 100 / #03071e
Border With: 2px

Filter

Checkbox

Radio

Background color: White / #ffffff
Text and element: Orange 100 / #ff6c06
Border Color: Orange 100 / #ff6c06
Border With: 2px

IMAGERY

Appropriate Images
The pictures should show a friendly and save environment, following the same principles as the color palette, the direction we are establishing is to give our targeted users is a friendly web app, where they can feel related and not scare or intimidated, also diversity in ethnicity is also important showing that no one should be be set aside. Basic training, having fun and enjoying the time during the exercises, the pictures should show encourage, positive and energetic.

RESPONSIVE BREAK POINTS

To make my designs responsive, I started by selecting the tablet and desktop breakpoints and scaling my existing grid in the design process. Responsive breakpoints are the points at which a website’s layout will change to accommodate different screen sizes. Once the breakpoints were established, I applied the visual design as dictated by the Fitted style guide to my wireframes. This ensured that the final design would maintain a consistent look and feel across all devices.Feel free to interact with the prototype