Reducing Design Complexity

Details into the redesigned experience and how the project has evolved over time.

Jon Yablonski
Oct 3, 2016 · 4 min read

To distill a design down to its simplest form, designers must reduce complexity and eliminate anything that distracts from the primary goal of the user. This process is often time-consuming and only possible through repeated iteration and refinement. To help in this process, there are a few strategies I’ve found quite effective when it comes to reducing complexity in my work: thinking mobile-first, leveraging progressive disclosure, and designing with progressive enhancement.

Mobile First

This strategy is effective for simplifying designs because it eliminates the need to cram complex desktop experiences into mobile screens. The result is a design that is focused on key tasks and content without the extraneous obstacles, and therefore a better user experience.

Example of Mobile First

News websites have long been a great example of desktop-centric experiences that fail at providing mobile-friendly content without resorting to a separate mobile version. One stand out exception to this is It’s clear on the Guardian website that smaller viewports have been prioritized by the lack of extraneous elements. As a result, the experience is mobile-friendly without resorting to a separate mobile site, and additional content is revealed as the browser capability and screen real estate increases.

Progressive Disclosure

Anytime we use a dropdown, accordion, or toggle that reveals content that is hidden by default, we are utilizing progressive disclosure. This strategy is incredibly useful for simplifying designs because it enables us to defer less important actions, advanced features, or additional content to a secondary screen (like a dropdown, accordion, or content toggle).

Example of Progressive Disclosure

A great example of progressive disclosure can be found on by hovering the mouse over any item in the primary navigation, a menu will appear that reveals the various links in that category. Stripe has created a simple interface in which users can quickly scan and find relevant information without needing to dig through a mountain of content in the process.

Progressive Enhancement

Progressive enhancement can effectively simplify designs because it requires a shift in mindset: reprioritize the emphasis to what is essential in the experience. It’s a subtle shift that has a lasting effect: spend more time on what’s important and less time on what’s nice-to-have.

Example of Progressive Enhancement

A Bear’s-Eye View of Yellowstone by National Geographic is a great example of progressive enhancement in action. This rich, interactive experience is built around a baseline experience: text and video that tell the story of a bears journey through Yellowstone. The baseline experience is enough to adequately tell the story, but additional features are introduced when additional browser capabilities and space are available. These additional features serve to simply enhance the user’s experience — they aren’t core to the essential content.

By following the strategies I’ve outlined above, it’s possible to dramatically reduce unnecessary complexity in your designs. The result will be an improved user experience that allows users to focus on the pertinent content or features. Give them a try and see how they not only simplify your designs, but simplify your design workflow.

Jon Yablonski

Written by

Product Designer •