BreakFree: From Social Media

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.

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: 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

Moscow Analysis methodology chart

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.

Final Navigation Bar Decision

Prototyping and Testing

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

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.

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

Version 1.0

Version 2.0

Version 3.0

Version 4.0

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

FINAL CREATE CHALLENGE USER FLOW

PAIN POINT 3.0

In-product experience lacked consistency

• 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 increases partent companeis's exposure.

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.

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

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

Feedback on App Store after Release

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.