UX / UI · Product Design
A product design case study exploring how to unify fragmented learning into one clear career growth experience.
My Role
Solo Product Designer
Tools
Figma, FigJam, Notion,
Figma AI, Claude AI
Platform
Mobile
Deliverables
Research, Information Architecture, Task Flow, Wireframes, High-Fidelity UI, Interactive Prototype
Overview
StageUp is an original product design project created to solve a problem I experienced firsthand as a learner. Professionals today learn from multiple platforms at the same time. Coursera, Udemy, YouTube, and LinkedIn Learning are all great on their own. But each platform tracks progress independently, leaving learners with no single place to understand their overall skill growth or how close they are to their career goals.
This case study walks through my full design process. Starting from identifying the core problem through research and information architecture, to wireframing, high-fidelity design, and an interactive prototype. The result is a product that connects fragmented learning to real career outcomes.
Problem
Learners building professional skills today face a fragmented experience. Using multiple platforms at the same time creates challenges that go beyond just staying organized.
Learning progress is scattered across platforms with no unified view.
Learners using multiple platforms must manually check each one separately, a process that is time-consuming and often abandoned.
Each platform measures progress in a completely different way.
Some platforms use certificates, others use percentage watched, hours logged, or no tracking at all. This inconsistency makes it impossible to get a true picture of overall development.
Finishing a course does not tell you how close you are to your career goal.
Most platforms focus on course completion rather than long-term skill development. Users are left to make the connection between their learning and their career ambitions entirely on their own.
Without visible progress, learners lose momentum and stop.
When growth feels invisible, it is easy to believe you are not making progress even when you are. Motivation drops and learning frequency decreases over time without a feedback loop that shows real growth.
Learners struggle to prove their skills when applying for jobs.
With progress spread across five different platforms, there is no single profile that shows what a learner actually knows. This creates real barriers when communicating skill level to potential employers.
Solution
StageUp acts as a connective layer between learning platforms. It syncs learning activity from Coursera, Udemy, LinkedIn Learning and others, maps everything to a unified skill profile, and recommends next steps based on the user's career goals.
Rather than replacing existing platforms, StageUp makes them work together. Users get one place to understand their growth, track their progress across all platforms, and stay motivated toward a real career outcome.
Connects to multiple platforms and pulls in learning activity automatically.
Translates completed courses into skill tags such as UX Design, Data Analysis, and Product Strategy.
Shows how skills are developing over time through charts and progress indicators.
Compares current skills against a chosen career goal and highlights what is missing.
Suggests the next course or learning path based on where the user is and where they want to go.
Consolidates all earned skills into a single profile users can share with employers, turning fragmented learning into visible, provable growth.
Persona
Before defining how the solution would work, I needed to understand exactly who I was designing for. Sarah represents the core user who experienced every problem StageUp was built to solve.
Sarah Mitchell, 26
The Ambitious Career Switcher
Sarah is a marketing coordinator transitioning into UX design, learning across Coursera, Udemy, and YouTube with no clear view of her progress or how far she is from landing her first UX role.
Research
Sarah's experience was not unique. Research across the major platforms that professionals use most confirmed the same patterns at scale.
Through a competitive analysis of Coursera, Udemy, LinkedIn Learning, and YouTube, I evaluated how each platform handles progress tracking, goal setting, and skill visibility — and identified what was consistently missing across all of them.
Learners understand the product faster when onboarding is structured and goal-oriented.
Platforms that drop users directly into a course library see significantly higher drop-off rates. A guided first experience that communicates the product's value leads to stronger retention and more active long-term usage.
Connecting learning to a real career goal keeps users engaged longer than generic recommendations.
Users are more likely to return and continue when every recommendation feels relevant to where they want to go. Generic course suggestions do not create the same sense of purpose as a personalized path tied to a specific career outcome.
Seeing growth visually makes progress feel real and worth continuing.
Charts, milestones, and skill indicators sustain motivation far better than text-based summaries alone. Platforms that use visual progress tracking consistently see higher completion rates and stronger daily engagement.
Mobile users need information that is scannable and immediately meaningful.
Most learners check their progress quickly during short breaks or commutes. Complex, data-heavy screens with buried menus cause frustration on mobile. The first screen a user sees needs to answer one question instantly: how am I doing?
Challenge
The research made one thing clear: the core problem was not behavioral. It was structural. Different platforms track learning in completely different ways, with no universal standard to work from.
tracks progress through certificates and course completion.
tracks progress through percentage of video content watched.
tracks progress through hours spent learning.
has no progress tracking at all.
The challenge was: how do you take four completely different data formats and turn them into one meaningful skill profile?
StageUp solves this by converting all learning activity into skill tags weighted by engagement depth. Completing a full course sends a strong signal. Watching part of a video sends a lighter signal. Courses that include hands-on projects carry a higher weight than passive video content.
This creates a dynamic skill profile that reflects what users actually know, not just what they started or clicked on.
This was the most important systems design decision in the entire project. Without solving this, the rest of the product could not exist.
Structure
With Sarah's journey mapped and the core data challenge solved, I could define the full product structure. The IA reflects exactly how a user like Sarah moves through the product, from first landing on the app to connecting her learning platforms and reaching her personalised dashboard. It separates the pre-login marketing and auth experience from the post-login product experience.
Pre-login covers the landing page, features, pricing, and authentication. Post-login begins with onboarding where users connect their learning sources and set their career goal, then moves into the main dashboard.
The most critical onboarding action is connecting a learning platform. Without learning data the product cannot generate skill insights or personalized recommendations. The flow includes a recovery path in case the platform connection fails, ensuring users are never stuck without a next step.
Design Process
I started with low fidelity wireframes to establish the core structure, layout, and user flow before introducing any visual decisions. The focus at this stage was entirely on getting the screens and navigation right. The wireframes cover two areas: the onboarding and home experience, and the main dashboard and profile views, which became the foundation for the mid-fidelity prototype.
From the wireframes I moved into mid fidelity, introducing real content, refining the visual hierarchy, and defining the core UI components. I then tested this prototype with 5 participants, asking each to complete key tasks: connecting a learning source, setting a career goal, and navigating the dashboard.
Two clear issues came out of those sessions, both of which directly shaped the high-fidelity design.
Sign-Up Flow Was Confusing
One participant hesitated at the sign-up step after entering their email and found it unnecessary. The distinction between new and returning users was unclear.
Fix → Split into two separate screens: "Get Started" for new users and "Log In" for returning users, each with its own dedicated flow.
Greyscale Felt Flat and Disengaging
Two participants found the greyscale palette hard to connect with emotionally. One described the app as feeling visually plain and suggested colour would make it feel more polished.
Fix → High-fi introduced a full colour system: primary green for growth, colour-coded icon backgrounds, real course imagery, and stronger typographic hierarchy.
To measure usability, I ran a UMUX-LITE questionnaire with all 5 participants after testing. The score came back at 88.33, a Grade A result, confirming the design was performing well despite the two issues identified. Those issues became the direct brief for the high-fidelity redesign.
View in Figma →
The high fidelity design directly addressed what the mid-fi testing revealed. I separated the sign-up and login flows, introduced a full colour system, and strengthened the visual hierarchy across every screen. The result was tested again and confirmed the improvements had landed.
After completing the prototype, I also ran an accessibility check on the colour system. The original green failed WCAG AA, so I replaced it with a darker green that passes. This fix was applied consistently across every button, active state, and progress indicator.
#00DB4F
Contrast ratio: 1.86:1
Fails WCAG AA#15803D
Contrast ratio: 5.01:1
Passes WCAG AASign-Up Flow Was Clear
The split between "Get Started" and "Log In" removed the confusion from mid-fi. Users immediately understood whether the app was treating them as new or returning.
Visual Design Landed Well
Users described the interface as clean, motivating, and easy to use. The colour system addressed the flatness flagged in mid-fi testing.
Skill Chart Was Highly Engaging
Users found the 8-week skill growth chart compelling and said it made them want to keep learning.
Felt Like a Real Product
Multiple participants said StageUp felt like something they would download and use immediately.
View in Figma →
Decisions
Research showed visual progress motivates learners far better than text summaries alone. I used an 8-week chart so users see momentum building over time.
Platforms with visual tracking consistently see higher completion rates and daily engagement. A static number is easy to ignore. A chart that grows is not.
Research confirmed goal-driven personalisation keeps users engaged longer. I made the career goal the anchor of every screen. The dashboard always shows how far the user is and what is still missing.
This turns course completion from a finish line into a stepping stone. Instead of "I finished a course," the user sees "I am 67% of the way to becoming a UX Designer."
Mid-fi testing showed users were confused by a combined sign-up and login screen. I split them into two dedicated flows: "Get Started" for new users and "Log In" for returning users.
High-fi testing confirmed the fix worked. Users immediately knew which path was theirs without hesitation. One confusing screen was the only thing standing between a new user and the rest of the product.
I designed the home screen so users can see Skill Growth, Weekly Activity, Current Streak, and Goal Progress all above the fold with no scrolling needed.
The decision was: what are the 4 things a learner needs to know the moment they open the app? Each card answers a different question: how am I growing, how active am I, am I consistent, and how close am I to my goal.
Reflection
StageUp taught me that the hardest design challenges are structural, not visual. The biggest problem was not how the product looked. It was how to create a meaningful system from learning data that was never designed to work together.
Reframing the problem was the most important decision I made. Users do not want to simply sync their learning platforms. They want to become UX designers, get promoted, or transition into new careers. By focusing on career goals rather than course completion, StageUp transforms fragmented learning activity into a clear path for growth.
Designing a long term feedback loop where the product becomes more useful the more it is used was the most valuable lesson from this project.
A smarter recommendation engine that learns from user behavior over time and suggests the most impactful next step toward their career goal.
Connecting skill profiles to real job requirements so users can see exactly how their learning maps to roles they are applying for.
Allowing users to share their skill profile publicly, giving them a way to demonstrate real growth to employers beyond a traditional resume.