RetailMeNot “NED”
Design System

PROBLEM

Develop a global design system to create one single source of truth across RetailMeNot product lines.

MY ROLE // Product Design Manager
Research, product strategy, stakeholder alignment, information architecture, visual design, copywriting, quality assurance.

MY TEAM

Janell McCanna - Sr. Product Designer
Research, product strategy, stakeholder alignment, information architecture, visual design, copywriting, quality assurance.

Chon Shoaff - Art Director + Designer
Research, product strategy, visual design, copywriting.

Michelle Young - Sr. Product Designer
Research, product design.

KICKOFF + DISCOVERY

Chon and I began auditing the current RetailMeNot design systems. There were currently 3 that had been created in various forms of completion. Since these systems weren’t completed works, they would not serve as the holistic design system solution we desperately needed across product and marketing. Thus began our vast company wide component and systems audit.

After all existing componentry had been gathered, I assigned Janell the task of auditing them for viability and scalability. Her audit showed that too much human error and inconsistencies had occurred throughout the previous years from all of the designers that had worked on the team. The path forward was clear - We needed to start fresh.

With a small team of 3 designers total (including myself) and a full roadmap to support, we set out researching how to go about creating a design system in the most economical way.

We began researching design system kits, their pro’s and con’s as well as design system success stories. Janell spearheaded this initiative finding 25 great options, all varying in price and features. Ultimately, the team unanimously chose one design system that was built for react and tailwind, both of which would greatly improve the product design to engineering handoff.

STRATEGY + DESIGN

After we purchased our base design system “Align UI”, we needed to comb through it to conduct a side-by-side comparison of the foundational elements we’d need to make based off of our current product and marketing needs. Once we had a set structure, I set up a meeting with leadership to layout the quarterly plan that would serve as our project timeline from ideation, to testing and lastly product implementation. In 3 quarters we would be ready for full adoption, storybook ingestion and implementation.

Q2 / Phase 1

Communication, education and transparency from business unit to business unit was going to be instrumental in our success. The more our partners understood the value of this design system, for not only our team but the company as a whole, this system would drastically change the way in which our team worked. Being able to design within fully-responsive grids would make it possible to design once instead of multiple times for various breakpoints.

Other benefits included:

• Create much needed consistency amongst our products

• Reduction friction in developer handoff

• Consolidate and reduce componentry and typography styles

• Unify marketing and product by creating a shared tool-set and single source of truth.

• Introduce thorough documentation around all aspects product + brand accessible via AI through storybook.

Phase 2

Janell and I worked with the social, brand and marketing teams to align on adding each department’s respective guidelines to the design system in order to house all guidelines in one place. Additionally we worked to set up the design system file to work as effectively as possible by including documentation layouts, outlines for each component’s needs as well as research and discovery into standing up story book for living documentation.

Q3 / Phase 3

Time to build! As team manager, my role shifted here to be more of a collaborator, facilitator and reviewer as Janell took the reins and begun skinning the foundational components. Through rigorous design working sessions, further audits and reviews, we had finished building “NED” an acronym in the deals space for “No Expiration Date”. We were careful to communicate any and all NED updates via company all hands announcements, weekly leadership updates as well as our bi-weekly Design System sessions called “NED-Talks” where we communicated progress and discussed across departments how NED would serve to improve their day-to-day operations.

We had created a truly global design system, completely tokenized and ready to be ingested into ai (via OpenHands) for integration with Storybook.

NED is already proving to be a success, having used it to build RetailMeNot’s latest extension re-design. Using NED unlocked faster build-times, iterations, prototyping, and less guess work when it came to developer handoff.

Q4 / Phase 4

NEXT UP - Stay tuned as the app and Retailmenot.com receive much needed updates through the power of NED.