Good Eggs Design System
Background
One of my favorite things I own is a labelmaker. It brings me undeniable joy to open my spice drawer and find each jar precisely labeled. What began with my spice drawer has expanded to almost every bin & box in my home. My love of sorting, purging—and then most gratifying of all—labeling the things around me makes it not too surprising that I find equal joy in doing that to UI components.
When I joined Good Eggs as their only product designer my first undertaking was to audit all the components, all the type styles, and all the iconography used on Good Eggs. Good Eggs had just launched a brand refresh that rethought the photography style, color palette, and the typography used for marketing campaigns & materials.
Once my sorting & purging of the current UI was complete I wanted to identify opportunities to inject some of the new brand elements in the marketplace. My goal was to create an evergreen system that could blend in with the current, more modern refresh but also withstand Marketing’s experimentation. I chose to adopt some of the stylistic changes from the brand refresh—such as the color palette—into the updated system. These stylistic changes could be easily evolved in the future to maintain visual alignment.
A sampling of the audit I completed of the components on Good Eggs website & iOS
Project goals
Audit components, deprecate those that are no longer needed, update what will be kept, and then create and maintain Sketch UI library
Clean up the type styles used across the ecosystem and define the font, sizes & weights we’ll be using moving forward and create plugin for use
Define a grid & spacing system and adopt it
Strategically integrate new color palette into UI
Audit existing icons, establish design guidelines, re-draw icons, and create new Sketch library
Grid system
Each page of GoodEggs.com seemed to live on its own, unique grid system. I defined a cross-platform system that would introduce consistency and organization.
Desktop
The web grid system is 18 columns in total, but only uses 16 columns as active space.
Tablet
At the tablet breakpoint the grid system drops to 8 columns with an outside 16px gutter.
Mobile
For mobile, the grid drops to 4 columns and keeps the 16px outside gutter.
Spacing
The spacing system is built on the idea of 8s. There are six spacing increments that range from 4px all the way up to 80px.
Typography
The use of fonts was a bit chaotic across web, iOS, and marketing. Typography was where the UI of Good Eggs’ marketplace was going to diverge the most from Marketing visuals. I chose to maintain the current fonts on web. Most consequentially, I cleaned up the breadth of sizes & weights used across the site and created more stringent guidelines that I held myself to when creating new components & page layouts.
Color Palette
One of the biggest changes to come out of the brand refresh (IMO) was an updated color palette. The old Good Eggs loved a soft, natural color palette. The refresh introduced a broader range of colors with a philosophy of being more color-forward. I wanted the UI to respect the stylistic change and adopt the broader palette with intention and purpose. Along with a totally new palette the new branding had introduced the idea of ‘color pairs’ that I wanted to make use of within the UI.
Original color palette
New color palette
Icons
Iconography on Good Eggs was a mish-mash of styles. First, I identified all the icons used on the site and sorted through what each was being used to represent. When I had a distilled list I redesigned all the icons currently being used in a single, consistent style.
The icon library is shared with the marketing team and updated and contributed to quite frequently. It began with 60 icons and now has over 100 icons in the library.
