Macy's Design System

Macy's Design System

Overview

A design system drives efficiency in building experiences at scale. It bridges the gap between design and development by communication through a singular source of truth.

OVERVIEW

A design system drives efficiency in building experiences at scale. It bridges the gap between design and development by communication through a singular source of truth.

OVERVIEW

The brief for this project was to streamline product discovery through a A design system drives efficiency in building experiences at scale. It bridges the gap between design and development by communication through a singular source of truth.

OVERVIEW

A design system drives efficiency in building experiences at scale. It bridges the gap between design and development by communication through a singular source of truth.

OVERVIEW

A design system drives efficiency in building experiences at scale. It bridges the gap between design and development by communication through a singular source of truth.

Role

The Macy’s Design System is a collaborative effort among multiple designers and engineers. I am the designer focusing on the iOS and Android apps, maintaining parity across platforms and working with the mobile app UX and engineering teams to create solutions when platform-specific deviations are necessary.

Problem

How might we facilitate the design to development workflow?

 
After speaking with several iOS and Android engineers, I found that there is no documentation for engineers to reference when looking for UI components to reuse and that designers hand off their designs with specifications done by hand or by InVision. Because of this, engineers end up building components from scratch for each screen, making it difficult to make global styling changes. Similarly, as we move towards a new styling for Macy’s brand, the design team needs clear documentation for the patterns and components to use in various scenarios.

Problem

How might we facilitate the design to development workflow?

 
After speaking with several iOS and Android engineers, I found that there is no documentation for engineers to reference when looking for UI components to reuse and that designers hand off their designs with specifications done by hand or by InVision. Because of this, engineers end up building components from scratch for each screen, making it difficult to make global styling changes. Similarly, as we move towards a new styling for Macy’s brand, the design team needs clear documentation for the patterns and components to use in various scenarios.

Problem

How might we facilitate the design to development workflow?

 
After speaking with several iOS and Android engineers, I found that there is no documentation for engineers to reference when looking for UI components to reuse and that designers hand off their designs with specifications done by hand or by InVision. Because of this, engineers end up building components from scratch for each screen, making it difficult to make global styling changes. Similarly, as we move towards a new styling for Macy’s brand, the design team needs clear documentation for the patterns and components to use in various scenarios.

Problem

How might we facilitate the design to development workflow?

 
After speaking with several iOS and Android engineers, I found that there is no documentation for engineers to reference when looking for UI components to reuse and that designers hand off their designs with specifications done by hand or by InVision. Because of this, engineers end up building components from scratch for each screen, making it difficult to make global styling changes. Similarly, as we move towards a new styling for Macy’s brand, the design team needs clear documentation for the patterns and components to use in various scenarios.

Problem

How might we facilitate the design to development workflow?

 
After speaking with several iOS and Android engineers, I found that there is no documentation for engineers to reference when looking for UI components to reuse and that designers hand off their designs with specifications done by hand or by InVision. Because of this, engineers end up building components from scratch for each screen, making it difficult to make global styling changes. Similarly, as we move towards a new styling for Macy’s brand, the design team needs clear documentation for the patterns and components to use in various scenarios.

Sketch Symbol Library

The quickest and easiest way to onboard new designers to our style guide was to provide an organized Sketch symbol library with the components. As this was not a funded project, I spent whatever downtime I had to put together this library with the help of our summer intern.

Screen Shot 2019-09-26 at 3.24.32 PM

UX Documentation

Concurrently with the symbol library, I began writing documentation for styling and components on Confluence, which could be accessed by both engineers and designers.

Typography

Macy's iOS app uses SF Pro Display Light and Medium. The versatility and elegance of this font in these weights elevate the look and feel of the app without weighing it down. The taller x-height and rounder characters match the circular letters of the Macy's logo while the straight edges reflect the edges of the Macy's star. These characteristics contribute to a friendly and approachable, yet streamlined brand identity for the app.

typography specs1

Buttons

Buttons are used to initiate, progress or complete an action. As a primary point of navigation through the app, buttons must placed and labeled consciously with careful attention to hierarchy. Primary buttons should be used to highlight the most important actions a user can take while secondary buttons can be used for other actions within the experience.

buttons specs