From Micro to Macro: A Showcase in Atomic Design
Media Partners creates award-winning training content to help organizations elevate their employees’ workplace performance and communications. But their previous site didn’t highlight the quality of their content, nor did it make their service offering clear. Guided by the principles of Atomic Design and adhering to our mission of creating long-lasting client relationships, we set out with a concrete goal: to create a seamless e-commerce experience that establishes Media Partners as the premier workplace training content creator, incorporating an action-oriented visual style and intuitive UI.
Crafting Obstacle-Free User Flows
The confusing structure of Media Partners’ previous site stood between site visitors and the products they were seeking to find. We created a new information architecture with a foundation of consistent layouts and recognizable content organization. Revamped product details pages promote scannability and make information easier to discover. Effective, easy-to-use filter parameters help users find products, with the added value of helping Media Partners’ convert prospective customers more quickly.
A Modern Aesthetic: Polished and Professional
Creating the desired aesthetic on the site required finding a medium between extremes – highly creative, yet stable; simple and easy to use, yet assertive and sophisticated. A carefully selected combination of typography and colors allowed us to achieve the desired balance.
Sans Serif fonts, Poppins and Nunito, are clean and understated. Used together, they communicate Media Partners’ contemporary personality. When establishing the color palette, we chose a white background to create an open and modern aesthetic. The footer, an emphatic dark blue, grounds the design while bright orange colors draw attention to important CTAs.
Seamless, Intentional Responsivity
Statistics show that over half of website traffic comes from mobile devices. Needless to say, responsive design is a must. But truly flexible layouts and styling require more than adapting a design from one device type or screen size to another. It’s an act of transference: creating a frictionless experience that feels authentic no matter where you access it. The integrity of visual elements is consistent across device types, conveying Media Partners’ brand clearly regardless of a site visitor’s web discovery behavior.
Empowering Our Partners
Every handoff at Fresh involves delivering the final experience and making clear to our partners that we understand the necessity of further change. Websites are complex life forms that evolve alongside businesses and organizations. With the final Media Partners website, we delivered a detailed style guide and design spec so that their webmasters could easily implement changes as needed.
Included in the delivery were assets informed by the principles of Atomic Design. The field atoms we provided –– page building blocks like containers, labels, overlays, text fields, and buttons –– contain detailed specifications about how to use them. Designers and developers used the individual atoms to create more complex page molecules, or sophisticated UI features that are a collection of individual atoms. Understanding the intricate product offering that Media Partners provides to its clients, we sought to empower them to continue improving their site as their customer base grows more diverse and their mission continues to evolve.