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 websites’ 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
What 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.
Like a Russian doll, we started small, then expanded wider and wider: “What’s the next thing we can help with?” became a frequent question between our team and Excelligence.
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 backwards 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.
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 Excelligence sites’ user experience, 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 upwards 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.
