BrightFIT UX / Product Design

Career Growth, Guided

A career platform for mapping skills, role fit, and next-step training.

Read the case study
Project BrightFIT
Discipline UX strategy, product design, UI system
Product Focus Skills gaps, role fit, learning plans
Design Output Desktop flows, mobile components, style guide

Product Flow

One connected loop from resume to learning plan.

Starting Question

What should I learn next?

  1. 01
    BrightFIT resume upload onboarding screen

    Profile Signal

    Capture a baseline

    Resume upload starts the skills model.

  2. 02
    BrightFIT proficiency slider for a newly added skill

    Skill Confidence

    Qualify the signal

    Users add skills and rate proficiency.

  3. 03
    BrightFIT role score with synopsis for a product manager role

    Role Intelligence

    Explain the fit

    Role pages connect scores to evidence.

  4. 04
    BrightFIT learning plan course recommendation page

    Learning Action

    Make growth tangible

    Recommendations become a learning plan.

Outcome

A prioritized plan around the gaps that matter.

Onboarding

Onboarding built for momentum.

Resume upload keeps setup fast, then guided review lets users confirm what the system found.

  • Clear progress through setup.
  • Upload, validation, and error states.
  • Suggested skills to accept or edit.
BrightFIT onboarding screen showing additional suggested skills
Suggested skill review reduces blank-page effort after resume extraction.
BrightFIT resume upload error state
Upload error state
BrightFIT confirm details validation state
Validation feedback
BrightFIT create account onboarding screen
Account creation

Role Fit

Scores lead into evidence.

BrightFIT product manager role page showing skills fit and skill gaps
BrightFIT Score 9.5

The role view pairs the fit score with synopsis, skill categories, tooltips, and comparison tables.

Skills match Market outlook Hiring signal Gap actions
BrightFIT skill gap table with proficiency, outlook, and learning-plan toggles
Gap tables turn role comparison into a prioritization tool.

Skill Gaps

Skill gaps become choices.

Each row helps users inspect demand, compare proficiency, and add the skill to a plan.

  • Scannable market data.
  • Demand shown visually.
  • Actions kept close to insight.

Learning Plan

The loop closes with learning.

BrightFIT learning plan with expanded course details and reviews

Course cards support filtering, comparison, expansion, progress, and related recommendations.

Filter

Free, paid, category, and sort controls.

Inspect

Instructor, rating, progress, reviews, and description.

Continue

Related courses keep momentum.

Interface System

A bright, structured UI system.

#00465E #1183AB #31F8BC #DF0B65 #FF8B0C #FFED26
BrightFIT HTML style guide showing colors, typography, buttons, inputs, and tooltips

Responsive Components

Skill card, in motion.

Skill Card States

One component carries add, search, rate, and confirmation moments.

Start Search Rate Added
Scroll

Collateral Wall

Artifacts across the platform.

BrightFIT sign in page
Sign in
BrightFIT my skills dashboard
Skills dashboard
BrightFIT role exploration page
Role exploration
BrightFIT market outlook details for a recent role
Market outlook
BrightFIT learning plan search and remove state
Course search
BrightFIT my courses concept page
My courses

Takeaway

Design as translation.

BrightFIT translates career uncertainty into clear decisions: profile, compare, prioritize, learn.