Case study · Turion · Online higher education platform
Turion: Less shopping,
more learning
more learning
Turion offers an affordable, subscription-based path to a college degree. The
platform students used to enroll looked more like an online store than a school. As
design lead, I proved that with usability testing, then redesigned the dashboard,
catalog, introductory course, subscriptions and platform tutorial.
platform students used to enroll looked more like an online store than a school. As
design lead, I proved that with usability testing, then redesigned the dashboard,
catalog, introductory course, subscriptions and platform tutorial.
My role
Design lead: UX research,
UX + UI design
UX + UI design
Team
A second designer,
marketing, engineering
marketing, engineering
Timeline
[Sep 2022 – Feb 2023]
Methods
Remote usability testing,
user flows, wireframes, MUI
design system
user flows, wireframes, MUI
design system
Outcome
4 of 5 core tasks at 100%
completion
completion
The problem
The course catalog was the homepage, there
was no dashboard, and lecture videos had no
clear home. In testing, every participant
struggled to complete their first task.
was no dashboard, and lecture videos had no
clear home. In testing, every participant
struggled to complete their first task.
What I did
Mapped the three jobs students come to do,
rebuilt the platform around a dashboard on the
MUI design system, then tested the high-fidelity
design and fixed what it found.
rebuilt the platform around a dashboard on the
MUI design system, then tested the high-fidelity
design and fixed what it found.
The result
In the follow-up test, 4 of 5 core tasks reached
100% completion and 80% of participants liked
the navigation. The one weak spot, finding
lecture videos, got three new entry points.
100% completion and 80% of participants liked
the navigation. The one weak spot, finding
lecture videos, got three new entry points.
01
A degree platform that felt like a storefront
I believed the platform needed an overhaul, not a polish. To prove it to stakeholders, I ran a
remote usability test with 10 participants recruited from marketing’s two target
demographics, 5 from each.
remote usability test with 10 participants recruited from marketing’s two target
demographics, 5 from each.
100%
of participants struggled to
find the Bachelor’s in
Business overview from the
homepage
find the Bachelor’s in
Business overview from the
homepage
16
clicks on average to
complete or attempt that
task, most of them on the
catalog
complete or attempt that
task, most of them on the
catalog
4/10
weren’t sure whether they
had finished the tasks they
were given
had finished the tasks they
were given
3/10
couldn’t tell from the course
overview whether the
program was accredited
overview whether the
program was accredited
Source: remote usability test on UserTesting, 10 participants.
Before
Students landed in a shop, not a
school
school
1
The course catalog was the main page. With no
dashboard, students had nowhere to see their
own courses.
dashboard, students had nowhere to see their
own courses.
2
Viewer-plan subscribers pay only for lecture
videos, yet had to search the whole site to find
them.
videos, yet had to search the whole site to find
them.
3
Course overviews were too thin to enroll with
confidence, and a “Subscribe Now” button read
like a newsletter.
confidence, and a “Subscribe Now” button read
like a newsletter.
4
Pricing was shown inconsistently through
payment, and nothing said whether a program
was a degree or a certificate.
payment, and nothing said whether a program
was a degree or a certificate.
02
Four goals that came straight from the
test
test
Each finding pointed to something the redesign had to fix. These became the bar every
screen had to clear.
screen had to clear.
Goal
A clean layout
Uncluttered screens that still
hold everything students
need to move through their
courses and the catalog.
hold everything students
need to move through their
courses and the catalog.
Goal
Clear subscribing and
enrolling
enrolling
A step-by-step flow so
students always know what
they’re paying for and what
they’re enrolling in.
students always know what
they’re paying for and what
they’re enrolling in.
Goal
More than one way in
Simple navigation with
several entry points to
courses and lectures, so no
task depends on one path.
several entry points to
courses and lectures, so no
task depends on one path.
Goal
One consistent UI
A shared design system so
screens look and behave
alike, and engineering can
build them faster.
screens look and behave
alike, and engineering can
build them faster.
03
Three jobs students come to do
Going back to the product requirements, I defined a user story for each core task and
mapped its flow. Every screen in the redesign had to serve at least one of them.
mapped its flow. Every screen in the redesign had to serve at least one of them.
A
Subscribe to a plan
“As a user, I want to sign up and subscribe to a plan.”
Whether students only want lecture videos or a full course, every path starts with choosing a plan.
Sign up
→
Choose a plan
→
Free trial
Viewer plan
Student plan + enrollment
→
Card details
→
Review cart
→
Subscribed
B
Enroll in a course
“As a user subscribed to the student plan, I want to enroll in a course.”
Student-plan subscribers enroll before a course starts, and must finish the introductory course first.
Dashboard
→
Mini catalog
Catalog in side nav
→
Course overview
→
Intro course done?
→
Yes: enroll
No: take it first
→
Enrolled
C
Watch a lecture video
“As a user subscribed to the viewer plan, I want to find a lecture I’m interested in.”
Viewer-plan subscribers only have lecture videos, so videos need to be easy to reach from the first screen.
Dashboard
→
Search bar
Browse on the homepage
→
Watching
04
Testing the high-fidelity design
After brainstorming layouts in FigJam with a second designer, I took the wireframes to high
fidelity and tested them with 10 participants on the five tasks that matter most.
fidelity and tested them with 10 participants on the five tasks that matter most.
#
Task
Completion
Result
1
Sign up on Turion
100%
Passed
2
Subscribe to the Student plan
100%
Passed
3
Complete the platform tutorial
100%
Passed
4
Find the lecture video “Business Communications”
60%
Redesigned
5
Find and enroll in “Business 101”
100%
Passed
80% of participants also said they liked the simple navigation. Time allowed one round of testing on the high-fidelity design.
Why
A small team on a deadline couldn’t design and build every component. MUI cut the time for both designers and developers.
Constraint
Turion’s colors, type and product feel were set before I joined. The system had to carry that
brand, not replace it.
brand, not replace it.
Result
One shared component set for the dashboard, catalog, courses and subscriptions, and a common language with engineering.
05
The three decisions that shaped the platform
Make a dashboard the home, not the catalog
Goals 1 + 3 · Dashboard
turion.app/dashboard
After
One screen that starts every task
1
Explore, your tasks and a mini catalog sit
together, so students can start a course or a
lecture from one place.
together, so students can start a course or a
lecture from one place.
2
A customize control lets students reorder and
hide dashboard sections.
hide dashboard sections.
3
A calendar button adds events and
appointments to their profile.
appointments to their profile.
Why
With the catalog as the homepage, Turion read as a store. A dashboard puts the student’s own progress first, which is what a school does.
The hard part
It had to cover every way a student might look for a course or lecture and still feel like one cohesive layout.
Result
80% liked the navigation. Signing up, subscribing and the tutorial all reached 100%
completion.
completion.
Build on MUI instead of from scratch
Goal 4 · Design system
After
Ready-made components in
Turion’s brand
Turion’s brand
We compared existing design systems and chose MUI
for its range of components, styles and layout
templates, then applied Turion’s existing colors and
type on top.
for its range of components, styles and layout
templates, then applied Turion’s existing colors and
type on top.
Story C · Found in testing
Give lecture videos three ways in, not one
Only 6 of 10 participants found the lecture video. Search on the dashboard worked, but people
missed it, and the videos they scanned for sat mid-page rather than at the top. I added entry
points where students were already looking.
missed it, and the videos they scanned for sat mid-page rather than at the top. I added entry
points where students were already looking.
Before testing
After feedback
1
Search on the dashboard
Kept, and made easier to spot.
2
Search in the mini catalog
Now finds lecture videos alongside courses.
3
Courses | Lectures tabs
The catalog, renamed Explore, lets students switch between the two.
Also changed
Catalog cards are grouped by subject in
alphabetical order, to cut crowding and
clutter.
alphabetical order, to cut crowding and
clutter.
What we kept
Participants liked the new course overview,
which gave them everything they needed
before enrolling, so it shipped unchanged.
which gave them everything they needed
before enrolling, so it shipped unchanged.
Still to prove
The deadline didn’t allow a second test, so
this fix is untested. It’s the first thing I’d
measure next.
this fix is untested. It’s the first thing I’d
measure next.
06
What made it hard
A catalog that isn’t
a text list
a text list
Most university catalogs are long text
lists. Making ours visual without dropping any of the information students rely on took many rounds.
lists. Making ours visual without dropping any of the information students rely on took many rounds.
Changing engineering teams midway
A team switch cut our build time. I
supported the new team through weekly meetings, Loom walkthroughs and constant Slack contact.
supported the new team through weekly meetings, Loom walkthroughs and constant Slack contact.
Going from two designers
to one
to one
Partway through I became the only
designer, and had to prioritize tightly to
hit deadlines across several projects.
designer, and had to prioritize tightly to
hit deadlines across several projects.
07
Impact
4/5
core tasks at 100% completion, up
from a first task no tester finished
easily
from a first task no tester finished
easily
80%
of participants liked the new
navigation
navigation
3
entry points to lecture videos, up
from one easy-to-miss search bar
from one easy-to-miss search bar
5
features redesigned on one MUI-
based system
based system
Watch the prototype walkthrough →
08
What I learned
Marketing research isn’t UX research
We skipped user interviews because marketing
had personas. They told us who students were,
not where they got stuck. I’d run my own
interviews from day one.
had personas. They told us who students were,
not where they got stuck. I’d run my own
interviews from day one.
Evidence wins the overhaul
A single usability test turned “I think we need a
redesign” into a finding stakeholders could act
on, and set the goals for every screen after it.
redesign” into a finding stakeholders could act
on, and set the goals for every screen after it.
Next: close the loop
Interview students, retest the lecture-video fix,
and iterate on what comes back, so the design
is proven, not just improved.
and iterate on what comes back, so the design
is proven, not just improved.
