Laura Gieco

UX/UI Designer

Understand
Ideate
Visual Design
Key Takeaways

Work ❯ Fitted ❯ Fitted Design Process

Fitted Design Process

Understand

• Project Brief
• User Personas
• Requirements
• User Stories
• Inspiration

Ideate

• User Flows
• Low-fidelity wireframe
• Low-fidelity prototype
• Informal Feedback
• Grid System
• UI Patterns & Components
• Visual Hierarchy
• Mid-fidelity wireframes

Visual Design

• Moodboard
• Logo
• Colours
• Typography
• Iconography
• Imagery
• Interactions & Gestures
• Mockups
• Stylegude

Understand

The design brief provided all the information needed to get to know the end-user of the app. It also included a list of features required and branding guidelines.

After going through the brief, I compiled a Pinterest board with secondary research online about existing fitness apps and other analogous inspiration.

I also looked into persuasive patterns that could be used to design the required features to motivate people into exercising and becoming healthy

Before moving to the ideation stage, I organised the project backlog using a Trello board.

Ideate

For each of the user stories in the project brief, I laid out a user flow diagram to visualise steps the user persona would take to achieve her goals.

Using rapid prototyping principles, I produced low-fidelity wireframes for each of the screens in the user flow diagram, drafting a basic layout and copy.

To refine the design, I built an initial prototype of the app and used it to gather informal feedback while building a list of improvements to accomplish in the next iteration.

With a better idea of how the user interface would look, I began working on the foundations.

The first step was deciding on a Grid System, so I chose the Bootstrap 4 flexbox grid because of its popularity and ease of use.

Then, I started to iterate low fidelity wireframes towards more detailed screens by introducing patterns and components.

I also applied different techniques to achieve visual hierarchy throughout the screens, such as grouping and spacing, positioning of elements, and drawing attention through colour and contrast.

Visual design

Once I was ready to start polishing the design, I developed two varying visual directions by creating two different mood boards.

The first one has a relaxed vibe; it’s about people doing exercises in casual environments. The second one is more energetic; it’s about pushing your fitness limits to achieve more.

I decided to move forward with the first concept’s vibe because it’s in line with the user persona of the app, who is someone returning to fitness and with not much time to exercise but willing to schedule short routines during the day to stay fit.

With a clear visual direction, I iterated the design towards high-fidelity wireframes and developed style guidelines, components, gestures and interactions, responsive breakpoints and mockups.

Key takeaways

Finding the best tools

For this project, I experimented with different design hand-offs tools as I learned. In a team scenario, deciding on the best tool to foster collaboration and streamline the design process would be the first step before starting work.

Thanks for reading!

Here are other projects I worked on

Nature Hunt

Designing a scavenger hunt experience that connects people back to nature