Tools Used

Stage 1

PROJECT DETAILS

Problem Statement

Select a taskflow from the Freedom Mobile App, and conduct a heuristic evaluation on each screen. Once completed, create an improved UI design and compile all elements into a working UI Library.

As a team, choose an app from the App Store with low customer reviews. Next, choose a taskflow from the app and conduct a heuristic evaluation on each screen in the taskflow. Once completed, identify the violations and create a list of suggested improvements that are feasible and will improve the user experience.

Next, redesign each screen focusing on the heuristic violations. This will involve designing and compiling all UI elements into a UI Library for development teams to use if they wanted to implement your design suggestions.

HIGH LEVEL TIMELINE

In 2 weeks, evaluate and redesign a taskflow in the Freedom Mobile app

KEY GOAL

Identify UI issues in a single taskflow from the Freedom Mobile App. Create an improved design based on findings

Role and Responsibilities

I was 1 of 3 UX Designers who worked on this project from evaluation to concept development.

I collaborated with 2 other UX Designers to conduct the heuristic evaluation on the selected taskflow from the Freedom Mobile App. With my background in design and my skill in UI design, I lead the UI design and branding.

To do this, I needed to become familiar with Freedom Mobile's branding. I analyzed their website, advertising, and communication pieces to ensure our redesigned taskflow was on brand.

TEAM

3 UX Designers

RESPONSIBILITIES

Usability Testing
Presentation Design
UI Design

Scope and Constraints

Before starting the process, I created a list of project contrainsts that need to be taken into consideration during the process.

After conducting some secondary research, I created a list of project constraints to keep in mind throughout the design process. This included technical, business, and target user constraints. The specific constraints were as follows:

Technical Constraints

Needs to be able to be developed for Android
Can only redesign screens within taskflow
Be able to be integrated into existing Freedom Mobile App

Business Constraints

2 Weeks
3 UX Designers
Following Freedom Mobile's branding

The Process

Day 21-30

Day 1-3

Day 4-6

Day 7-20

CONDUCT HEURISTIC EVALUATION

UNDERSTAND

BRANDING

WIREFRAMING

+ DESIGN

Choose taskflow
Identify heuristic violations

Analyze other Freedom Mobile touchpoints
Gather colours, typography and logos

Sketch out low-fi wireframes
Explore layouts
Design high-fi version
Include branded elements

CREATE UI

LIBRARY

Conduct 3 Rounds of Usability Testing
Integrate improvements
Design High-Fi
Prototype and Integrate

Stage 2

HEURISTIC EVALUATION

Selected Task Flow: Purchase an Add-On

Since we only had 2 weeks for this project, we conducted an evaluation on the Purchase an Add-On taskflow instead of the entire app.

Based on the timeline of the project, we could only examine and improve one taskflow within the Freedom Mobile app. We selected the Purchase an Add-On taskflow because this was a common task many users had issues with in the Freedom Mobile App.

Heuristic Violations

After completing the heuristic evaluation on the taskflow, we found 5 heuristic violations.

While conducting a heuristic evaluation on the Add-Ons taskflow, we found 5 heuristic violations. The violations included visibility of status, user control and freedom, consistency and standards, flexibility and efficiency of use, and aesthetic and minimal design.

Since we found 5 violations, we'll need to give the app and severity rating. This will allow us to present our findings to Freedom Mobile's Product Team in a concise manner.

Violations Severity Rating

After analyzing the violations in the Add-Ons taskflow and assessing their impact on the user experience, we agreed the violations had a minor severity rating.

Based on the 5 heuristic violations found in the Add-Ons taskflow and their severity, we decided to give the violation an average severity rating of 2 (Minor). A minor rating means the violations should be given low priority before releasing an update since users were still able to navigate through the taskflow.

Stage 3

UI REDESIGN

Redesigned Screens

After examining each violation, we redesigned the UI of each screen in the taskflow. During this process, we considered project constraints and Freedom Mobile's branding.

After looking through the entire taskflow and analyzing each violation, we redesigned the UI of each screen to follow and align with Jakob Nielsen's 10 Heuristics. We wanted the app to follow Freedom Mobile's branding, so we injected some of their colours and typography into the redesign. Below is a comparison between the original and improved design.

Stage 4

UI LIBRARY

New Freedom Mobile UI Library

For Freedom Mobile's product team to develop our redesigned UI, we created a detailed UI library that includes the colours, typography and UI components.

In order for this new design to be developed, we created a UI library that compiles all the UI components that were designed by us. The UI library includes type styles, logo specifications, and UI components that's are organized into sections from Brad Frost's Atomic Design Principles.