Designing, documenting and learning from Return Path's first ever design system.
Early on at Return Path, I was a part of an initiative focused on design systems and documentation for our digital products - specifically product design, user experience and best practices for working with engineers to build and ship products/updates at scale.
Why? Because designers and developers weren't speaking the same language, mocks were morphing into monsters and the timing was absolutely perfect.
In its first 13 years, Return Path (RP) had two primary goals -- create products that work and collect and roll up as much email data as possible. In late 2015, however, RP made the decision to maintain those two goals, but do so with systematic design thinking at the forefront.
The new goal was threefold -- a transition from a legacy backend, redefine the visual style and user experience, AND then scale design as a system across all Email Optimization products. Formally named NextGen, our task was to think about Return Path's product suite with the future in mind.
The RP design system focuses on foundational elements like text styles and a component library in Sketch. The patterns designed using the system are unique to the products using the system. UI solutions should be designed to suit the content, as opposed to fitting content to the design. Until now, the system had evolved on an ad hoc basis, creating and saving new patterns from scratch. The task now was to completely re-design existing products and content with a design system.
Prior to my arrival at RP, a major visual audit was conducted. This audit identified and grouped patterns, eventually allowing us to decide which to keep, replace, join or throw out.
Along with a team of two designers, one design manager, a design researcher and a senior developer, we designed a new pattern library using the synthesis of our initial audit and the frameworks of how our products functioned today. That was the fun part — the hard part was getting any of this validated, built and established.
Daniel Price (designer)
Jill Butcher (developer)
Jon Bell (design manager)
"The business wants to scale design, but we can't wait forever. A new look and feel is also a great way to excite customers as well..."
We needed to move somewhat quickly to deliver, but we also needed to take the proper time to test and validate not only the design system, but also the user experience of the products as we developed that system. In fail fast fashion, we prioritized products by looking at usage data, user feedback and created a plan to build one product at a time so that we could properly test and roll out updates consistently.
At this point in the story we've done a few different things:
1. Audited the suite of Email Optimization products and crossed out all the states, interactions and visuals that negatively affected the UX.
2. Synthesized that info and loosely grouped patterns, modules, content, data and language that was specific to each product and/or product type.
3. Established a plan of action with both Product and our business Stakeholders - agreeing that we needed to find the balance between moving quickly and building modularly. The outcome of this was to build the design system by re-building one product at a time via beta testing.
We had agreed with the engineering team that the best course of action was to build pattern-by-pattern, product-by-product. I ranked the new patterns by their impact on user experience, their disruption to other patterns and projects in our roadmap, and our key business metrics — prioritizing what the team should focus on building first. Ultimately I handed off this prioritized plan, with a network of design system documentation, mockups and assets.
Shortly after that, I moved onto a new project but helped set the team up for success as they rebuilt each product via the design system, iterating on both the product and the system through beta testing and user interviews over the course of the next 9 months.
With every new project, we're further stress-testing, learning and improving upon the design system.