The problem: a disjointed customer experience
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. We created our design system while redesigning our client web app.
Personal Contribution
+ Project Management: created project plan, managed timelines, deliverables, shareout, documentation
+ User research: competitive and analogous research, heuristic review, analytics, recruit, plan, and facilitate usability testing
+ Synthesis: insights, opportunities, design implications & strategy
+ Design of responsive web-based software: content blocking, sketches, low-fidelity wireframes, full-fidelity designs, interactive prototype
+ Development: collaborated closely with the engineering team, facilitated bug bash
Deliverables
Information architecture diagrams, content blocking diagrams, low & high fidelity wireframes, low & high fidelity prototypes, design system
Employer
Varsity Tutors (currently preparing for IPO)
Project Length
6 weeks
My Role
Product Design Lead
The Team
+ 2 Product Designers
+ 2 Software Engineers
To meet our deadline, I put together a 6-week design plan that enabled our engineering team to get started on week 2.
Week 1
Weeks 2-3
Week 4
Weeks 5-6
Key Tasks
Sitemap
Content blocking diagram example from scheduling screens. These diagrams enabled our engineers to get started on week 2 of this design project.
Iterative wireframes
I conducted six remote, moderated, one-on-one, one-hour mobile, web usability research sessions. The goal of our research was to gather feedback from current Varsity Tutors parents on our proposed redesign for the post-authentication website (AKA Your Account).
-> View the test guide here
Example Positive Findings
Our participants were able to complete the following six key tasks:
Example Areas of Opportunity
Our participants were able to complete the following six key tasks:
There was no centrally-located, comprehensive style guide/pattern library in existence at Varsity Tutors, so I partnered with the development team to research and decide upon an approach for a shared web-based design system. Ultimately we decided that GE’s Predix model would serve our needs well, and based our system off of that framework.
We decided that a web-based, living design system would be beneficial to our teams in the following ways:
Unity & Consistency - It will serve as the central resource for the brand’s design ecosystem. By providing living examples, developers will have access to code samples. Designers will have access to real elements to see how they are rendered by the browser.
Collaboration - Seeing elements in situ will allow designers and developers to efficiently collaborate on things like hover states and animations that are difficult to convey in static design files. As a stand-alone project, anybody who has an idea – everything from a different button color to a different way to write code for an accordion – will have a place to start the conversation.
Efficiency - It will remove the need for high-fidelity design files, allowing designers to focus on UX over pixel perfection. Developers will be empowered to create standardized interfaces through readily accessible code samples.
Our first step towards the living design system was to simply get all of the designs we had created so far into a common Sketch file with all the proper documentation. A UX Designer on my team led the effort to set up a master Sketch file, arranged by Principles, Basics, Components, and Templates, and thoroughly document the design specifications for every piece.
Master Sketch File
A sampling of “basics” in the master sketch file
A sampling of “components” in the master sketch file
This new client account has resulted in a 30% increase in client-initiated sessions!
Other metrics with positive impact: