SkillBridge
Connecting Learners With the Right Instructors
SkillBridge is a learning platform that helps people discover new skills and connect with trusted tutors—online and in person. I led the end-to-end UX/UI design to turn an overwhelming journey into a clear, trustworthy, and flexible experience for learners.
Project at a Glance
Problem
Learners feel overwhelmed when choosing tutors or classes. They struggle to compare options, understand pricing, assess credibility, and complete a booking with confidence. Existing platforms often separate online and in-person learning and rarely provide clear decision-making cues.
Goal
Design a learning experience that is simple to navigate, transparent about pricing, and flexible enough to support different schedules, locations, and learning styles.
Solution
SkillBridge designed into a streamlined platform where learners can easily discover skills, filter by what matters most, view trustworthy tutor profiles, and book through a familiar checkout-style flow.
Role
UX / UI Designer
Duration
8 Weeks
Team
4 Designers
Tools
Figma, Miro, Photoshop
01 — Overview
THE PROCESS
Design Process
Our 5-week design sprint followed an iterative process across four phases. We moved back and forth between research, definition, design, and validation to refine the experience.
Understanding Learners & the Market
Methods
Desk research on existing tutoring and course platforms.
Competitive analysis of onboarding, filters, and booking flows.
Exploration of trust and pricing patterns.
Survey
We collected 77 responses from learners who recently took classes online or in person. Our goal was to understand how they discover tutors, what gets in the way, and what builds trust.
71% struggled to identify trustworthy tutors.
63% felt platforms didn’t match their schedule or budget well.
Many users wanted clearer filtering and simpler booking flows.
Most platforms focused on either online or in-person learning, not both.
Interviews & Affinity Mapping
To deepen our understanding of learner behaviour, we conducted six semi-structured interviews with people who had previously tried to learn new skills through online or local tutoring. Our goals were to uncover emotional drivers, decision-making processes, and friction points along the journey from discovering a class to booking a session.
After capturing more than 180 qualitative data points, we used an affinity mapping exercise to cluster insights into recurring themes such as trust, scheduling, cost, and previous experiences with online learning. This helped us move from isolated quotes to system-level patterns that could inform the product strategy.
Matching confidence: Make it effortless for learners to discover the right tutor based on learning goal, language, availability, budget and proximity. This reduces uncertainty and shortens the time between interest and booking.
Credibility: profiles felt incomplete or generic.
Flexibility: difficulty aligning class time and budget
Decision fatigue: too many steps before clarity.
These patterns shaped both the information architecture and interaction design to increases conversion and supports long‑term engagement with SkillBridge.
Competitive Analysis
The third step in our research involved identifying successful patterns in current products and missing gaps. We explored different products and narrowed them down to four top competitors: Superprof, Domestika, Wyzant, and Udemy. As a team, we analyzed the good and the bad of each competitor and determined how they present their features.
Key Insights
Platforms like Udemy and Domestika make discovery easy but lack local, one-to-one teaching.
Tutoring platforms such as Wyzant or Superprof are powerful, yet often feel complex and expensive for casual learners.
Trust signals (reviews, badges, verified profiles) strongly influence decision-making.
Strengths
Clear search and filtering systems.
Ratings and reviews for social proof.
Simple “Add to cart” or quick booking flows.
Opportunities
Combine online and local classes in one place.
Emphasize location, language, and affordability together.
Create a calmer, more friendly UI for beginners.
Use a simple, checkout-style flow for booking
Persona & Scenario
In order to establish tasks for our design, and to communicate information about the users that we collected during research, we developed a persona and a scenario.
Information Architecture
Structuring the Experience
We structured the platform around one main journey: from discovering a skill to booking a class with confidence. This kept the information architecture focused and reduced decision fatigue.
User Scenario
Sara discovers SkillBridge while searching for painting classes. She wants to quickly see what’s available, compare a few tutors, check schedules against her evenings, and book without worrying about hidden costs or complicated steps.
The experience must guide her through a calm, predictable flow where each step makes the next decision easier instead of harder.
Primary User Flow
Search for a skill or browse featured categories.
Apply filters for location, language, and budget.
Compare tutors, ratings, and availability.
Select one and choose a time slot and confirm class details.
Complete payment and receive confirmation.
Design Principles
Clarity first – show essential info up front.
Familiar patterns – use e-commerce-style checkout flow.
Progressive disclosure – reveal details as users need them.
Trust at every step – ratings, reviews, highlights, and safety signals.
Sketches & Low-Fidelity Wireframes
Early low-fidelity sketches allowed us to quickly explore layouts for skill discovery, tutor profiles, and booking steps. We tested different positions for filters and calls-to-action, focusing on reducing visual noise.
Mid-fidelity wireframes helped align the team on hierarchy and content structure before investing in detailed UI.
Final User Flow
Find Category → Select Painting Class → Read Details → Add to Cart → Checkout
Moodboard & UI Design System
Visually, we wanted SkillBridge to feel energetic and optimistic while staying calm enough for learners of all ages. Purple became our main brand color to represent creativity, paired with warm accents and soft neutrals.
We built a UI system to keep the product consistent and scalable: typography styles, color tokens, buttons, cards, and iconography.
High Fidelity Mockups
After validating the flows, we moved into high-fidelity design and refined the details of each core screen: homepage, search, tutor profile, booking, and payment confirmation—across both desktop and mobile.
Final High-Fidelity Designs of Some Desktop Pages
Final High-Fidelity Designs of Some Mobile Pages
Usability Testing and Iteration
Validating the Experience
Key Findings & Changes
1️⃣ Learning Categories as the Primary Entry Point
Users came to SkillBridge looking for specific skills — like Acrylic Painting — not tutors. They ignored tutor-focused hero content.
What changed
→ We prioritized skill categories at the top of the homepage
→ Clear visual icons + labels for faster scanning
→ One-tap entry into painting category
Version I
Version II
Version III
First Task Result
Updated Version
The final concept for SkillBridge enables users to quickly discover and book the right Acrylic Painting class through clear skill categories, easy course comparison, and a simplified checkout experience. Learners can explore a variety of creative courses, review class details with confidence, and add sessions to their cart with a familiar, friction-free purchase flow.
Key Takeaways — What We Learned
• Prioritizing skill categories (e.g., Acrylic Painting) reduces decision friction and speeds discovery
• Class cards must highlight essential decision details: format, level, rating, and price
• Showing valuable info early improves user confidence before they invest time reading details
• A simple “Add to Cart” checkout flow feels intuitive and reduces hesitation
2️⃣ Focus on Course Discovery
Users needed to compare classes first, and only then look into tutor details if necessary.
What changed
→ Course cards now surface the key decision info:
• Skill type (Acrylic Painting)
• Session format (Online / In-Person)
• Price
• Reviews
→ Tutor details are moved inside the course as supporting information.
Old Iteration– filters hidden in dropdowns and visually disconnected from course results. Users often missed which filters were applied.
Refined Iteration– filters surfaced and grouped clearly, with visible result count. Users quickly understood how their choices shaped the Painting & Drawing results.
Second Task Result – Filters for Painting & Drawing
Before (1 – Old Iteration)
In the first version of the Painting & Drawing results page:
The filter panel on the left was collapsed into dropdown sections (“Filters” with accordions).
Users saw the course cards but couldn’t easily tell which filters were available or applied.
There was a lot of empty space between the filter area and the course grid, so their eyes went straight to the cards and they ignored the filters.
During testing, several participants had to “double-check” the left panel or forgot which options they had selected.
Result: Users weren’t fully confident that they were seeing the right set of Acrylic / painting classes.
After (2 – Refined Iteration)
In the refined version after usability testing:
The filter column is always open and fully labeled (“Type of Class”, “Category”, “Level”, “Price Range”, “Minimum Rating”, “Language”).
Checkboxes and the price slider are immediately visible, so users understand at a glance how they can narrow down Acrylic Painting classes.
The title “Painting & Drawing – 6 courses found” gives clear feedback that filters have been applied and how many results they’re affecting.
The visual gap between filters and courses is reduced, which creates a stronger connection between the left panel and the course grid.
Result: Users understood which filters were controlling the results and felt more confident exploring and comparing painting classes.
3️⃣ Clear Date–Time Matching During Scheduling
Users struggled to see which times belonged to the selected date.
What changed
→ Dates and times are now visually connected
• Selecting a day highlights matching weekday slots
• Available times appear instantly on the right
• Filters stay open and clearly labeled
→ Creates a clear, predictable flow for choosing the right class time.
Old layout – Users struggled to understand which time slots were associated with the selected date. The date and time options were visually disconnected, causing confusion and extra clicks to find availability.
Refined layout – Selecting a date now highlights all available sessions for that weekday, and corresponding times are shown instantly. This clear visual connection improves efficiency and confidence during scheduling.
Third Task Result – Users Struggled to Match Dates with Available Times
Goal: Schedule a class at a suitable date & time
In the first design (Version 1), users were unsure which class times corresponded to which selected day:
The calendar and time selector were not visually connected
Users clicked multiple dates to hunt for availability
The heatmap showed high confusion around the calendar area
Feedback: “I don’t know which day actually has this time…”
This resulted in hesitation and slowed booking decisions.
Design Improvement — Clear Visual Mapping Between Date & Time
In the updated version, we improved comprehension and flow by connecting interactions:
When a user selects a date :
➡ All matching weekday slots are highlighted in the calendar
➡ The paired available class times are immediately revealed on the right
This gives users a clear mental model of availability. In the refined version after usability testing:
The filter column is always open and fully labeled (“Type of Class”, “Category”, “Level”, “Price Range”, “Minimum Rating”, “Language”).
Checkboxes and the price slider are immediately visible, so users understand at a glance how they can narrow down Acrylic Painting classes.
The title “Painting & Drawing – 6 courses found” gives clear feedback that filters have been applied and how many results they’re affecting.
The visual gap between filters and courses is reduced, which creates a stronger connection between the left panel and the course grid.
Result: Users understood which filters were controlling the results and felt more confident exploring and comparing painting classes.
Deliver
Final Prototype
The final experience follows a streamlined path:
Discover Skill → Select Category → Filter Results
Compare Tutors → View Class Details
Choose Time → Checkout → Confirmation
This e-commerce-inspired structure reduced cognitive load and made the process feel familiar and trustworthy.
Final Experience & Learnings
The final concept for SkillBridge brings together clear discovery, rich tutor profiles, and a streamlined booking flow. Learners can quickly filter tutors by what matters most to them — location, language, price, and schedule — and feel confident when booking a class.
Key Takeaways
Balancing user needs with business goals is crucial when designing pricing, credits, and rewards.
Small adjustments in hierarchy and microcopy can significantly improve trust on tutor and payment screens.
Iterative testing, even with a small group, reveals patterns that aren’t visible from design alone.
Expected Impact
Learners can discover Acrylic Painting and other creative classes faster through simplified category navigation.
Clearer class cards and familiar checkout patterns improve purchase confidence and reduce hesitation.
A more scalable structure supports the expansion of creative skills and future filtering enhancements.
What I Learned
Visually aligning filters and results dramatically impacts perceived clarity and trust.
Small UI changes (labels, spacing, visibility) can make users feel more in control of decisions.
Frequent user feedback helps validate assumptions and remove unnecessary complexity.
What I’d Explore Next
Support more detailed class scheduling visibility to help users pick the best time faster.
Add personalized recommendations based on skill level or related painting styles.
Test additional filter layouts (chip-based, sticky bar for mobile) to further reduce cognitive load.
Expand beyond painting to other creative skills once the model is validated.
