Tools
Figma + Adobe Suite
01 / THE PROBLEM
More resources. Less certainty.
Recent graduates have more ways to learn than ever, but traditional education can be expensive and online resources often lack a teacher, syllabus, or feedback loop. Learners jump between courses, tutorials, and videos—unsure where to start, what to trust, or whether they’re improving.
02 / RESEARCH
7 Interviews
4 Competitors Reviewed
01 / FINDING
Choosing is the first barrier.
Even with visible signals such as reviews and ratings, selection remained a hurdle.
DESIGN RESPONSE
A personalized starting point.
Instead of building another content library, I designed a personalized starting point: a short onboarding quiz that recommends a learning path.
02 / FINDING
Resources are
scattered.
Participants dealt with information overload, resources spread across platforms, and no way to verify a
tutorial’s credibility.
DESIGN RESPONSE
One structured learning list.
I added a way to pull those scattered resources into one structured, curated, and responsive list.
03 / FINDING
Progress needs to be visible.
Learners wanted practical results from their effort, but nothing told them they were improving.
DESIGN RESPONSE
Make momentum tangible.
Affordances such as milestones, weekly schedules, completion screens, became core to the design, along with a community space for peer and mentor feedback.
7/7 Participants
7/7 Particiants
03 / DEFINE
RESEARCH PERSONA / SAVANNAH
The overwhelmed optimizer
26 · Recent graduate · Works full-time
She studies in the evenings to move from intermediate to job-ready. Highly motivated, she keeps starting, stopping, and second-guessing her choices.
“There are so many ways to learn this [this skill] and I don’t know which one is actually right for me.”
01 / HOW MIGHT WE
How might we help users quickly identify where to start when faced with an overwhelming number of learning resources?
FEATURE DIRECTION
Personalized Roadmap
A personalization quiz generates a step-by-step Roadmap for learners who need support getting started or want a curated learning experience.
02 / HOW MIGHT WE
How might we support users who want direct control over their resource management?
FEATURE DIRECTION
Smart Playlists
Scattered links, videos, and files become one structured list—with item counts, time estimates, and completion tracking—for learners who already know what they want to study.
04 / DESIGN
Turning direction into a learning experience.
BRAND IDENTITY
01 / EXPLORATION
Exploring the compass metaphor.
02 / LOGO DIRECTIONS
COMPASS
Directional star / Wordmark and standalone symbol
COMPASS
COMPASS
Learning made easier
Dimensional compass / Wordmark, tagline, and symbol
03 / COLOR SYSTEM
A palette with a purpose.
Primary
Secondary / Red
Secondary / Orange
Neutral Light
Neutral Dark
Primary supports confirmations, orange signals warnings, and red marks errors.
The palette currently has no dedicated success color—a consideration for future status-heavy screens.
04 / MID FIDELITY PROTOTYPE AND HIGH FIDELITY PROTOTYPE
Personalization Quiz
A five-to-ten-minute quiz captures study interests and learning preferences, then recommends a “Best Match” Roadmap. The learner’s input does the narrowing for them.
AFTER TEST OBSERVATION / BRANCHING FEATURES
Based on user testing, we updated the home screen to offer multiple navigation paths instead of forcing users directly into the personalization quiz. Testing revealed that some users wanted immediate access to the Smart Playlist feature without the barrier of a mandatory quiz.
Early wireframes used pagination. I compared it with continuous scroll to find a more flexible way to browse a Smart Playlist.
Smart Playlist
AFTER TEST OBSERVATION / CONTINUOUS SCROLL
Continuous scroll felt less cognitively taxing and avoided a false sense of “done” at each page break. Spotify’s playlist behavior provided a useful reference.
05 / TEST
Testing beyond task completion.
I ran moderated usability tests with 4 participants across all four high-fidelity flows: onboarding and Roadmap creation, completing a Roadmap lesson, creating a Smart Playlist, and joining a community group.
TASK COMPLETION / ALL FOUR FLOWS
THE SURPRISE
The number hid real confusion.
Several participants finished their tasks while misunderstanding how the product was structured. One major barrier was the difference between Roadmaps and Smart Playlists.
01 / ONBOARDING
Clear direction from the quiz.
The experience was directed and all users successfully completed and understood the quiz. One user suggested potentially expanding the quiz further.
02 / ROADMAPS
The next step wasn’t clear.
This feature contained the deepest issues. Participants weren’t sure whether they were reading instructions or being asked to act, and one had real anxiety about what would happen if she got a quiz question wrong.
03 / SMART PLAYLISTS
Useful concept. Unclear feedback.
The concept was validated. One participant valued having screenshots, PDFs, links, and videos from different apps in one place, and another singled out the idea of flagging dead links. But the filter terminology confused people, and the resource list didn’t visibly update after adding an item.
06 / REFLECTION + NEXT STEPS
Completion isn’t comprehension.
THE BLIND SPOT
100% completion. An unclear distinction.
I assumed users would see the difference between a Roadmap and a Smart Playlist. I designed both, so the distinction felt obvious to me. Testing showed it wasn’t obvious to anyone else; and the 100% completion rate nearly hid it. A user can complete a task without understanding the product.
Research, empathy work, and critiques were valuable, but testing revealed where my own assumptions had been standing in for the user’s.
What I’d change next.
02 / NEXT STEP
Make the two paths distinct.
Make the Roadmap vs. Smart Playlist distinction obvious at a glance.
03 / NEXT STEP
Make interactions self-explanatory.
Simplify Smart Playlist interactions with instant feedback and plain-language filters.
04 / NEXT STEP
Clarify the learning hierarchy.
Distinguish “what this is” from “what’s next” in the Roadmap, including quiz failure states.
05 / NEXT STEP
Design for skimmers.
Use visual hierarchy over dense copy.