top of page
Frame 36996.png

BreakFree: From Social Media

BreakFree is an app that uses solo and friend challenges, app blocking and paid rewards to enable people to take control of their social media usage. As BreakFree's user base continues to grow and looking for grants, the existing experience could no longer support the emerging use cases across the different customer profiles.

​

In response, we set out to simplify the key feature experience (create challenge, redeem rewards) and shipped new customization features that enables users to track their progress.

MY ROLE

As the lead designer for this project, my responsibilities include working closely with stakeholders to synthesise user requirements, communicating design recommendations, prioritising outcomes, leading the end-to-end design process, and managing expectations across dev teams.

PROJECT SCOPE

2 Product Designer,
1 Product Owner,
1 Product Manager,
a team of developers

PROJECT TIMELINE

PROJECT OUTCOME

+ Improving existing user satisfaction rate by uplifting the product's task creating and subscription experience.

+ Validating product solution from a successful launch and user adoption of a new feature that allows clubs to publish their own e-commerce sites.

01.2023 - 06.2023

TOOL USED

Figma; Adobe XD;  Adoeb Photoshop; WIX

DISCOVER

MVP 1.0 received negative feedback about usability and need to update for business need.

During the initial research phase with MVP users, a significant number of them encountered challenges in completing the product's core task. Additionally, we received negative feedback from the App store. Despite the stakeholder's efforts to secure new grants/funding and develop new features, there were unresolved usability issues that persisted.

BreakFree-1.png

Negative feedback from App store review

INITIAL THINKING

Target Audience

• Students(16yrs - 25yrs old) who want to build a healthier relationship with social media
 

Research Method

• Existing MVP 1.0 
• MosCow Analysis
• Competitor Analysis
• Qualitative Research(in person interviews)

RESEARCH

Research Insights
Pain Points - Existing System

BreakFree-3.png

​BreakFree: from Social Media 1.0

Findings from in-person interview

  • The onboarding section took 10-15 mins.

  • 2 more challenges would block the create challenge button.

  • Couldn’t navigate from home page to friends page.

  • The most frequently use features were creating challenges and browsing coupons.

• Complex onboarding flows
• Lack of customization
• Inconsistent visual element
• No Design System
• Technical porblems
• Misuse of spacing

MAIN PAIN POINTS

  • The hierarchy of navigation system was confusing

  • The key feature lack of clarity and customisation

  • The in-product experience laced consistency

GOALS STATEMENT

  • Optimize the overall user experience

  • Increase Task Completion rate 

  • Enhance user retention and engagement rates

  • Align with $50,000 funding business goals

PAIN POINT 1.0

The hierarchy of navigation system was confusing

Based on an analysis of user behavior, we employed the Moscow Analysis methodology to thoroughly reassess and refine the hierarchy of each page. 

Navigation Bar

Home Page

BreakFree-4.png

Moscow Analysis methodology chart

BreakFree-6.png

Designers Discussion 

Redesigned navigation bar based on user behavior

According to the result of the analysis, we decided to separate our navigation in 2 different hierarchy.

BreakFree (6).png

Final Navigation Bar Decision

Prototyping and Testing

Frame 36978.png

Solution for PAIN POINT 1.0

  • Save more space for different challenges

  • Prioritise the key feature

  • Organize the product hierarchy

PAIN POINT 2.0

​The key feature lack of clarity and customisation

Frame 36981.png

Competitor Analysis

When discussing app blocking and habit cultivating apps, "Forest" serves as both our competitor and subject of analysis. We conducted an examination of its information architecture and user flow, gaining insights into the app's overall cleanliness and design.

BreakFree-7.png

Opal

Forest

NEW CHALLENGE MODE

Daily Limit

Limit the time you spend on social media in a day

Focus

Challenge how much time you can get rid of social media

FEATURE REQUIREMENT

  • Users are able to choose specific apps 

  • Users can switch between different mode

  • Users can have solo/group choices

  • Users can choose to repeat the challenges

Frame 36984_edited.png

Version 1.0

Version 2.0

Version 3.0

GROUP FOCUS.png

Version 4.0

The application​ went over 4 different versions of iteration and landed on Version 4.0.

FINAL CREATE CHALLENGE USER FLOW

Frame 36985.png

PAIN POINT 3.0

In-product experience lacked consistency

Consisent.gif

• Users need jump between apps to share challenges 

​• Users need to jump between apps to report screen time

DESIGN SOLUTION

In order to keep the consistency in the application , we decided to move the coupon code directly into the marketplace, after the user redeemed the coupon, they can directly follow the website to redeem rewards. This design also increase partent companeis's exposure.

Frame 36986.png

Version 2.0

Our back-end developers find the way to directly connect screen time API to our app, so the users don't have to jump back and forth to take screenshot.

19521688506125_.pic.jpg

Solution for PAIN POINT 2.0 + 3.0

  • Seamless and consistent in-product experience

  • Enhance user satisfaction rate by bringing custmized option

  • Improve technical API

Final Design

Frame 36994.png

Key User Flow from Create a Challenge to Redeem Rewards

  • Improve visual hierarchy and enhance the overall design.

  • Effective utilisation of space enhances the user experience.

  • Users enjoy greater customisation options. 

IMPACT

Build a community and expand the scale of the product

BreakFree-2.png

Feedback on App Store after Release

19531688508116_ 1.png

Business milestone

TAKE AWAY

As the lead UX designer on this project, I honed my skills in conducting usability testing despite time and budget limitations.

I also gained expertise in successfully communicating and delivering designs to developers, even in their absence.

Additionally, I developed the ability to confidently express and defend my design decisions when met with disagreements. This valuable experience not only boosted my confidence but also reaffirmed my dedication to becoming a highly skilled designer.

bottom of page