Product and User Experience Design
Product and User Experience Design
E-commerce design for Metro
Metro Inc. hired Nurun (formerly Publicis) as their AOR to help launch the expansion of its delivery service while simultaneously modernizing their retail locations to protect its position in this rapidly changing grocery landscape.
My team took on the entire website redesign, from refreshing the visual brand to designing experiences for new features such as Click & Collect and same day delivery. My role was to lead the creation of their complex digital design system where I implemented the principles of atomic design.
Atomic design breaks down user interfaces to their most basic elements, beginning from atoms, molecules, organisms, and finally pages. The key principle is to use the most basic elements to build up to the next level.
These atoms serve as the foundational building blocks that comprise all Metro’s interfaces: Colour palette, typography, button styles and states, iconography and image sizes.
Metro’s molecules are simple groups of UI elements functioning together as a unit. We combined and built upon atoms to create designs for: Recipe tiles, aisles, featured recipe banners, product details and product tiles.
These organisms are complex UI components made from molecules and/or atoms that form distinct sections of Metro’s interface. As this project was quite complex, I’ve only included a few key examples here: The navigation, mega menu, recipe block, footer and coupon components.
Lastly in this project we see the final Metro redesign, complete with content mocked up, which helps ensure the underlying design system comes together to form an accessible, usable and functional UI.
Including atomic design principles into my design process proved to be the most efficient way to tackle this complex system. By defining each level of components I was forced to deal with the essentials before moving on to the more interesting details.
Working atomically pushed me to create a design system that is effective, stable and reliable. By interplaying between component and application, we ended up with a far more consistent and robust UI.