I played a big part in the discovery phase of this project, helping the clients explore different visual directions, fonts, and colors, to find the one that struck the right balance between professional and fun. I also started the “set page” layout accompanied by comprehensive style guide for Quizlet’s internal team to flush out the rest of the product in-house.
The above design is where the product ended up, but it took quite a bit of style exploration to get there.
Because the majority of Quizlet users are students, the first themeboard I designed targeted a young audience. I went with a bright color palette that flooded section backgrounds and overlayed on top of lifestyle photography, and used rounded UI and tactile cards to make the design feel youthful, approachable, and fun. I enjoyed creating the quirky and colorful icons with thin-strokes and off-set color fills to finish off the design.
In contrast to the first style direction, this themeboard is a lot more grown up. The general style is refined with pops of color and subtle whimsical moments. The typography is clean and straightforward, and introduces a modern serif for headlines. Thick borders and underlines contrast the thinly-stroked icon style, and the use of minimal lifestyle photography lets the content come forward.
Quizlet liked the use of color in this direction. Aside from some small tweaks, it ultimately became the final product’s color palette.
The style of this direction is minimal & modern, getting its character from warm lifestyle photography, chunky linework, and playful background patterns. I used a bright royal blue and bold sans serif typography to add clarity and contrast, making certain sections pop.
The typeface I used for this direction was chosen by the client for its modern geometric feel. The sharp corners and boxy elements were also incorporated into the final design.
In addition to my three themeboards above, we presented four more directions created by other designers for a total of 7 different themeboards. None of the themeboards were an exact fit for Quizlet, but showing such variety helped us gain a better understanding of the client’s needs and preferences.
Quizlet preferred the playful color palette from my second themeboard, direction 6.
The font used in directions 5 & 7 met their legibility and translation needs while also feeling fresh and modern.
Thick stroked icons struck the right balance between fun & professional and made for fun background elements on the page - a style pulled from directions 3 & 5.
Quizlet responded well to elements with hard corners; rounded corners felt too youthful and soft.
They liked the thick strokes used for text links and for highlighting clickable cards seen in direction 6.
They also liked whenever we presented information on white cards with shadows (directions 5 & 7). They felt it added depth and tactility to the design and tied in well to the idea of flash cards at the core of their product.
Two other designers exectued on the design choices made in the themeboarding round to create the Home Page and Set Page for Quizlet.com as well as an indepth styleguide that Quizlet’s in house team could use to create the rest of their digital tools.