improving AN online classroom + creating our design system part 1 

 

the problem: A Bad first impression

In mid-2016 I joined Varsity Tutors as the very first design practitioner on staff. The company had existed as a boot-strap startup for 7 years and had utilized various engineers and digital agencies to make design decisions. There was no coherent design system, style guide, or brand expression. Our vast variety of digital products (marketing site, client site, tutor site, learning tools, mobile apps, etc.) each had their own radically unique look-and-feel and interaction patterns which created a disjointed experience and a bad first impression.

We knew we needed a unified design system to bring cohesion to our family of products but we didn't have the luxury to go heads-down and craft one. Our approach was to work incrementally by developing the design system simultaneously while updating the UI and UX of our products. The first product we selected was our online learning platform (AKA classroom).

Employer
Varsity Tutors

Project Length
3 Weeks

My Role
Project Lead, UX Designer/Researcher 

 
 

The Team

  • UX Designer (myself), Design Director, Product Manager, Software Engineers

Personal Contribution and Deliverables

  • Project Lead

  • Research: competitive and analogous research, stakeholder survey, recruiting, planning, and facilitating user testing 

  • Design: mood boards, iterative sketches, low fidelity wireframes, full fidelity comps, style guide, design specifications 

  • Implementation: collaborated with engineering team for their first time working with a designer providing design specifications

 

 

A (Brisk) 3 Week Plan

 

Our plan was to begin by creating just enough of a design system to support a UI refresh of our online learning platform.

Week 1

  1. Survey senior leadership and executive team to determine our brand strategy
  2. Synthesize findings into themes – our Brand Tenants
  3. Use brand tenants to guide mood boards and typographic explorations

Week 2

  1. Use design and type exploration to inform a variety of designs
  2. Present designs to senior leadership for evaluation
  3. Iterate design based on leadership feedback

Week 3

  1. Create comps for every interaction and screen in the product
  2. Create style guide/design specifications 
  3. Work with the product manager and engineering team to implement
 

 

5 Brand tenents

 
 

1. INDIVIDUALIZED
Serving customers' unique needs on their terms - when, where, and how they want it.

Design Translation
Effortlessly legible across screen sizes, optimized for touch (or any input), appropriate color contrast, lack of clutter enables cognitive speed.

2. EXPERTS
Our tutors, our service and our tools inspire confidence
.

Design Translation
Should feel thoughtful and consumer-centric. The UI is "orderly and thoughtful" - paying close attention to details like well-aligned grids, proper type hierarchy, and consistent spacing.

 
 

3. TRUSTWORTHY
Honesty and transparency builds trust, and our customers trust that we’ll meet their expectations.


Design Translation
Consistent design everywhere helps people to know what to expect. We never “hide” anything from customers (i.e. through small type, dark patterns, etc.)

4. HUMAN
We take education seriously, but we also believe that learning is fun. Our tone is informal, warm, and upbeat.

Design translation
Colors are warm and welcoming, messaging is personal and the tone feels human and trustworthy - while also not being overly casual.

 
 

5. REMARKABLY EASY
Everything should "just work" for the customer. Even the most complicated tasks should be easy, and make the customer feel empowered.

Design translation
The UI has open space and is not cluttered. UI elements are easily identified and intuitive - no explanation needed, no learning curve. The customer can spend all their cognitive load on the content they are trying to learn as opposed to understanding the tools.

 

 

typographic exploration

 
 
Type.png
 

 

design explorations

 
 
Round 1: Mood boards

Round 1: Mood boards

 
 
Round 2: Concepts

Round 2: Concepts

 

designs OPTIONS PRESENTED for EXECUTIVE review

Option A
Option C

Final design

before

outcome

 

This new design was live in production 2 weeks later. The UI was well received in a follow up usability study with tutors. They were asked “On a scale of 1 to 5, how modern would you say the updated online platform looks?”
The new UI got an overall rating of 4.6 stars!