Quizlet redesign

By Christian Dorian, Product Designer, Quizlet

By 2015, Quizlet had been through a lot of change since it’s initial launch. What started as a personal project in 2005 to pass a high school French class had become the go-to study tool used by 1-in-2 high schoolers. But after years of shipping successful one-off growth hacks, A/B tests, and hackathon projects, there was a considerable amount of design debt. The product felt generic, lacked personality and had no consistent design system.

By age 10 Quizlet was due for a redesign.

Getting started

We limited the scope of the redesign to be primarily visual, but optimistically would rethink some information architecture and key user flows as it made sense. Odopod’s scope of work was to come up with a new visual direction, as well as redesign the home page and the set page on the web app. Our team would be redesigning the remaining parts of the web, iOS and Android apps.

Theme boarding exercise

Initial Odopod theme boards. Left to right: Angelou, Beethoven, Einstein, Da Vinci

Stress testing the UI

None of the original theme boards were a 100% fit — but there were some gems in each of the directions. We spent the next few days tweaking, experimenting, and combining various elements that worked best. The Einstein theme board colors were versatile, but the typography was a little too elegant. The Da Vinci UI and typography were bold and clean, and captured the authoritative and approachable feeling.

After a few days of reworking theme boards, we landed on a new direction that we were excited about called Beyoncé — an arbitrary naming decision that our team thought was cool (and ended up being helpful in rallying our internal teams).

Beyoncé theme board

I started working out of the Odopod office a few days a week to help finalize the visual direction. We also setup a Slack channel for when our teams were working in different locations. This feedback loop led to good collaboration and kept design cycles productive. While they were finalizing visual designs for the set page and homepage, I was applying the new design system to create set and study modes on the web, iOS and Android apps.

Building out design templates

Design templates for web, iOS and Android

Enhancing the identity

Quizlet logo: before and after

Homepage photo shoot

The shoot was a success and we captured everything in one day. By the time we wrapped, we had five product shots with various devices and a few lifestyle shots of students and teachers.

Homepage hero product shots
Homepage lifestyle shots

Designing out the remaining screens

Below are the final screens we shipped for the redesign:

Web homepage: Desktop, mobile
Web latest activity: Desktop, mobile
Web create set: Desktop, mobile
Web study set: Desktop, mobile
Web search: Desktop, mobile
Web flashcards: Desktop, mobile
Web match: Desktop, mobile
Primary iOS screens. Left to right: Latest activity, create set, study set, search, flashcards, match
Primary Android screens. Left to right: Latest activity, create set, study set, search, flashcards, match

Some things I learned

  1. Scope creep can happen easily
    With a tight timeline it’s important to have a good sense of priority and invest design cycles where there will be the most user impact. As we dug into some flows it was tempting to completely rework them. If we had not limited our scope to UI for most features, we likely would not have shipped the redesign by our back-to-school deadline.
  2. A single source of truth
    Having developers and designers work from a single source of truth is important to ensure consistency. Early on we defined shared living components that had static counterparts designers could use in Sketch mocks. This was important as our design system was constantly evolving during the redesign.
  3. Testing a redesign before shipping it is hard
    It’s hard to comprehensively gauge the success of a redesign before shipping it. We A/B tested individual features as they were rolled out to ensure there was no negative impact on conversion. In most cases the redesigned screens performed better, and in a few instances (like the set page) we saw significant improvement on study sessions. Additionally, we collected qualitative feedback with a survey as we rolled out new features, and iterated on designs when it made sense.
  4. Redesigns are never finished
    Shipping a redesign is just the first step. Every time we work on a new feature, we are making decisions that affect the design system as a whole. Thinking of a product as being constantly in a state of redesign is a healthy mentality. Aspiring for consistency and simplicity in every design decision will pay off and reduce cognitive load for users.

Interested in learning more?

Product Designer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store