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).
Project Lead, UX Designer/Researcher
- UX Designer (myself), Design Director, Product Manager, Software Engineers
Personal Contribution and Deliverables
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.
- Survey senior leadership and executive team to determine our brand strategy
- Synthesize findings into themes – our Brand Tenants
- Use brand tenants to guide mood boards and typographic explorations
- Use design and type exploration to inform a variety of designs
- Present designs to senior leadership for evaluation
- Iterate design based on leadership feedback
- Create comps for every interaction and screen in the product
- Create style guide/design specifications
- Work with the product manager and engineering team to implement
5 Brand tenents
Serving customers' unique needs on their terms - when, where, and how they want it.
Effortlessly legible across screen sizes, optimized for touch (or any input), appropriate color contrast, lack of clutter enables cognitive speed.
Our tutors, our service and our tools inspire confidence.
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.
Honesty and transparency builds trust, and our customers trust that we’ll meet their expectations.
Consistent design everywhere helps people to know what to expect. We never “hide” anything from customers (i.e. through small type, dark patterns, etc.)
We take education seriously, but we also believe that learning is fun. Our tone is informal, warm, and upbeat.
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.
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.
designs OPTIONS PRESENTED for EXECUTIVE review
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!