The three R’s of product design
Three guidelines that can help you create a consistent and seamless experience for your product
As a designer, I’ve always prided myself on creating new and innovative designs. However, in my line of work, specifically — designing a giant platform with various features, sometimes you have to be practical and start from something that has already exists. You’ve probably heard of the three r’s of sustainability, which are reduce, reuse, and recycle. Here, I’d like to introduce the three r’s of product design to you. The point of these three r’s is to ensure that you’re optimizing your time and creating consistency throughout your entire product.
Reduce special snowflakes
A “special snowflake” is usually defined as a design component or pattern that is completely unique to the use case or feature that you are designing. Novice designers, who aren’t familiar with design patterns, tend to create these during their initial design projects, as a way to show off their design thinking. While these special snowflakes might be a great expression of your creativity and could marginally improve the user experience, this improvement often comes at a significant cost of implementation for your engineering team. An alternative design might offer a similar experience, but be easier to implement.
One time, I worked with a designer who was working on a settings page for which she insisted on using a table with expanding sections. The design performed well with our users, but the development team realized that it couldn’t scale, due to the large number of sections (100+ sections could end up nesting under a row, to be precise, not including sub-sections). After a month of going back and forth and doing user testing on several iterations, we ended up going instead with a faceted search design that had already been implemented in a different part of the product. The faceted search performed just as well as the expanding section table in user testing, due to the familiar pattern lowering the learning curve for users. Implementing this faceted search also ended up reducing development time. This faceted search could have also reduced design time, had we gone with that approach first.
I would recommend using special snowflakes in cases where proven design patterns have failed to deliver a good experience in user testing. However, I also recommend actively striving to reduce your special snowflakes as much as possible. Your engineers and users will thank you for doing so. Engineers love reusing code and a reduced learning curve can help your users start using the product immediately.
Reuse your patterns
Instead of trying to make special snowflakes, try and reuse existing patterns, especially those that have already been implemented in the product. However, if you are going to create a component that is new, think about and discuss with your design team two of the following questions:
- Do we have a pattern that already exists that can address the use case I’m designing for?
- If we do need to create a new component, where in the product can this component be reused?
Ongoing discussions with your design team about maximizing component reuse can have the benefits of reducing the overall design time while creating consistency across your entire platform.
Let me demonstrate with an example. A senior designer that I worked with was trying to come up with a way of viewing a detail of a row within a table. In the existing implementation of the product the detail would pop underneath the row but shove the rest of rows downwards. As a result, the user would have to scroll down constantly to navigate to other rows. This constant scrolling was painful for our users, because it slowed their workflow and did not allow them to easily compare details between rows. As a result, we needed a new design to resolve this issue. He ended up creating a bottom panel that would be overlaid at the bottom of the page, allowing users to quickly navigate between items and even included an ability to take users to a full page view of the details on another tab, allowing users to quickly switch between tabs.
This design was proven in user testing to be effective in providing our users details, because it allowed the user to maintain the context and quickly navigate between table row details. Because of its strong performance in user testing, we ended up using this component for detail panels throughout the rest of the product.
“The more designers use patterns, the more users come to understand them, making them more valuable for designers to use.” — Ben Gremillion
Personally, I am eternally grateful to my design system team for doing a ton of work to make components and patterns reusable. Maximizing reuse saves you valuable design time, while ensuring a consistent experience throughout the product.
Recycle designs if possible
There is a huge difference between recycling a design and just reusing a design. Reusing a design is taking something existing and changing the values of the components (such as the field headers, table values, etc.) to match your use case. However, reusing designs only works when you are targeting a similar use case. For example, if you’re creating another page with only a sortable table, you will typically reuse an existing design that has said table.
Recycling designs, on the other hand, is taking screens, layouts, and components that already exist in other designs and using them to create a new design using the previous designs as a starting point.
Recently, I recycled previous designs created by my teammates for a creation wizard that I was leading. After syncing with the product manager on what exactly needed to be in the wizard, I realized that there were existing designs that my team had that had the components and micro-interactions I needed. Not only was there an existing design of a creation wizard for a different feature, but there was a previous design including the filtering I needed and there were existing documented layouts for the manual creation of the feature. Additionally, all these previous designs had performed well in user testing and some were already implemented in the product. I took the parts that I needed from these existing designs and used them to create my wizard. The wizard ended up performing well in testing, with users citing the interaction being similar to other features within the product. The UI review with engineers ended up being painless, due to heavy recycling of existing components and micro-interactions.
Recycling is different from reusing because you’re applying existing micro-interactions and components to a new design problem. Recycling designs helped me create something that was new, yet familiar to customers and I was able to do it within a fraction of a time had I tried to make something from scratch.
Will the three r’s stifle my creativity?
You might think that by just reducing, reusing, and recycling, you’re not coming up with anything innovative or exciting. While this concern is understandable, it is unfounded. It will in fact, make you a better designer.
First, when you reduce the amount of special snowflakes, you save time for your development team and lower the learning curve for users. By reusing components and patterns, you save yourself from doing any unnecessary design work. Lastly, recycling designs will make you more creative, not less, because you will be taking something that exists and turning it into something brand new.
“Our new creations take what’s best in the past and take it to the next level. That leads to fast progress.” — Marcin Treder
If you’re looking for design inspiration, look at this dress made from recycled plastic bottles that Emma Watson wore to the 2016 Met Gala. It looks amazing on her and you would have never guessed that it came from plastic bottles.
You may be no Calvin Klein, but you too can create amazing deliverables using the three r’s of product design.
