Quizlet

 

Design a set of flashcards according to your needs. There's a variety of learning types, such as the memory-testing Learn and time-pressuring Match.

UI Credit: Quizlet Creative Team

Missing your name? Let us know.

quizlet-hero-splash.jpg
 

Element Design

  • Friendly encouragement before and after inputs complete.

  • There's a shadow background for the selected input along with a yellow border fill.

  • Swipe to delete feature reveals a floating delete icon. 🗑

 

Quiz Gamification

  • On the round results screen for review and quiz, emojis fly everywhere when you get all answers correct.

  • There are a traditional quiz option and card matching. The cards do a 180 flip when tapped.

  • When you finish the practice quiz, you are shown encouraging words when you don't do well.

  • The progress meters show how well you are doing with your studying.

  • Creating flashcards is a custom process, from choosing themes, adding images, and adding sound. - The night theme option looks lovely. 🌝🌚

 

Menu

  • The menu for options has a subtle full-screen fade in and up effect.

  • The pointing menu shows the relationship to nearby content for study sets, diagrams, classes, and users.

  • The search screen includes an empty state, 'Search for study sets,' and a loading indicator before the data is populated. 🕵🏾‍♀️

 

Onboarding

  • As soon as you open the app, you see the static background with overlaying information that's swipe-able.

  • There's also additional onboarding as an overlay screen while using the app. 👆🏾

 

Modals & Popups

  • The notification modals & popups were helpful to the learning curve of features. 📝

 

Typography

Similar to Hurme Geometric Sans 2 Bold & Hurme Geometric Sans 2 Regular

Quizlet Typography.png
 

UI Gallery

Related Posts