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

With a small design team (a researcher and myself) we needed to bring on some extra help. After meeting with a few design shops in the Bay Area we decided that Odopod was the right partner for this project.

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

Odopod kicked off the visual design discovery phase with a theme boarding exercise. They presented four options to our team with a broad range of visual styles that captured the balance we were aiming for—approachable and playful, while bold and authoritative.

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

Stress testing the UI

We took the theme boards and started stress testing the different visual directions. We wanted more certainty on how the different directions would hold up on a variety of screens.

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

After the final hand off from Odopod, we spent the next week prepping deliverables. I started by converting their PSD files into single Sketch design templates for each platform. I organized the design templates into atoms, molecules and components using atomic design principles. This served as a foundation to work from as the design system was evolving.

Design templates for web, iOS and Android

Enhancing the identity

The initial theme boards had a typographic treatment for the logo that worked very well. We knew the original logo wasn’t going to work with the new visual style, but didn’t have scope in our timeline for a lengthy logo redesign. After some light exploration and discussion we ended up landing back on the initial typographic treatment. The new mark felt simple, clean, bold and paired well with the typography in our design system.

Quizlet logo: before and after

Homepage photo shoot

The final homepage mocks that we got from Odopod included some stock photography assets for the top section and a few other parts of the page. We decided to shoot something ourselves that felt more tailored to Quizlet. We recruited Michael Nieland for the shoot who helped us convert our lobby into a studio overnight. We sourced a variety of props and designed out several sets for product shots. With a tight budget we recruited coworkers, friends and family as our hand model talent.

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

With a shared design language defined, we began more of a production design phase. Our goal was to reskin the primary screens across all three apps by our back-to-school deadline. We started with a prioritized backlog and broke design tasks into weekly sprints. During this phase we had daily design standups with a smaller group, and more formal weekly design reviews with the larger team.

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

There are unique learnings from any product redesign. Each phase of a redesign can be challenging—from picking the right visual direction, to getting buy-in across an organization, to shipping the final product— but starting from scratch and watching a product begin a new chapter is rewarding. Here are some things I learned from the Quizlet redesign:

  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?

Check out this post that covers the technical implementation of our redesign on the web app.