SkillCat · Online Learning
An all-in-one HVAC learning platform.
One platform, two surfaces; the consumer mobile app learners use to earn a credential, and the B2B web dashboard employers use to train their teams.
SkillCat is a skilled-trades training platform: people learn HVAC, electrical, or plumbing to earn the certifications that get them hired, and employers use it to train their teams.
I worked across both surfaces as a product designer (the mobile + desktop learner redesign and a new admin dashboard for employers) and wrote the specs that translated those decisions into something engineering could build.
01 · The Starting Point
The original app: a deep catalog, but no clear path.
The library and the certifications were all there, but the experience was catalog-first. Learners landed in a wall of categories and had to assemble their own route to the credential that actually gets them hired.
What wasn't working
- 01
Catalog-first: learners landed in categories (EPA 608, Trade School Diplomas…) with no guided path.
- 02
The credential that gets you hired was hard to find among everything else on offer.
- 03
Little sense of progress or "what's next": easy to enroll, easy to drift.
- 04
A five-tab nav (Social, Skill Check, Class, Simulations, Profile) split attention away from the goal.
02 · Research & The Landscape
Trade learners are outcome-driven.
Trade learners study HVAC, electrical, or plumbing to earn a certification and a better paycheck, often early-mid career and learning on the job. Step one: get the vocabulary right (OJT, EPA 608, HVAC) so the product sounds like the trade, not edtech.
Talking to the trades
Before redesigning a single screen, I went to the source. I texted around 30 trade workers and SkillCat users a day for two weeks, and ran longer Zoom interviews with a couple of them. Texting let me meet people where they were, between jobs and on their own time, so I heard from far more of them than scheduled calls ever could have.
~30/day
Trade workers & active users texted, every day for two weeks
100%
Async by design: replies came on their own time, between jobs
2
In-depth Zoom interviews for the full story
"Get the certification and land a job right away: quick, easy, and usable, so I can get back to work. The safety trainings I've done are archaic, boring videos you click through, not absorb."
"On-the-job experience can't be replaced by videos. When I'm stuck it's manuals first, then Reddit, but experience is what narrows a problem from 30 possible causes down to 3."
What I heard
01
Outcome-driven
Get the cert, get the job, get the raise. Learning is a means to a paycheck and seniority, not points or streaks for their own sake.
02
Learn by doing
Skills come from the job, plus YouTube, manuals, Reddit, and a mentor. Formal school is slow and pricey, and "archaic" videos lose them fast.
03
"...then what?"
The loudest anxiety: does finishing the courses actually get me hired? The path from learning to resume to job isn't closed in their heads.
Direct, trade schools & cert providers (Interplay Learning, Penn Foster, HVACR School): credible but corporate and dated.
Indirect, consumer learning apps (Coursera, Skillshare, Duolingo): polished and habit-forming, but mostly light and soft.
What the scan told me
- Duolingo is playful and habit-forming, but too cartoony to feel credible for older trades users.
- Airbnb uses modern 3D illustration sparingly: warmth without noise, a model worth borrowing.
- Trade-school brands skew corporate and dated: a clear opening for something modern and trustworthy.
- Most edtech is light and gentle; the trades read as practical and high-contrast: a chance to look different and earned.
03 · Finding The Brand
Three brand directions explored
Three directions: bright and playful, light and corporate, dark and industrial. The bright one felt too casual; the corporate one blended in. The dark + safety-orange system felt practical and ownable, closer to the gear and worksites the audience already trusts.
The chosen system
SkillCat, An all-in-one HVAC learning platform.
For $10/month- Access Self-Paced Trade School Programs & Certifications designed to get you job-ready in just a few weeks
Badge — six iterations
The Redesign
04 · Iterating The Experience
4 main iterations: what changed at every step.
Onboarding shifted from a form-first signup to a few guided questions that build a personalized path. Home shifted from a flat catalog to a clear "path to a paycheck." Each round cut friction and made the next action harder to miss.
Home
The first thing learners see when they open the app, where the path forward should be the most obvious thing on the screen.
- Learning plan cards are too tall.
- What if a user has 5+ learning plans? Stacking on the home page overflows.
- Navigation bar is modern but runs into legibility issues.
- Learning plans now look visually different from regular courses.
- Simplified the learning path: one single path stacked on the backend.
- Simplified the navigation bar.
- Simplified the header billing status.
- Simplified the iconography.
- Added a full-width banner for new courses.
- Reverted to a traditional navigation bar.
- Moved Search up into the header.
- Collapsed Start Learning into one card with the course + current task title.
- Added "Path" to the nav: direct entry to the Course Tree.
Course overview
The "about this course" page: what you'll learn and what's inside, before you commit to starting. It has to set the stakes without burying the lesson.
- Added Overview and Lesson tabs.
- Can cycle between courses like the original screen.
- Included hours, recommended, and match stats from the original.
- Skill badges in various colors.
- Moved course title + buttons to the top of the page.
- Kept the course cycling feature.
- Replaced Match % with # enrolled.
- Pulled CTAs into the bottom of the viewport so they're always visible.
- Course image now takes the full width of the page.
- Title and stats moved inside the course image.
- Removed the course cycling feature.
- Simplified the badge colors.
- Combined Add to Path + Start Course into a single Add Course button.
- Changed copy from "Course" to "Certification."
- Removed the course name from the stats block.
- Surfaced the awarded certification(s) upon completion.
Portfolio
The trophy case: earned credentials, in-progress courses, and the proof a learner can show an employer. The payoff for everything before it.
- Large photo card up top.
- Options for selecting a project type.
- Project title, challenge, and result are all typed in manually.
- Added AI suggestions to speed up entry.
- Project type is now selected before starting: the flow is gated upfront.
- Photos take a less prominent role.
- Added audio recording.
- Removed the challenge and result fields.
Course view
Inside a course: the lesson list, your progress, and the next thing to do. The hardest balance: show everything without losing the next click.
- Progress noted on the top banner bar.
- Military motifs gamify the path: badges, trophies, streaks.
- Each node = a full course, with all sub-tasks, quizzes, and finals listed inside.
- Users must complete every step before moving to the next node.
- Updated the course tree UI.
- Simplified the trophy system.
- Each node now = a single lesson with its tasks inside.
- Added a bottom modal for more info.
- Banner now includes the user's progress.
- Removed the gamifying features.
- Simplified the node descriptions.
- Simplified the header: now shows the certification name.
- Removed the top banner entirely for a simpler section header.
"You Passed!"
The moment after acing an exam: the score, the certificate, and what to do next. Got progressively more confident about turning a win into momentum.
- Large success badge as the hero.
- Checkmarks for each completed step.
- Removed the large badge.
- Surfaced the exam score.
- Added more steps to the completion status: reviewing results and receiving certification.
- Removed the quiz / exam title.
- Moved the checkbox steps to a separate page.
- Added a review section covering all questions.
- Renamed "Keep Training" to "Continue" (same destination).
05 · Testing & Insights
Heat Map Testing: 7 participants, 3 flows, and one clear weak point.
An unmoderated Maze study, 7 participants, three core flows: Create Account, Start Course, Edit Path. Starting a course landed cleanly. Editing the path broke down.
Insights
Tree-map nav isn't intuitive
Users weren't sure where to start, or how to preview a path before committing to it.
They click everywhere but the path
Most users hit the nav bar or home course cards before they ever found the path module.
Mobile stalled at Edit Path
Path flows froze and reloaded on mobile. A Maze prototype flaw, but it cost real frustration.
Swipe-to-remove stayed hidden
Some users tapped path cards over and over before discovering the swipe-to-delete gesture.
Potential fixes
Teach the path on arrival
A short first-run walkthrough of the tree map, so the structure clicks before users dive in.
Strengthen the first step
Boost the CTA on the first course module so the starting point is impossible to miss.
06 · The Learner Redesign
Carry a learner from adding a course to earning an EPA 608 certification.
Enrolling is easy. The hard part is carrying someone from picking a course, through lessons and hands-on tasks, into a proctored final exam, and out the other side holding a real EPA 608 certification, without losing them at any step.
Before & After
Full redesigned comparison: drag to see the difference
07 · The Admin Dashboard
Valuable insights for admins too
I helped redesign the employer side as a full dashboard for running training across a team. Assigning courses was reframed from a flat list into a structured plan: pick employees, stack courses in order, set a due date on each. Alongside that: a role-aware Inbox, on-the-job photo review, and a people view that scales past a handful of employees.
Inbox
The admin's command center. Every approval, assignment, and pending action lands in one role-aware queue.
People
Managing the whole team: roles, progress, and bulk actions. Each round pushed it to scale well past a handful of employees.
Create Certification
Where an admin builds a brand-new certification — naming it, stacking the required courses, and publishing it to their team.
08 · Feature by Feature
Four flows that take an admin from assigning a course to grading the work.
Here is the shipped dashboard in motion, one core flow at a time.
A role-aware, unified task system: every approval, assignment, and action an admin owns, surfaced in one place.
Pick employees, stack courses into a sequenced plan with a due date on each row, then review and assign: the three-step plan builder in action.
Review and grade the photos learners submit for hands-on (OTJ) tasks: approve, score, or send it back for another attempt.
Search, filter, and manage the whole team: roles, progress, and bulk actions that scale well past a handful of employees.
09 · Reflection
Working across consumer onboarding, B2B tooling, and specs meant constantly shifting altitude: from a single animation frame, up to an enterprise workflow, back down to the written rules that make it real. The throughline: understand the job the person is actually trying to do, then shape the product around that.