Back to Basics: Taking an Atomic Design Approach with Adobe XD

Illustration: Justin Cheong.

Take a moment to remember your high school chemistry class. Most people will probably remember seeing a periodic table and learning that every living thing is built up from those elements. Recently this scientific principle has inspired a new movement among designers: atomic design.

The idea is that rather than starting design with a sketch of the homepage, app interface, or expanded software UI, designers start by building small elements—color palettes, fonts, and buttons. Designers then start combining elements to develop the look of larger and larger elements—headers, search forms, images plus captions—until finally they’ve developed the overall layout.

Using Atomic Design to create a modern learning management system

Experience design and innovation agency FreshForm recently used atomic design to great success when creating a modern take on a learning management system (LMS) for Johns Hopkins Center for Talented Youth (CTY). CTY offered a unique challenge. With online curriculum that reaches more than 14,000 gifted students every year, it wanted to redesign its virtual classrooms to be more modern, accessible, and flexible.

FreshForm oversaw the redesign, which involved CTY leaders, an instructional design agency, and professors from the Johns Hopkins University School of Education. With so many collaborators, FreshForm chose to use Adobe XD CC to facilitate its atomic design approach. Here’s how they did it.

Style tiles

FreshForm started by creating some basic core elements for the redesigned LMS. Designers developed three style tiles in Adobe XD containing elements of typography, color, iconography, and navigational elements in three different styles. Two of them were within the same design family and one used bolder colors and multiple typefaces.

Stakeholder review

Designers shared a web prototype containing the style tiles with each stakeholder. Presenting just a few core elements first let stakeholders focus on key decisions before getting too deep into the design and then having feedback that sets the project back. After detailed conversations about colors and fonts, the team settled on a direction.

Element collage

Next, the FreshForm team built out an element collage based on the chosen colors and typography. The element collage included buttons, bulleted lists, numbered lists, and other navigational components. Again, stakeholders reviewed and approved designs before the team moved forward.

Live design

The existing LMS framework presented a few limitations, so the FreshForm team decided to take all the elements and work directly with the development team to implement changes live within the LMS itself. It was a very collaborative effort, with designers often sitting side-by-side with developers. As the designers made changes in Adobe XD, they shared updated design specs with their developers. The developers could then hover or click on colors and character styles in Adobe XD to get the style they need to draw from before implementing the changes.

Prototype testing

After dropping design elements from Adobe XD into the LMS, the team tested the live prototype with students to get early feedback. One of the ideas the team tested was the concept of inclusive design. By including site-wide features, such as user tours, glossary tips, or immersive views, the design team hoped to create a better experience for all age groups. The user testing validated the belief that students wanted a cohesive LMS experience, with visual cues to help them navigate between courses as they grow with the program.

New student experience

The FreshForm team also created an optimized dashboard that helps orient and direct new students when they first log in. A user tour walks students through all of the commonalities between the courses, so they understand the system, how to use the experience, and how to take advantage of the helpful tips and tricks.

Optimized navigation

Lastly, the team spent time optimizing the system navigation, enabling students to expand and collapse navigation as needed. This lets them focus in on the content that they’re looking for and get the most from their learning experience without being distracted by the design.

“By focusing on our visual system first and taking an atomic design approach that started with the smallest elements and then scaled out, we were able to build the system in a smart, scalable way,” says Michelle Peck.

“Colors and icons show progress and walk users through the difference between activities that are coming up and those that are already completed. Everything has a purpose and it all comes together to create a nice, cohesive system.”

While the previous version of the CTY online learning system involved a lot of scrolling, lacked color, and had no clear direction when students first arrived on the site, the new LMS design simplifies and enhances the experience, making it more intuitive, natural, and accessible to meet the needs of 21st century learners.

Learn more about how FreshForm used atomic design and Adobe XD to create a new design system for Johns Hopkins Center for Talented Youth’s learning management system: https://www.adobe.com/content/dam/acom/en/customer-success/pdfs/freshform-johns-hopkins-case-study.pdf