The Challenge
Streamlining teachers’ checkout process — so they can get back to educating
To make sure teachers could quickly, easily and consistently get the supplies on their lists, Excelligence needed to optimize its brands’ websites. This meant simplifying each website’s checkout processes. Excelligence wanted to give teachers the same ease of use as a top modern ecommerce site.
But Excelligence didn’t just want a short-term fix. They needed a solution that would empower their development team to make website adjustments in the future.
The longer we worked together, the more the ideas started to flow.
The Solution
From a smoother checkout process to optimizing the entire user experience
WWhat started as an update to the checkout process for two of Excelligence’s sites became a full-fledged mission to improve the entire user experience of every brand site.
From our time optimizing the checkout process, we noticed an opportunity to improve the individual product pages. Teachers or admins coming to these pages needed a clear idea of what products were available and how those products could help their students.
Once that was done, we moved backward to examine the overall product category page. This was another chance to improve the navigation and cut down on the amount of time educators spent scrolling or trying to find their way around. Finally, we took an even further-reaching approach and dove into the overarching navigation of each site.
We also improved the design of Excelligence’s Standards Match Tool. This powerful resource allows teachers to quickly find products that match their state education standards. Our goal was to make it easier for teachers to use — so they could get what they need and then get back to their students.
Long-term solutions, not quick fixes
We didn’t just hand Excelligence a new checkout process or fresh website navigation then walk away.
Throughout the engagement, we became full-on strategic partners: iterating on new ideas and equipping Excelligence with the tools to make website adjustments on their own.
As we smoothed out the user experience on Excelligence sites, we recognized a chance to set them up for even more long-haul success.
Our Cloud City team introduced Excelligence to an atomic design system — using the concepts of atoms, molecules and organisms to break website design into its individual elements. We started with the most granular pieces, like icons (atoms), moved upward to whole website templates (organisms) and then created all of these components in Figma.
Once we developed those elements, as well as style guides for each website brand, it became far more streamlined to create or update a website under the Excelligence umbrella. Plus, the Excelligence development team now had the tools to make adjustments themselves whenever they needed.
“The websites all have the same components — input boxes, buttons, fonts. All you have to do is restyle them. So we created all these elements then assigned two different styles to them, and we instantly created two websites. It was a really smart way to work, and it provides longevity for future changes,” said Cloud City product designer Manda Miller.
