Big Fit Girl

How to be a Big Fit Girl

TASK

Design a user interface library for an app collaborating with UX designers.

TEAM

Jenny Cho, UI,

Monica Ibrahim, UX, case study

Gabbi Matey, UX, case study

TOOLS

Hand drawing, Sketch, InVision, Canva

CLIENT BRIEF

Key functionality

Fitness Tracking

  • GPS for distance and mapping to track running/activity OR step counter feature
  • success tracker: reflection, incentive, mental health, positivity

Community

  • Sign up/registration with editable user profiles
  • A community to post questions, for other members to answer and events to meet up

Target Audience

  • 20–50 Plus size female
  • New or inexperienced in going to the gym
  • Wants to workout but has been too intimidated and on the sidelines
  • Would like to see more body positivity

PROCESS

_Client Kick-off

Before meeting with the clients, the three of us sat down together to go over the questions that needed to be asked in order to get a good idea of the scope of the project. This was done through discussions and affinity diagrams. Once the questions were curated, we met with the client for about an hour to discuss the expectations. Along side the questions I had for them, I prepared a slide show of 20 second gut test to determine the client’s preference in an app design.

Top three design picks based on gut test

Above were the top three design picks, and below were the bottom three.

Bottom three design picks based on gut test

The clients told us that the first three were their favourite because of the simplicity in the design, and the strong theme running throughout the screens. The bottom three were chosen because of the cluttered feel and the animated look, which is not what they had pictured for the Big Fit Girl App.

_Initial Design

This was the initial logo that the clients were working with and very happy with. They told us that the black white and pink represent a strong, powerful women and shows that women, even plus size women can be considered athletes. The lightning bolt was used because it is such a strong shape and image.

Clients were open to small adjustments but were overall very pleased with the existing logo. This made the next steps quite tricky, since I was used to starting from scratch, without restraints.

WHY —

Create a body positive app that welcomes women of all sizes to be active in a supportive community

COLOUR —

Black, white, pink, orange, neon

SHAPE —

Lightning bolt, triangle

SPACE & MOVEMENT —

Forward, directional, sharp

mood board

This is the mood board created based on the design inception. There is a lot of powerful movement with the images of active athletes and strokes of lightning.

The colour scheme the clients initially had (black, white, pink) was strong, but was predictably feminine with the use of pink. Instead, elements of fluorescent neon colours were incorporated to liven up the mood. The Neon signs were incorporated within the app to promote positivity and encouragement to the users. Triangles were used in conjunction with the lightning bolts to add more dimension and movement.

DELIVERABLE

Style guide

_STYLE TILE

A style tile was created to combine the elements in the mood board. Big Fit Girl key phrases were written in the Brandon Grotesque font, in white, orange and pink and in fluorescent shades.

Style Guide

_STYLE GUIDE

The style guide follows a similar format to the style tile, with some more details. The text sizes and colour information are listed for the designer to refer back to as a ‘guide’.

The iconography chosen / created have a consistent theme throughout. The different forms of challenges are displayed with human figures in different triangles to depict movement. This goes along with the triangle shape consistency, as well as body neutral movement of the app.

The images created for the on-boarding have a lightning bolt incorporated, clearly representing the Big Fit Girl brand.

Triangle shapes were used in the buttons and form fields to add more personality to the overall app.

_WIREFRAMES

With the mood board made, I started to work on the sign in page because the first page sets the tone of what the rest of the app will look like.

For the first design on the very left, I wanted to incorporate a lot of depth, energy and power in the page, so I had different shapes and sizes of triangles scattered across the page. The elements of neon were also incorporated with the sign in button as well as some of the scattered triangles. I played around with the username and password lines to incorporate triangle to make it interesting.

For the design on the middle, I stuck to the traditional route and kept the layout simple. The original lightning bolt is used, but outlined in neon and accompanying two neon lightning bolts. The copy ‘Big Fit Girl’ is slightly lit up, to give an energetic feel. The scattered triangles were kept on the bottom right of the screen to keep the attention to the top half of the page.

Tester sign-in pages

The design on the right is the one that was chosen, as the black adds a greater impact and text is easier to read against the pink triangles. The username and password field were simplified to lines and added triangles to indicate to the user where to fill out the information, while adding a unique element. The Sign in button was changed to ‘Let’s Go!’ to motivate the user to start using the app.

On boarding & profile pages
Creating challenges and schedule page

A big element of the app is to create challenges to be completed either alone (online community) or a public event (meet up). The screens above are some wireframes of the user process in creating challenges.

The background has a similar format as the sign in page with different sizes of triangles against a black background. This was a conscious decision as it was important for me to keep the app motivating and exciting throughout all the screens.

Confirmation pages

A positive message was used in the confirmation pages for every time user creates a challenge, or logs a completed challenge. This is where the neon signs were utilized to give the users a positive feedback or a ‘virtual high-five’ to congratulate them on their process. A different message and colour were used for each of the page in order to keep the message fresh.

These were just some of my many many screens I created, and the rest live on the clickable InVision link, which you can find here.

REFLECTION

This project was a huge challenge for me and there are things I am still disappointed and unsatisfied with. But I do think that I did the best that I could based on the timeframe I was given as well as the wireframes I had to work with. I have gotten really comfortable using Sketch, but I’d like to push myself further to work with other softwares for the next project.