Fitness App Conversion Flow

Signup and subscription process to boost app downloads
Role
Product Design Intern
Skills
UX Design
Rapid Prototyping
Duration
Aug 2022 (3 weeks)
Collaboration
Product Designer
Project Manager
Tools Used
Figma
Webflow

Overview

The Problem

The client emerged as an early-stage, subscription-based AI fitness coaching mobile app following a split from its founding company. The new team needed to build a comparable product from the ground up while establishing an online landing page to acquire users. Client and UI details are omitted due to NDA.
‍
With the app creation in flux, the client sought a landing page concept that could provide clarity on what information, flow, and design direction would best support marketing efforts—while also aligning with the evolving app design and build process.

The Solution

I used the existing visual language and design system, extending the design build on a marketing landing page with a sign-up and download experience.

To bring the concept to life, I built the page and flows in Webflow, delivering a functional prototype that not only demonstrated the potential direction of this initiative but also gave the client a tangible tool to align on.

Impact

+10%
SPRINT PROFIT
+75%
TEAM ALIGNMENT
+40
DEV HOURS SAVED
OverviewContextHighlightResearchEvaluationFinal DesignReflection

Context

Accelerated Delivery Window

I joined the project with only three weeks left and multiple workstreams in motion.

To ensure momentum, I reviewed the project's Statement of Work (SOW) to understand our objectives, deliverables, tasks, timelines, and resources. I synched with the lead designer and engineer to quickly identify lagging support areas, allowing the current team to stay focused on designing and building the app.
The client needed a way to market their product and acquire users, but evolving features, limited resources, and the request for a functional proof of progress posed as constraints to consider moving forward.

Project Framing

Highlight

Before

The lead designer had drafted a landing page in Figma using the style guide and design system. However, the subscription flow and app download path were not represented, and the static wireframes lacked interactivity. This gave the client less clarity on the product’s flow and entry points.
I designed the subscription, account creation, and app download flows in Figma the Webflow parity in mind (e.g. Stripe integration). The result was a clear, visually engaging, and interactive rapid prototype that gave the client a tangible experience of the full user journey.
No sign up and download flow
No subscription purchase flow

Final Design

Research

I held several synchs with the lead designer who served as primary client point of contact to identify the key areas they was requesting signal on and what her coverage abilities were. I consolidated these factors into several key points to frame my workflow.
Landing Page
Landing page lacked interactive flows, obscuring user engagement signals and progress tangibility.
Client Gap
Bridge concept to final product for clients, or risk eroding confidence and clarity on future requirements.
Rapid Results
Timelines demand rapid design, testing, and implementation, requiring swift execution.

The Strategy

Cross-Team Alignment

With these insights in mind, I proposed a strategy to tackle these final 3 weeks to ensure our endpoints were met:

Evaluation

Design Review

I rapidly built out the subscription, account creation, and app download flows in Figma using the existing design system, connecting with the lead designer for a reivew before implementing them in Webflow.
Account Creation
A key takeaway was achieving a balance between visual weight and information density on the account creation path.

The first iteration had too many mockups, causing visual overload and weight imbalance. The second iteration had too few visual elements and an carousel that required multiple clicks to view all content. Iteration three effectively showcased key app features and utilized accent elements to draw attention to important areas.
App Download
A primary recommendation was to incorporate inviting language, maintain visual consistency, and include clear 'Download' CTAs.

Iteration one had a dark color scheme that obscured the Apple download prompt. Iteration two matched the visual style but lacked inviting language. The third iteration addressed these issues, using clearer language and visual adjustments to encourage downloads on both Apple and Android as availability was pushed.
Subscription Overview
Visibly displays each subscription type, with the recommended payment type highlighted, guiding user decisions and reducing friction.
Create Account
Easy account creation with clear Terms and Conditions and Privacy Policy, ensuring a secure and transparent experience
Subscription Payment
Stripe integration enables seamless payment processing with fluid Webflow integration, simplifying payment details and management.
App Download
Promotes mobile app download via inviting language and App Store and Google Play badges, with visuals showcasing the app's UI.

Final Design

With under a week left, I built directly from high- fidelity Figma into Webflow, delivering a functional prototype with user management and payments. While some integrations were not fully built out, the web app gave the client immediate value and clarity.
Landing Page
Phase Selection
Assessment Introduction
ECD Language Guide
Phase One: See The System
See The System Question One
See The System Question Three
See The System Question Four
See The System Question Two
Assessment Results

Reflection

Sprint Retrospective
The sprint finished strong 🥳! The client was high satisfied, and my proposal and use of Webflow boosted team alignment by 75% and saved developer hours. This enabled us to finish a week early, resulting in a 10% profit increase.
What I Learned
Rapid tool adoption can drive project success: Quickly learning and implementing a new tool like Webflow can be crucial in meeting client needs and delivering a high-quality outcome, even with limited time and resources.

‍Creative problem-solving under constraints: With limited design bandwidth, developer capacity, and an evolving design, I learned to prioritize and adapt, finding solutions that met client needs while managing project constraints.
Wave
EquityUp

Thanks for stopping by, feel free to explore my other projects!

2025 © SAMI FOELL
LINKEDINEMAIL