Modernizing Varsity Tutor's web experiences with a design system
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.
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.
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.
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.
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.
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.
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.
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!