King’s College London

UX Design Certification

Introduction

As part of completing a postgraduate certificate in UX Design at King’s College London, I engaged in various projects, including several small assignments and three major projects.

The case study described below is the fitness app Habit Hero, which is one of the design projects I work on at Kings College, which you can see below.

The Problem

The case study assigned to us focused on a fitness app named Habit Hero, which had already been designed. Users were dissatisfied with the app, and my task was to improve it to better meet their needs and the context of its use.

The solution

The solution includes a full set of designs for wireframes and two user tasks as a high-fidelity prototype in Figma with animations.

To the app project I created a set of components for wireframe and high-fidelity designs and a style guide. 

Some other deliverables were research plan, usability testing plan, discussion guide, affinity map, persona, stakeholder maps, journey map, assumption / hypothesis, empathy map, hand sketches and designs from ideation sessions. 

My role

As this was a university project, I owned all the tasks, from end to end. Throughout the 7 months, I submitted assignments as reports and as Figma files.  

During the course I used a variety of tools.  

Tools I used on the app project and programme

Design process

I used the Design Thinking process that was developed by Stanford d. school. The Design Thinking process is an iterative design process that consists of 5 stages; empathise, define, ideate, prototyping and test. 

Illustration: Copyright Kings College, London

Empathise with the users

Based on the brief and existing user feedback, I formulated a set of assumptions and hypotheses prior to conducting user research.

To gain a deeper understanding of the users, the context of use, and the pain points when using Habit Hero, I developed a comprehensive research plan outlining my objectives and the insights I sought to obtain.

The user research methods I employed included:

  • Competitor analysis
  • Review of existing data
  • Usability testing
  • Heuristic analysis
  • User interviews
  • UX expert review
  • Cognitive walkthrough

Persona of a passionate runner

Storyboard

Storyboard showing a runner using a fitness app

Current state journey map of a runner

Ideation

From the data collected through research, I identified pain points and developed a clear plan outlining what users needed and what didn’t work for them with the fitness apps they were currently using. 

To generate ideas, I created a design studio session, quickly sketching eight solutions on a piece of paper. 

Design studio session, generating 8 rapid designs

Happy path and alternative of HabitHero Flow

Wireframes

I started to design hand-drawn sketches that follow the flowchart above.
The wireframes I created was the screens that was the same as the sketches, but more defined and detailed. 

Usability testing

After creating the wireframes and creating a prototype, I tested the prototype with users to test a few tasks and observe how the users were able to complete the tasks. 

There were a few issues identified and I iterated on the designs to align with the users’ need. 

UI 

Next step was to decide on the colors, the look and feel and what the design should signal to users. In the brief, they asked for positive energic colors.
I decided after testing several color combinations. 

Styleguide
After creating the colors I designed a logo I believe aligned with business needs. A small style was creadted with colors, fonts, logo, and, use of components, icons, button and button states,

I applied the colours to the designs and created components, and prototypes, including animations. 

Splash screen

View animation of the splashscreen

The animation and design was created in Figma

 

Designs

Below are some of the initial design iterations. These are just a few examples; a more detailed design presentation is available upon request.

You are welcome to contact me for further information.