BLACKROLL

App Redesign & Design System
BLACKROLL®

BLACKROLL® is a prominent player in fascia training and recovery tools. Their app supports users with guided exercises, personalized training plans, and wellness knowledge.
The project goal was to improve the onboarding experience, optimize core user flows, and establish a scalable design system that would streamline future feature development across mobile and web.

Client: BLACKROLL®
Timeline: 2024-2025
Services:
Product Experience Design, UX Strategy, Interaction Design, Visual Design
Platforms: iOS & Android

Challenge

While the app already had a loyal user base, analytics and user feedback revealed:

A drop-off rate during onboarding of new users.
Inconsistent UI patterns due to incremental feature additions over time.
Accessibility gaps and inconsistent microcopy that impacted usability.
Missing connection between training personalization and e-commerce.

The challenge was to redesign the onboarding and main user flows while
building a flexible, accessible design systemto ensure long-term consistency.

Objectives

Improve first-time user experience with a friendly, guided onboarding.
Create a unified design system for mobile & web, ensuring accessibility compliance.
Streamline main user flows for finding, saving, and creating workouts.
Integrate shop features naturally into the training experience.

How we got there:

01 Research & Analysis

User interviews & expert analysis:
Mapped recurring pain points from App Store feedback and customer support logs.
Competitive benchmarking:
Compared onboarding and personalization flows from fitness & wellness apps
Analytics deep dive:
Identified drop-off points in onboarding and exercise filtering flows.

02 Exploration & Ideation

Before committing to a new flow, we explored solutions from multiple angles:

Stakeholder Workshops:
Aligned product, marketing, and customer support teams on shared goals.
Competitive Benchmarking:
Studied onboarding flows from wellness leaders to identify best practices.
UX Pattern Library Scan:
Gathered proven onboarding structures that balance speed and personalization.
Ideation Sessions:
Sketched alternative flows in MIRO and prioritized based on effort vs. impact.
Scenario Mapping:
Created quick personas and “day-in-the-life” use cases

03 Quick Fixes

While designing the full overhaul, we shipped small, high-impact improvements to address immediate pain points:

Microcopy: Added benefit explanations to personal data requests.
Action-oriented Empty States: Replaced static “no content” screens with helpful prompts and CTAs -
e.g., “No workouts yet. Browse exercises and add your first one now.” or “You haven’t saved favorites. Tap the heart to get started."
Accessibility Tweaks: Increased tap target sizes, font sizes and spacing.
Loading States: Added lightweight animations to reduce uncertainty during data submission.

04 Prototyping & Testing

Built interactive bilingual prototypes in Figma to validate flows, copy, and accessibility with both internal stakeholders and a small user test group.
Iterations: Applied feedback to refine microcopy and streamline navigation.

Onboarding flow:
Designed a step-by-step, two-language onboarding that captures essential preferences (training goals, available time, gender, birth date) while explaining why each detail is needed. Integrated Google, Apple, and Facebook sign-in options.

Exercise filtering:
New multi-filter UI allowing users to combine body region, goal, difficulty, and equipment in a single screen.

Fallback scenario:
Designed a special screen for users who log in without onboarding, inviting them to personalize later.

05 UI Design & Design System

Created a Figma-based design system with:

Accessible color tokens and typography.
Component library for buttons, cards, filters, and navigation.
Usage guidelines for Voice and Tone & Microcopy.
Applied WCAG 2.1 AA standards for text contrast, tap targets, and focus states.

Solution Highlights

Friendly, motivating onboarding with clear benefit explanations for every data request.
Streamlined navigation: Key sections Training, Shop, Knowledge, and Profile
Accessible, scalable design system ready for mobile
Created a tone & voice microcopy guide for future feature consistency

Learnings

Making registration optional early on increases onboarding completion.
Every data request should be paired with a clear “why” for user trust.
Building accessibility into the design system from day one saves development time later.

Final Results + Impact

Useful data to be collected for further optimization
such as DAU/MAU Ratio, Task Success, Retention and Workout Completion Rate
as well as Design - Dev Delivery time cut due to reusable components.

Due to internal restructuring, the project was terminated prematurely,
and therefore no data can be shown here.

KEEP ROLLING

optimist club