Socrative Design System
Overview
This is case study will go over a snapshot of the Socrative design library and a few of the powerful components and patterns contained within it.
About Socrative
Socrative has a long history of being one of the most simplest, but powerful freemium quizzing apps that teachers trust. Socrative was founded in 2010 and acquired by Showbie in 2018. I joined the team in 2020 and have been gradually replacing legacy UI with modernized design.
Socrative’s library elegantly contains a lifetime of work, so it never feels formidable to wield.
The Socrative Design system is organized using the Atomic Design methodology, so finding what you need is incredibly easy.
Socrative’s design system supports innovation and production, without stifling it.
All the components can be broken into shared atoms. For example, labels, icons, checkboxes, and buttons are the only atoms that make up the anatomy of the below Data Grid.
The Data Grid’s thoughtful design can adjust to different use cases. These three modals use the Data Grid differently.
Socrative reuses elements to stay nimble and fast.
Components like this Menu Item, have thoughtful Figma variations that are easy to turn off and on.
The menu component is robust enough to cover all the patterns it needs to support. Whether that’s managing your socrative rooms, students, or simply navigating the app.
And that’s not all…
The Design System is an ongoing effort with a strong future! This case study provides a small preview of the work I did. If you would like to learn more, I would love to discuss the strategy and nuances of our Socrative design system in person.
Contact me to see more of the Figma files, process, and progress of Socrative’s design system.