Helping a bootstrap start-up to scale-up
To prepare an educational technology startup to scale, I redesigned the customer account web app while creating a design system in 6 weeks
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
A 6 week design plan
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
- Research: analytics, heuristic review, competitive and analogous research
- Preparations: Create design system framework, research best practices
- Design: Content blocking, IA Diagrams
Weeks 2-3
- Create a screener and recruit participants for user testing
- Evolve design to low fidelity wireframes for 75% of screens
- Evolve design to high fidelity design for 25% of screens
- Building out design system framework
- Begin design system explorations
Week 4
- Create interactive prototype
- Create a user test guide
- Facilitate user testing
- Synthesize findings
- Iterate designs based on feedback
Weeks 5-6
- Evolve design to high fidelity design for the remaining 75% of screens
- Create a process for development hand-off
Key Personas
Kicking-off design with just 1 week lead time
Key Tasks
- Find your session link
- Request a session
- Request a new tutor
- Access homework help via Instant Tutoring
- Find a previous tutor
- Change your password
- Discover tutor notes to track progress
- Reschedule a session
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
Usability testing for rapid iteration
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:
- Email your kid, the link to their next online session (6 of 6 participants)
- Use the site to request a next session (6 of 6 participants)
- Locate the name and contact info of a former tutor (5 of 6 participants)
- Change their password (6 of 6 participants)
- Notice and read the tutor notes (6 of 6 participants)
- Cancel an upcoming session (6 of 6 participants)
Example Areas of Opportunity
Our participants were able to complete the following six key tasks:
- 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. - 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. - 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.
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 “components” in the master sketch file
The Outcome
This new client account has resulted in a 30% increase in client-initiated sessions!
Other metrics with positive impact:
- Decrease in our refund rate
- Increase in the number of customers to 3rd session
- Increase in repurchase rate
Before
After
