App Redesign
Aligning Brand, Simplifying Navigation, and Building for the Future
Katalyst
2023
Summary
Role: Lead Product Designer
Scope: UX strategy, interaction design, user research
Tools: Figma, Miro, Mixpanel, Typeform
Timeline: ~4 months
Team: Product Manager, Frontend Engineer, Backend Engineer, Creative Director
I led a complete redesign of the Katalyst mobile app to unify its visual language with our hardware and marketing, streamline workout discovery, and establish a scalable design system. The result was a cohesive brand experience, faster workout selection, and a foundation for rapid, consistent feature development.
Problem & Context
Katalyst’s EMS training app is the core touchpoint for delivering workouts, connecting to the EMS Suit hardware, and guiding users through sessions.
Over time, the app’s visuals drifted from the company’s hardware and marketing aesthetic, creating a fragmented brand experience that weakened perceived value. Meanwhile, our 400+ workout library had outgrown navigation patterns built for a much smaller catalog, leaving users frustrated and delaying workout starts. Analytics showed friction in navigation and workout discovery, so we combined surveys with usage data to map the pain points and rework the information architecture.
On top of that, UI components lacked consistency, forcing engineers to rebuild patterns for each new feature. These usability and brand gaps posed risks to user retention and slowed our ability to ship new features like group training, commercial use cases, and subscription services.
The Challenge
How might we create a cohesive, premium app experience that is visually aligned with Katalyst’s brand, easier to navigate, and scalable for the next generation of features?
My Reponsibilities
I led the end-to-end UX process, including:
Leading the UX/UI redesign from discovery to delivery
Conducting a full audit of current flows, visuals, and navigation pain points
Collaborating with product, engineering, and creative to ensure feasibility and brand cohesion
Built a centralized, reusable Figma-based design system
Research & Insights
I combined:
UI inventory and brand alignment audit
Mixpanel usage analysis to identify navigation friction points
User interviews focused on workout discovery pain points
Competitive landscape analysis
Key insights:
Brand mismatch diluted the perceived premium value of the product
Workout discovery averaged 7.7 minutes, leading to frustration and delayed starts
Inconsistent UI patterns slowed engineering and led to feature-by-feature visual drift
Strategy & Prioritization
We prioritized three parallel workstreams:
Brand & Aesthetic Alignment: Ensure the app visually matches Katalyst hardware, website, and marketing
Navigation & Catalog Redesign: Reduce time-to-workout and make discovery intuitive
Scalable Design System: Create reusable components to speed development and maintain consistency
Constraints:
Launched in under 4 months while balancing ongoing feature development, achieved entirely through front-end and design system updates without backend architecture changes.
Design Solutions
1. Brand Alignment
Unified color palette, typography, and iconography to match hardware and marketing assets
Introduced motion and micro-interactions to reflect Katalyst’s “futuristic and empowering” identity
2. Workout Catalog Navigation
Structured filtering, sorting, and curated workout collections
Redesigned workout cards for improved scanability
Surfaced most relevant programs and workouts first, reducing decision fatigue
Limited horizontal scroll to 5 workouts (mobile) and 10 (iPad) per category, with a “See All” button - preventing endless swiping across categories with 100+ workouts
Expanded list view supports filtering within categories, giving users more control and reducing time spent browsing large catalogs
3. Scalable Design System
Built a centralized Figma library of reusable components
Standardized layout, typography, and interaction patterns
Established clear guidelines for future features like subtitles, group training, and accessibility modes
Results & Impact
Navigation Efficiency: Reduced average time to start a workout from 7.7 minutes to 6.8 minutes
Engineering Velocity: 95%+ component reuse for new features, reducing build time and ensuring visual consistency
Accessibility Upgrades: Introduced light/dark modes for different visual needs (e.g., astigmatism), standardized font sizes and layout order, and ensured minimum 4.5:1 color contrast ratios across the system
Visual Cohesion: App now feels fully integrated with Katalyst’s premium ecosystem
Business Impact: Strengthened brand perception, improving user trust and retention potential
Collaboration
Engineering: Partnered to ensure new navigation and design system could be implemented without backend architecture changes
Creative Director: Maintained alignment with Katalyst’s premium visual identity
Product Management: Balanced user experience goals with business priorities and timeline constraints
Reflection
This redesign was more than a visual refresh - it was a strategic investment in Katalyst’s future. By aligning aesthetics, simplifying navigation, and building a scalable design system, we improved usability today while enabling rapid, consistent innovation tomorrow.
Aligning the app’s brand and usability with Katalyst’s premium EMS hardware repositioned the product from a workout utility to a cohesive lifestyle platform - a shift that deepened engagement and supported long-term subscription retention.