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.

One of the projects was a employer project created with Creative Navy, one of the worlds leading design agencies. We delivered designs and prototype for a Harley Street hospital, that requested a new booking app for patients.

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.

Kings's Collge London logo

My role

As this was a university project, I owned all the tasks, from end to end.

Throughout the 7 months, I submitted assignments, reports, presentations and Figma files.

Tools I used on designing the apps  througout the course

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

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.

Designs that I was asked to improve

Designs that I was asked to improve

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. 

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.