improving our customer experience + Creating a design system part 2 

 

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.

Employer
Varsity Tutors

Project Length
6 Weeks

My Role
Project Lead/Product Designer

 
 

The Team

  • 2 Product Designers (including myself), Software Engineers

Personal Contribution and Deliverables

  • Research: competitive and analogous research, heuristic review, analytics, recruit, plan, and facilitate user testing

  • Design: content blocking, sketches, low fidelity wireframes, full fidelity designs, interactive prototype

  • Implementation: collaborate with engineering team, facilitate bug bash

 

 

A 6 Week Design Plan

 

Week 1

  1. Research: analytics, heuristic review, competitive and analogous research
  2. Preparations: Create design system framework, research best practices
  3. Design: Content blocking, IA Diagrams

Weeks 2-3

  1. Create screener and recruit participants for user testing
  2. Evolve design to low fidelity wireframes for 75% of screens
  3. Evolve design to high fidelity design for 25% of screens
  4. Building out design system framework
  5. Begin design system explorations

Week 4

  1. Create interactive prototype
  2. Create user test guide
  3. Facilitate user testing
  4. Synthesize findings
  5. Iterate designs based on feedback

Weeks 5-6

  1. Evolve design to high fidelity design for the remaining 75% of screens
  2. Create process for implementation hand-off
 

Key Personas

Key Personas


 

Key Tasks

  1. Find your session link
  2. Request a session
  3. Request a new tutor
  4. Access homework help via Instant Tutoring
  5. Find a previous tutor
  6. Change your password
  7. Read tutor notes to track progress
  8. Reschedule a session
 

 
Sitemap

Sitemap

 

Content blocking example from scheduling screens

Content blocking example from scheduling screens


Iterative Wireframes

Iterative Wireframes


 

USER TESTING

 

On November 29th and 30th I conducted six remote, moderated, one-on-one, 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). You can view the test guide here.

 
 

Example Positive Findings
Our participants were all able to complete the following six key tasks:

  1. Email your kid, the link to their next online session (6 of 6 participants)
  2. Use the site to request a next session (6 of 6 participants)
  3. Locate the name and contact info of a former tutor (5 of 6 participants)
  4. Change their password (6 of 6 participants)
  5. Notice and read the tutor notes (6 of 6 participants)
  6. Cancel an upcoming session (6 of 6 participants)

Example Areas of Opportunity

1. Finding: Parents were not able to guess that they could contact Varsity Tutors via the Help page. None of our 6 participants were able to find the help screen when asked what they would do if they needed to get their child a different tutor. They were looking for Contact Us but didn’t see it. 
Recommendation: Update the page name to Contact Us and/or publish the phone number in the header or footer.

2. Finding: Parents were not able to guess what Instant Tutoring is. 3 of our 5 parents who were unfamiliar with Instant Tutoring thought that it was a chat based tool.
Recommendation: Include a video and/or very illustrative graphic alongside Instant Tutoring messaging to make it explicitly clear how it works.

3. Finding: "My Tutors" were not discoverable. When asked to locate the name and contact info for a former tutor (from last year) 5 of 6 parents went to Session History to find this info. Although they can indeed find this info in Session History, we put a list of Your Tutors inside of Account - and only 1 of 6 of our parents guessed that it might be there.
Recommendation: Include links to Your Tutors in contextually relevant places like the home screen, schedule, and session history.

 

 

Outcome

This new client account has resulted in 30% increase in client initiated sessions!

Other metrics with positive impact:

  • Decrease in our refund rate
  • Increase in amount of customers to 3rd session
  • Increase in repurchase rate
 
REX_Before
REX After@1x.png

 

Documenting the new design system

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 “basics” in the master sketch file

A sampling of “components” in the master sketch file

A sampling of “components” in the master sketch file