Solving a UX Problem with Atomic Design

Published in

BYJU’S Exam Prep Engineering

5 min readJan 17, 2020

With the growth of EdTech in India, there are now quite a few platforms that provide online courses. What sets Gradeup Classroom apart is our in-depth and well structured course content. Our methodology + daily study plan is the main value proposition we offer. We have different courses based on different exam cycles and user needs. Based on the exam and the duration of each course, the content within it would also vary a lot.

Business Goals :

Giving Gradeup Classroom a well structured feel
To show users all that we have to offer (without overwhelming them)
To ensure users can easily navigate between the entire course content.

User Goals :

Know what classes do I have today?
Know what should I do after a class is over?
How do I revise a particular topic/class?

Designing a common solution that fulfils both the business and user goals is always a challenge. (That’s why UX Designers like me even have a job!) We needed to organise and present the course content in a way that it doesn’t overwhelm our users and make it easy for them to navigate through it all. Here’s how we tried to solve it :

Applying Atomic Design to Gradeup Classroom

Brad Frost’s Atomic Design Methodology talks about breaking down your design to the smallest possible element and then build upon it. It is inspired heavily from basic chemistry where atomic elements combine together to form molecules. These molecules can combine further to form relatively complex organisms. We tried to do something similar with our course structure as well.

You can read more about this methodology here — http://atomicdesign.bradfrost.com/chapter-2/

1. Atoms

Just like atoms are the basic building blocks of matter, the atoms of our courses are meant to serve as the foundational building blocks of each course. Each atom has its own unique properties. Our individual atoms could either be a live class, quiz, mock test, or study notes.

2. Molecules

In chemistry, molecules are groups of atoms bonded together that take on distinct new properties. Assembling elements into simple functioning groups leverages its functionality. A live class is no longer just a live class. It can be clubbed with a quiz and short notes based on the class. Thereby providing more value to the student. We call these groups — “Units”. We also suggest the sequence in which these elements should be completed by the user in order to get the best understanding. Ideally a student must first watch a class, then take a quiz on it and later refer to the notes for revision.

3. Organisms (Topics)

Many molecules, combine together to form an organism, similarly multiple units will combine together to form a topic. There may be multiple classes conducted to cover a topic, each having it’s own quiz, short notes, etc. To get the best understanding of a topic it is recommended to the user to complete all the “Units” within that topic.

4. Chapters

These topics further go on to combine and form a chapter. This focuses on the course’s underlying content structure. This helps the user to articulate the important topics to be covered within that chapter. Also incase he/she wants to revise a certain topic, they can jump right to it.

5. Subjects

Lastly, all the chapters combine together to form a subject. This is fairly simple to understand as all students have the understanding of having multiple chapters within a subject book. It goes without saying that a course usually contains more than one subject, since it depends on the number of subjects to be covered for that exam.

The voila moment!

Combining this structure together got us a better and improved version of our course dashboard. It’s surprising how such a small design change could have such a drastic effect. Have a look at the before and after for yourself!