GROUPON DESIGN SYSTEM
I took over this project in 2015 when we decided to be a 'Mobile First' company. The industry and our sales indicated that more users where buying from a mobile device than from their desktop computer. Our Design System at the time was exclusively designed for desktop web and there was no system, guidelines or documentation for mobile. The new Design System is responsive and shares components with the native apps.
Atomic design Approach
Taking a lesson or two from our friend Brad Frost, the new Groupon Interface Guidelines (GIG) was rebuilt from the ground up using the Atomic Design methodology, starting on small screens all the way up to desktop and made every component responsive.
ATOMS
This first level in GIG includes Color, Typography, and Iconography. Simple right? Not quite. When we refined our color palette, I found out during a deep audit that we were using 100+ shades of gray and 20+ different greens in iOS alone. We now have only 8 grays and 3 greens in every platform.
MOLECULES
On this second level, we have buttons, form fields, deal cards, pills, and more. These elements looked and responded differently on every platform for no good reason. Bringing the same design language to all of them improved consistency from visuals to interactions.
ORGANISMS
Here we have components like modals, calendar widgets, left drawers, headers, footers, and more. All of these were rebuilt to be responsive (or auto-layout compatible in iOS) and to be platform-agnostic as much as possible without affecting the UX.
Examples
Here is a sample of molecules and organisms in the Groupon Interface Guidelines.
Forms
All the HTML form elements were redesigned utilizing the new atoms in the design system. In the new design, both label and input text live inside a container animating the label above the text value.
The new forms elements are all responsive in web, and share the same styling on iOS and Android.
Accessibility: I improved our WCAG score by increasing the contrast of the colors used, better :focus and :active states, bigger tap areas, and more clear error messages.
UNIVERSAL Deal Card
The Deal Cards are the bread and butter of Groupon. We use them in browse, search, cross-sell, email, widgets, and My Groupons.
Challenge: Create a system that could solve all the inconsistencies, scalable, and work on all platforms (web, iOS and Android) for all lines of business (Local, Goods, Getaways, etc).
Solution: I created a Schematic for the UDC with a set of rules and prioritization based on the data available and the context where we show the card.
Cross Platform
Every organism in the guidelines had to work everywhere regardless of the platform or the screen size. This requirement helped other designers to come up more holistic solutions and not narrowed to a specific page or project.
Having consistency across Groupon has been a win-win-win situation. Designers can work faster and more efficiently, developers don't have to re-write code over and over again, and the code base is simpler and cleaner, resulting in a faster and more consistent experience for the user.
