BreakFree - Homepage & App structure redesign

Redesign & ship a behavior training app for better market fit

About this internship

BreakFree is a light weight app-blocking app, its meant to reduce your daily social media usage. In this internship, I work closely with designers, stakeholders to bring up the competitiveness of this app. This app is currently in the app store.

Impact

This is an app-shipping internship, goal is to attract funders and ship.

Timeline

Redesign & ship mobile app in 3 month

Team

3 UX designer
Jingfei Hu, Robin King
1 Dev team
1 Project owner

Task

Competitive analysis
Design system
Information Architecture

Background

What is BreakFree?

01

A behavioral training app that help you set up “challenges” to block your app.

02

After you win your “challenge”, get rewards by breaking your vicious social media addiction

Challenge

Existing state app of BreakFree is overly cluttered and difficult to navigate - users are not able to easily create productivity challenges and find their rewards.

Goal

Improve upon its usability to keep up with the competitive market.

Business goal

Increase user acquisition and driving more sign-ups.

User goal

Successfully reduce screen time through quick & simple interaction

Solution

Re-structured Homepage with clearer visual hierarchy

Homepage is the place our user will spend most of the time in. It's cruicial when we redesign this page, ensuring all the important information can be clearly, an quickly seen.

Core feature becomes more visible and intuitive

We made some core changes in terms of the app's information architecture and navigation system. All for our users to create a challenge as fast as possible.

Fresh look, with minimalistic visual system

BreakFree 1.0 does not has as much consistency in terms fo visual systems such as component, colors, and font.  It's also crucial for our visual system to stay up-to-date with our competitors.

Business’s need

Design BreakFree 2.0 to meet market expectation in seeking potential collaborators

At first glance, the app is functional, therefore we need to find out the "whys" for this redesign. We conducted meetings with our stakeholder, knowing the goal of this project to have a clearer picture and to making timelines.

Increase ratings & user community

“We want this redesign to solve usability problems, right now its “hard to use” according to our user.

Presenting a more market-compatible design in seeking partners

“ Breakfree now looks outdated, unlike the competitor apps on app store”

Users research

Understanding user’s expectation when going through the app with survey & interview

Research methods: 6 surveys, 3 in-depth interview, and App store reviews

Our negative feedback from app store does gave us insight that our user feels confused when navigating in our app after onboarding. To understand our user’s expectation better, we issued 6 surveys and 3 in-depth interview with users that are fresh to this app.

Above is a simple simulation of the user flow when they first see this app

Users’ Painpoint

The app, designed to keep users away from their phones, is overly cluttered and difficult to navigate.

After our initial research, the main problems becomes obvious: Confusion. Where the confusion comes from: Our users are spending a long time scrolling and navigating through different screens, our screen space are cluttered and inefficient, important information are hidden.

Design scope
Improvement 1: Homepage

Redesign of the information architecture to help with usability of core functionality

I learn from the research that the navigation is confusing. Not just in terms of creating a challenge, but also for the user to navigate to other pages. We also realize that there's a lot of underutilization in the existing nav bar.

Analyzing what's the core of the app

Looking at all our app's feature, we decided to a simple Kano model to identify the importance hierarchy of each feature.

An information architecture workshop

Since this is an important decision making moment, we conduct in-person workshop

Design decision

Nav bar improvement: How can shortcut the journey when user create a challenge

After redesigning our IA, we decided to add a shortcut for creating challenges at the bottom nav bar. Rather than putting our core feature at the bottom of the page as a card, we can utilize pop up and a inline style alternative.

Improvement 2: Layouts

Visual hierarhcy improvement: Allowed users to see more infomation needed

Balancing real-estate in the precious homepage is also cruicial to out user's first impression of the app. We had previous feedback of how the challenge card can populate the homescreen very fast. This is because of how our greetings and challenge cards are unnecessarily big,

Improvement 2: Design system

A design system refresh - competitive analysis and market research shows productivity apps are more modern and lightweight in its UI

Our old design system contains inconsistency across the app. Not only this will confuse our users, it will also damage the initial impression of how our users sees our app.

Market research to determine the right tonality and user’s expectation

When looking at similar app, Efficiency", "Minimal", and "Clean" are usually the core tonality. With the established impression of a productivity app, which will become our redesign direction.

Heuristic Analysis

Since this is an important decision making moment, we conduct in-person workshop

Design showcase

Consistency color, typography, and a grid system across the app

An established system will gain us better first-impression.

Impact

BreakFree 2.0 that better meet users’ expectation and stakeholder’s goal

Business outcome

Attract 4+ potential collaborating companies, sign up increased

Usability outcome

Screentime & navigation time reduced +better ratings.

TakeAways

The story does not end here...

→ Managing stakeholder’s expectation

Stakeholder and designer has completely different mentality. Cross education, we teach you the design process, you teach us the business side of things

→ Be flexible, design is not a linear process

Polishing screen with design system does not always comes last.
In terms of business presentations, we need to show polished screen before finishing designing userflow, this happens.

Made in Webflow