Modernizing Varsity Tutor's web experiences with a design system

Cover photo 2.png

Varsity Tutors is a St. Louis based education startup with the mission to connect learners with experts in any subject or expertise.

As a product designer collaborating with the product and engineering teams based in Seattle, I work on creating better customer experiences in all product areas across the web and mobile.

I took ownership of Varsity Tutor's first design system in late 2016 and worked with other design team members and the engineering teams to create and incrementally roll out the system.

varsitytutors.com

Various manifestations of the design system

Various manifestations of the design system


Problem

Customer experiences were inconsistent and varying in quality across product areas

Everything from the marketing site to the mobile app used a slightly different style guide which resulted in a confusing and fragmented experience. In some cases, design patterns were not implemented as well as they could have been, which led to frustrated customers.

This is all from the same company

This is all from the same company

In order for Varsity Tutors to present a cohesive image and rapidly overhaul its web experiences, we needed a design system that documented all the UI patterns and guiding principles in a format accessible to the design and engineering teams.


Process

Using the client experience overhaul to drive design system creation and testing

While almost every Varsity Tutor web experience was due for a UX and visual overhaul, the client experience was currently in the midst of a complete redesign and would be applying the design system first.

After researching several different design system models, we decided to structure our system after GE's Predix design system.

The Predix design system framework

The Predix design system framework

To optimize for speed, I documented all the patterns required to fill the wireframes for the client experience overhaul, and distributed the work across the 3 members of the design team. We completed the work in less than 3 weeks and handed off the UI patterns to the engineering team.

New client experience wireframes

New client experience wireframes

List of patterns needed for the new client experience

List of patterns needed for the new client experience

All of the pattern documentation was collected in a master Sketch file, and non-UI patterns, such as copywriting guides and icon libraries, were stored in a shared Google Drive. 

A sampling of "Basics" from the master Sketch file

A sampling of "Basics" from the master Sketch file

A sampling of "Components" from the master Sketch file

A sampling of "Components" from the master Sketch file


Next Steps

Scaling the design system to streamline the design process

Once the first iteration of the design system was complete, it helped the small design team of 3 to quickly spread a unified look-and-feel across every new product initiative.

While the master Sketch file was great for copying and pasting assets, the interaction rules and best practices for each component was still tribal knowledge within the team. Soon, the design team encountered many questions around small implementation details from the engineer teams, which required every use case to be accounted for.

To help design more efficiently with engineering, I began working on the second version of the design system which has much more detailed documentation for each UI pattern.

Button pattern overview

Button pattern overview

Typography overview

Typography overview

Button pattern responsive behavior

Button pattern responsive behavior

Typography responsive behavior

Typography responsive behavior


Reflection

Design systems are a vital tool for design teams

The first iteration of the design system was created in less than 3 weeks by 3 designers juggling multiple projects at the same time. With that small foundation, we were able to create sweeping changes and introduce usability improvements to virtually every product area.

During past roles in larger design teams, I've either been a contributor to an evolving design system or a consumer of a vast and intricate system maintained by dedicated designers.

Being responsible for building a system from scratch has shown me the depth of thinking involved in crafting each small piece, and how doing all this thinking up front will save the team so much time later down the road!

Frances Tung