Case study · C Dreams · Mobile-forward web

A learner dashboard designed before the courses existed

How I designed one dashboard that works for any course, phone first.

Role · UX intern, dashboard owner Duration · 6 months Team · 5 UX/UI designers Platforms · Mobile forward, then desktop
Gabrielle Hull · UX/UI Designergabbiehullux.netlify.app
Context

C Dreams trains people for green-collar careers through online courses

The program

Online courses like Energy Auditing that lead to green-collar jobs.

The team

5 UX/UI designers, each owning a part of the platform.

My part

The learner dashboard: the first screen learners see every time.

Month 1Research
Month 2Site map and flows
Month 3Lo-fi concepts
Months 4–5Hi-fi: mobile, then desktop
Month 6Review and handoff
C Dreams · Learner dashboard02
The problem
so what was the problem?
Career changers are often working or raising kids too. They study in short bursts, mostly on phones. If the app doesn't show what's next, they close it and don't come back.
The twist: the courses didn't exist yet. We only knew they'd have readings, quizzes and maybe live classes. So the dashboard had to work for any course.
C Dreams · Learner dashboard03
What learners need

Four questions the dashboard must answer

Where am I?Course and module progress
What's next?One task, one tap away
What's coming up?Live classes and exams
How do I get help?Messages and resources
C Dreams · Learner dashboard04
How might we

give learners one place to see where they are, what's next and what's coming up, however the course is built?

C Dreams · Learner dashboard05
Success metrics

I set targets first, so every decision had a yardstick

≤ 2 tapsfrom opening the app to back inside the current task
90%find their next task in under 10 seconds
70%of learners who start a module finish it
75%of registered learners join live classes

Also tracked: weekly active learners (60%), mobile share of sessions (over half), ease of use (SUS 75+).

C Dreams · Learner dashboard06
Research · Competitive analysis

What we borrowed from platforms learners already know

Coursera

A "resume" that returns you to the exact spot you left.

Google courses

Bite-sized lessons and visible milestones.

Canvas

A to-do list and calendar side by side.

The insight

Learners don't need the whole course on screen. They need the next step, and proof they're making progress.

Mapping it out · Site map

The dashboard is a summary: each section links to a full page, so it fits any course length

Site map: after signing in, the learner lands on the Dashboard, which holds course progress, module stepper, task cards and events. These link to Course overview, Learning path, each task and the full calendar. Messages, Resources and Profile sit in the menu.
Mapping it out · Task flow

The main job: pick up where I left off. It only needs a "next task", never a module count

Task flow: open the app and see progress. If a task is in progress, tap its card to resume. If not, tap the first To do card. Finish the task, progress updates, and the next task shows first.
Lo-fi concepts · mobile first

Five directions, each leading with a different question

None answered all four questions, so the final design combines the best parts: a progress bar, module stepper, task cards and an events calendar.

Six phone wireframes: Next up focus, Learning path timeline, Weekly agenda, Tabbed hub, Stats overview, and the chosen hybrid.
The design

Four key decisions

1
Because the content was unknownOne task card for any content

Readings, videos and quizzes share one card. A new content type just needs a new icon.

2
Because learners study in short burstsThe current task is easy to spot

Statuses are spelled out, not just color coded.

3
Borrowed from CanvasTasks and events together

The calendar marks event days; the next event sits below it.

4
Because it had to be mobile forwardDesigned for phones, then widened

Desktop puts the same blocks side by side.

C Dreams · Learner dashboard11
Decision 1 · Task card anatomy

One card, every content type

Task card anatomy: a type icon, a status label in words, the step number and module name, and the date and length. Below, the supported types: reading, video class, quiz, live class, open-book exam and future types.
Final design · Energy Auditing course
C Dreams desktop dashboard: green sidebar, course progress at 33%, module stepper on Module 2, task cards with status labels, and a November events calendar.
Desktop: Tasks and Events side by side
C Dreams mobile dashboard: the same blocks stacked in one column.
Mobile: one column, same order
Try it · interactive prototype

Finish the video, pass the quiz, unlock Module 3

Open full screen ↗
Results

The recap

6 monthsfrom research to handoff
4key questions answered on one screen
1task card for every content type
1layout that works on mobile and desktop
What I learned

When the content is unknown, design the system, not the screen.

Thank you

Questions?

Gabrielle Hull · UX/UI Designer

Email · gabbiehull@gmail.com Portfolio · gabbiehullux.netlify.app