top of page

UI Case Study

fitted-gif.gif

How to create an engaging experience helping people to gain positive habits

Objective

Fitted is a product that came to life through my UI Design certificate training program at CareerFoundry. 

This responsive web app aims to help people get into an exercise of their choice by providing routines, guides, interactive examples, and info , fitting into their daily schedule.

MY ROLE

Composition & Visual Design

:Advanced UI & the Design Handoff

TOOL KIT

Illustrator

Adobe XD

Photoshop

Pen & Paper

TIMELINE

4-weeks course for UI design

4 weeks course for UI design 

My role

My tasks included the exploration of composition and layout from a UI perspective. I followed the "mobile first" rule in my design process. 

 

After solidifying the foundation for the project in mid-fidelity mobile wireframes, I applied visual design for the web app, using visual design principles and trends, as well as color, typography, icons, imagery, and interactions.

 

Finally, I adapted the designs for different breakpoints by creating mockups for tablet and desktop.

User persona

My user persona, Rebecca, represents the goals and needs of my target group and guided me throughout the design process.

Persona_Rebecca_no shadow.jpg

Understanding the user

User stories provided an excellent way to empathize with the user and define the product with clarity. I used them to reflect what my target group needs and the value and goals they want to gain.

User Stories.jpg

User flow

Based on the user stories, I started to draw out user flows. I determined the entry point and success criteria, as well as the pages, features, actions it would be included in order for my users to achieve their goals.

User Flow.jpg

Low-fidelity

wireframes

With the user flow diagram laid out, I started drawing paper based low-fidelity wireframes.

Wireframing_2.jpg

Mid-fidelity wireframes

Designing for a responsive web app, I used a fluid grid system of 12 columns. At this stage I was focusing on the mobile breakpoint. I used Adobe XD to create mid-fidelity wireframes.

1.4_Visual_Hierarchy_&_Spacing_Elvira_He

Moodboards

I created two mood boards to present the feelings of my target group. Although both are clean and minimal:

  • the first one is dominated by a dynamic contrast of pink-orange and black

  • while the second one is dominated by blue with less contrast and more calmness

Dominated by a dynamic contrast of pink-orange and black

Dominated by blue and grey with less contrast and more calmness

Moodboards.jpg

Colors

Color has an almost magical tendency to evoke emotional responses from people. This is entirely subjective and each user may have a different reaction to the designs for completely different (personal or cultural) reasons. 

Still, there are certain emotions or feelings brought forth by the use of certain colors. See the color palette first and the decision below:

color palette.jpg
I worked with shades and tints of the very soft orange across the product, see the reason behind the design decision:
Shades of orange.PNG
Shades of #e5c0b0
Tints of #e5c0b0
Orange
  • communicates playfulness, warmth, and energy
  • designs with the use of orange should be used to help evoke these emotions in the users
  • many sports- or outdoor-orientated companies use orange in their branding to help communicate this energetic message.
Black
  • black-dominant designs are seen as trendy, modern, or sophisticated 
  • black can be difficult to work with as a dominant color, because readability can sometimes suffer. 
Pink
  • often associated with care, compassion, and love
  • every modernity with brighter hues can be used in the designs to create a fun, youthful atmosphere
  • can be a fun and unique color to design with, but we need to be careful of pandering to traditional gender roles. 
Blue
  • communicates serenity, trust, and an inviting atmosphere—though with blue it often depends on the hue we choose
  • light and bright blues can evoke feelings of calm, serenity, and relaxation.
Gray
  • is an unemotional color - being both motionless and emotionless, gray is solid and stable, creating a sense of calm and composure, relief from a chaotic world.
  • is a color of maturity and responsibility, associated with the gray hair of old age.
  • it will never be the centre of attention; it is safe and toned down
  • is often seen as conservative, boring, drab and depressing on the one hand and elegant and formal on the other, hand yet never glamorous.

Typography

I combined two sans-serif fonts with similar mood: Century Gothic and Open Sans.

1.7._Typography_Elvira_Hellenpárt.jpg

Titles & Headings

Century Gothic
Heading 1 | Bold, 48 px
Heading 2 | Bold, 32 px
Heading 3 | Regular , 26 px
Heading 4 | Regular, 20 px

Body Text

Open Sans
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

TITLE OF THE CALLOUT BLOCK

Imagery

  • Pictures about women of all age, all body type and different life situation like being pregnant or mothers doing sports and living healthy

Examples of pictures I will use in my product:

  • Chosen pictures should awake empathy, users should be able to identify themselves with the characters in different life situations in the pictures

  • Photos and illustrations should support users to get into a healthy lifestyle and motivate them 

Examples of pictures I will not use in my product:

  • Pictures with backgrounds not representing real-life situations (like on the top of the mountains surrounded by clouds) since my app aims to demystify sports and healthy lifestyle, and be closer to real people

  • Pictures with only perfect bodies, since my product should support diversity and self-acceptance

  • Pictures without faces becasue people naturally look at the faces on pictures - and facial characteristics sometimes say more than words

imagery bad.JPG
Imagery good.jpg

Icons & Shapes

When using icons in the user interfaces, I use the shape that my users’ culture has come to associate with that process or action. Although good icons clearly communicate their message, using text labels always help to communicate the meaning and reduce ambiguity.

 

I also make sure that all icons share the same line styles, shadowing, highlights and perspective. Additionally, the icons in the designs feel like they are from the same visual family and part of the brand

2.1 Shapes & Icons_Elvira Hellenpárt.jpg

Animated progress

indicator

To communicate the delay while capturing the attention of my users and reducing frustration by offering something fun and relevant to the brand and content, I use animation.

fitted-gif.gif

Different Breakpoints

To communicate the delay while capturing the attention of my users and reducing frustration by offering something fun and relevant to the brand and content, I use animation.

Breakpoints.jpg

Final Mockups

To communicate the delay while capturing the attention of my users and reducing frustration by offering something fun and relevant to the brand and content, I use animation.

Final mockups.jpg

Like what you see?

Let's chat.

bottom of page