Boost app  —

Role - UX UI Designer    Sprint length - 2 Weeks

The brief

Tasked with thinking of a problem space, I chose to tackle the topic of self-esteem and made it my mission to create an effective, user-centered solution to help people feel more confident in themselves.

The solution

Boost - An app that allows users to set goals, accomplish tasks and receive positive feedback to train their minds for a healthier, happier life. 

01. Understanding the opportunity 

User interviews made it clear that there were shared experiences and pain points amongst the topic of self-esteem. Key findings were that users:

  • Felt more positive / accomplished when completing a task or trying something new

  • Felt failure was the most diffcult thing to accept and forget

  • Valued encouragement

Based on these findings, I crafted a persona called Zara, outlining the key goals and frustrations that I needed to design for. 

25 / Freelance fashion photographer / London

Zara

ESTP (Entrepreneur)

Personality type

To find new inspiration

Goal

Frustration

Comparison to the models she photographs

02. Define

Going into the design studio, my aim was to come up with something that was useful, usable, desirable, accessible and valuable. This rapid ideation session allowed me to use the key findings from my user research to come up with creative solutions that could meet the users needs.

03. Design & Develop

Using one main idea from the design studio, I developed a prototype which involved Zara, my persona, using the app for the first time. I went through 6 design iterations to simplify the app, constantly improving the design based on the results from my user testing. These were my main findings:

  • From the paper prototypes - the app had too many screens, making users feel confused and overwhelmed.

  • In low-fidelity, I made amends according to the feedback from the paper prototypes by removing the lengthy onboarding process and limiting the number of activities the users could choose. This made the signing up process easier and allowed users to complete tasks with efficiency. 

  • In mid-fidelity, users found the navigation fluent and found the app easy to use. However, some users commented that the app didn't look very exciting. This led me to produce a moodboard and develop my own illustrations to infuse fun, colour and life. 

Moodboard

Sketches

Colour Palette

Buttons

Below you will find the buttons in default, hover and active states. You will see the two allowed colours for call to action buttons.

DEFAULT

DEFAULT

HOVER

ACTIVE

ACTIVE

HOVER

Typography

Headers

Headline H1

Learn something new

Font-family: Overpass  -  Font-size: 25px  -  Font-weight: bold  - Colour: #5766B8

Learn something new

Headline H2

Font-family: Overpass  -  Font-size: 25px  -  Font-weight: bold  - Colour: #5766B8

Body

This is a paragraph using Overpass bold at 18px, with a 30px line-height in the colour #7EA9DF Phasellus pharetra urna sit amet tellus elementum aliquet in et quam. In condimentum dui.

Illustrations

Illustrations can be used across the app wherever relevant. 

Characters may be mixed and their expressions may be changed but they must remain in the same shapes and colours displayed below. 

Wireframes

Next Steps

I had so much fun working on this project and I was so pleased that the final product tested well and received strong feedback. A lot was achieved in this two-week sprint but there are many other things that I would have liked to do. These include: 

  • Conducting a longer period of usability testing using diary studies

  • Implementing a reward system

  • Creating a community feature

Lets work together —

Find me here —

Copyright © 2018 - 2019 Charlotte Golledge