Nordstrom sites and apps regularly rely on modality to present information and interactions to customers without having to leave the context of their current shopping journey. Though there were some consistencies between the many dialogs, popovers, toasts, and sheets in use, there was no formal component or design standard.
As the first official “modal” component in the design system, we needed to establish a baseline that could apply to future components in the modal category. Originally scoped to tackle bottom sheets, I led us to pivot to modal dialog since it would cover more use-cases and be a more extensible foundation for the future.
At this time I was simultaneously working with another team on a major redesign of our Content Management System, but was asked to work on this component given its high complexity.
My primary responsibilities included:
I audited all usage of any component in the category of “modality”, collecting over 100 instances across desktop web, mobile web, iOS (tablet & phone), and Android. I annotated each instance along four dimensions: platform, visual presentation, modal/non-modal, and function. By sorting along those dimensions, I analyzed most common visual presentation by platform, how the same feature varies across platforms, and identify the most common types of content modals support.
Originally scoped to tackle bottom sheets, the findings of my audit led us to pivot to modal dialog since it would cover more use-cases and be a more extensible foundation for the future.
We also decided to descope iOS and Android, as native app engineering resources were not immediately available, so our release would have had to be delayed or staggered.
While reviewing early iterations in critique, I noticed that feedback about one part of the modal would often contradict feedback on another part. Also, discussions about certain design decisions were feeling too subjective and disconnected.
I realized that while I had broken down the design into different parts, it was hard to understand (and therefore critique) what all the different decisions were and how those decisions fit together. To address this, I created a design decision log, where I broke down component design into discrete parts, included context and open questions, and recorded final decisions. My Figma file was organized to match, with separate pages exploring each element.
This method made it significantly easier to review proposed solutions, understand how decisions affect the component as a whole, and keep track of unanswered questions. Other design system designers have adopted the design decision log in their own work.
Since the modal dialog has very specific responsive behavior, affecting its layout and positioning based on screen size, it was important to bake as much of that into the Figma component itself rather than relying on designers to learn and remember all the styling rules.
The Figma component mirrors the React component API, supporting multiple widths, min/max heights, scroll behavior, responsive size/position, and toggling the footer actions. It supports text-only content or swapping a local component instance into a ‘slot’ component.
I generated a base specification from the Figma component, using EightShapes' Specs plugin, making adjustments for clarity and to reference design tokens where relevant. I added separate sections for each of the component’s props, as well as responsive behaviors and theming.
Since Figma can be limiting when specifying components with complex interactions, I regularly reviewed the Storybook throughout development and UAT, inspecting the CSS to troubleshoot styling issues and inconsistencies.
Collaborating with our content designer, I created the documentation template we use for UI components. Following this template, I wrote component guidelines and created visual assets for our documentation site. This documentation is intended for all consumers (UX, engineering, product, etc.), though the designers and content designers are the most common user. With a broad audience, we aim to keep our writing clear and non-technical.
To help designers get acquainted with the new component, I created before/after reference mockups for ~40 modals across different areas of the site. These were not intended to be production-ready, but it helped to generally illustrate the updated guidelines as applied to real use cases and to highlight how to use the various properties in Figma.
