Home

Portfolio

My Story

Process

Contact

Home

Portfolio

My Story

Process

Contact

Picture of the Macy's design system showcasing assorted elements and components.
Picture of the Macy's design system showcasing assorted elements and components.
Picture of the Macy's design system showcasing assorted elements and components.
Picture of the Macy's design system showcasing assorted elements and components.

2013-2016

iOS

Expertise

Product Design

UI/UX

Design System

Research Lead

Strategy

Deliverables

Roadmap

Research Agenda

Research Insights

Design Assets

Specs

2013-2016

iOS

Expertise

Product Design

UI/UX

Design System

Research Lead

Strategy

Deliverables

Roadmap

Research Agenda

Research Insights

Design Assets

Specs

2013-2016

iOS

Expertise

Product Design

UI/UX

Design System

Research Lead

Strategy

Deliverables

Roadmap

Research Agenda

Research Insights

Design Assets

Specs

2013-2016

iOS

Expertise

Product Design

UI/UX

Design System

Research Lead

Strategy

Deliverables

Roadmap

Research Agenda

Research Insights

Design Assets

Specs

DesignSystem

In 2013, Macy's underwent a pivotal shift, initiating the development of 100% native mobile apps for both iOS and Android. Prioritizing native apps marked a significant departure from their previous focus on the mobile web being the only customer experience offered to customers. Given the opportunity to commence from scratch, the concept of a design system or reusable asset library began to take shape.

DesignSystem

In 2013, Macy's underwent a pivotal shift, initiating the development of 100% native mobile apps for both iOS and Android. Prioritizing native apps marked a significant departure from their previous focus on the mobile web being the only customer experience offered to customers. Given the opportunity to commence from scratch, the concept of a design system or reusable asset library began to take shape.

DesignSystem

In 2013, Macy's underwent a pivotal shift, initiating the development of 100% native mobile apps for both iOS and Android. Prioritizing native apps marked a significant departure from their previous focus on the mobile web being the only customer experience offered to customers. Given the opportunity to commence from scratch, the concept of a design system or reusable asset library began to take shape.

DesignSystem

In 2013, Macy's underwent a pivotal shift, initiating the development of 100% native mobile apps for both iOS and Android. Prioritizing native apps marked a significant departure from their previous focus on the mobile web being the only customer experience offered to customers. Given the opportunity to commence from scratch, the concept of a design system or reusable asset library began to take shape.

Problem

Repetitive rebuilding of visual assets by Designers and Front-End Devs consumes considerable team resources. This not only leads to time wastage but also introduces design discrepancies, compromising user experience consistency and causing confusion regarding the accurate visual design.

Problem

Repetitive rebuilding of visual assets by Designers and Front-End Devs consumes considerable team resources. This not only leads to time wastage but also introduces design discrepancies, compromising user experience consistency and causing confusion regarding the accurate visual design.

Problem

Repetitive rebuilding of visual assets by Designers and Front-End Devs consumes considerable team resources. This not only leads to time wastage but also introduces design discrepancies, compromising user experience consistency and causing confusion regarding the accurate visual design.

Problem

Repetitive rebuilding of visual assets by Designers and Front-End Devs consumes considerable team resources. This not only leads to time wastage but also introduces design discrepancies, compromising user experience consistency and causing confusion regarding the accurate visual design.

Execution

The initial iteration of the iOS app was driven by ambitious project timelines set by stakeholders, aiming for a rapid market entry. Our primary goal was to validate the platform's demand and secure long-term viability. Achieving a functional V1 within just 8 months, we swiftly gathered early feedback, paving the way for strategic future planning. The implementation of a robust design system became imperative for sustained efficiency.

1

Core Elements

Establish core elements aligning designers & brand identity.

Picture of three pages of the core components that make up the Macy's Design System.

2

Components

Using core elements create more complex reusable components.

Picture assorted componetnts that make up the Macy's Design System.

Execution

The initial iteration of the iOS app was driven by ambitious project timelines set by stakeholders, aiming for a rapid market entry. Our primary goal was to validate the platform's demand and secure long-term viability. Achieving a functional V1 within just 8 months, we swiftly gathered early feedback, paving the way for strategic future planning. The implementation of a robust design system became imperative for sustained efficiency.

1

Core Elements

Establish core elements aligning designers & brand identity.

Picture of three pages of the core components that make up the Macy's Design System.

2

Components

Using core elements create more complex reusable components.

Picture assorted componetnts that make up the Macy's Design System.

Execution

The initial iteration of the iOS app was driven by ambitious project timelines set by stakeholders, aiming for a rapid market entry. Our primary goal was to validate the platform's demand and secure long-term viability. Achieving a functional V1 within just 8 months, we swiftly gathered early feedback, paving the way for strategic future planning. The implementation of a robust design system became imperative for sustained efficiency.

1

Core Elements

Establish core elements aligning designers & brand identity.

Picture of three pages of the core components that make up the Macy's Design System.

2

Components

Using core elements create more complex reusable components.

Picture assorted componetnts that make up the Macy's Design System.

Execution

The initial iteration of the iOS app was driven by ambitious project timelines set by stakeholders, aiming for a rapid market entry. Our primary goal was to validate the platform's demand and secure long-term viability. Achieving a functional V1 within just 8 months, we swiftly gathered early feedback, paving the way for strategic future planning. The implementation of a robust design system became imperative for sustained efficiency.

1

Core Elements

Establish core elements aligning designers & brand identity.

Picture of three pages of the core components that make up the Macy's Design System.

2

Components

Using core elements create more complex reusable components.

Picture assorted componetnts that make up the Macy's Design System.

Final Product In Use

Results

Results

Results

Results

Speed

Designers experienced a significant boost in speed. With 70% of the basic page items pre-designed and coded within the system, both designers and developers gained the freedom to concentrate on higher-priority tasks.

Consistency

The interconnected base elements facilitated simultaneous refinements across multiple apps, ensuring uniform style changes and updates with minimal design and tech efforts.

Focus

Previously, design reviews were laden with questions about component selection and location. The implementation of our new system eliminated these uncertainties, enabling designers to dedicate their focus squarely on addressing user problems.

Refactoring

While the initial project lacked adequate time for system development, it necessitated substantial refactoring work for developers. Nevertheless, the decision to revisit and incorporate these changes was pivotal for setting up the platform for future success.

CoreElements

CoreElements

To start the system we collected all the core elements. Colors, type treatments, card styles, buttons, links, tooltips paddings, etc. These gave us the core aspects that everything inside the app would be built with and allowed everything to be on brand and consistent.

Colors

BrandRedCore

BrandBlueDark

BrandBlueCore

BrandBlueLight

BlueDark

BlueCore

BlueLight

BlueLighter

BlueLightest

GreenDark

GreenCore

GreenLight

GreenLighter

YellowDark

YellowCore

YellowLight

CharDark

CharCore

CharLight

CharLighter

CharLightest

GrayDark

GrayCore

GrayLight

GrayLighter

GrayLightest

Cards

Hi there, Kim!

View Account

Tooltip

This store has multiple buildings. Select a building above to see its directory.

Padding

30pt

15pt

10pt

Examples

Color: Aqua Blue

Size size chart





120 x 90

Gift Card ****1234

$29.00 applied

Form Fields

Textfields

Field Label

Field Label

Field Label

Pop

Field Label

Populated

Field Label

Lorem ipsum dolor sit

Dropdowns

Dropdown Label

Populated

Dropdown Label

Lorem ipsum dolor sit

Dropdown Label

Toggles

Toggle Label

Toggle Label

Typography

Headers

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Page Content

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Page Content

Lorem ipsum dolor sit amet, consectetur adipisc-

ing elit. Praesent vehicula nunc eget justo ele-

mentum laoreet. Aliquam elementum ipsum vel

convallis pulvinar. Nullam rutrum congue efficitur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Praesent vehicula nunc eget justo elementum laoreet.

Aliquam elementum ipsum vel convallis pulvinar. Nullam

rutrum congue efficitur.

Pricing

$999.99

$999.99

Buttons

primary button

secondary button

disabled button

Button Spacing

primary button

button half

button half

Expand/Collapse

more details

less details

Text Link

General Link

Section Headers

General Section Header

General Section Header

General Section Header

Segmented Controllers

Scrolling Menu

Home

Men’s, Children & Furnishings

Kitchen & Homegoods

Women’s

Women’s

Main

Women’s

Home

Static Menu

Main

Women’s

Home

Main

Home

Accordions

Women’s

Floor 1

• Casual wear

• Makeup

Floor 3

• Shoes

• Business wear

Full text field

ReusableComponents

Reusable

Components

After the core elements were built we shifted to putting them to use and constructing anything in the app that was repeated in multiple places. Headers, list & grid views, text fields, review cards and trackers are just a few to mention. Instead of having to track and maintain each place these were used we now could pull the prebuilt versions again gaining speed and consistency across the entire experience.

Page Headers

3:10 PM

Primary Variations

3:10 PM

Submit

3:10 PM

Add

3:10 PM

With Text

3:10 PM

Truncate If Neces...

Inactive

Left

3:10 PM

Title

Right

Left

Search

3:10 PM

Enter city, state or zip

3:10 PM

Enter city, state or zip

3:10 PM

12345

Bottom Additions

women’s dresses

Filter by

Sort by

Results: 12345

Active Search

3:10 PM

Cancel

Search or enter web ID

List Items

Content Basics

Text Content

-$XX.00

Examples

List Item

List Item

List Item

Gift Card ****1234

$29.00 applied

Biggest Denim Event

of the Season

$10 Off Select Denim

Ends 05/15/2016

-$10.00

Macy’s American Express® Card

****1234, exp 01/16

Default Address

Katy Smith

12345 Main Street

San Francisco, CA 94105

Default Address

Katy Smith

12345 Main Street

San Francisco, CA 94105

3 items

Picked up 01/11/2016

January 10, 2016

Order #1177449463

$259.25

3 items

Picked up 01/11/2016

January 10, 2016

Order #1177449463

$259.25

May

19

Macy’s celebrates Asian...

5:00pm

Reviews

December 5, 2011

Fabulous, flattering little black dress

I can hardly ever seem to find a nice A-line dress to flatter my pear-shaped figure. As soon as I saw this on the rack I knew it had great potential, and when I tried it on it exceeded my

katysmith84

San Francisco, CA • 30-39

Was this helpful?

109

22

Order Tracking

est. delivery date: 03/18/2016

In transit

List Views

List View Large

5 colors available

Brand Name

Product name Line1

Product name Line2...

$59.99

Enjoy 40% off

selected baby

(999)

5 colors available

Brand Name

Product name Line1

Product name Line2...

$59.99

Enjoy 40% off

selected baby

(999)

5 colors available

Brand Name

Product name Line1

Product name Line2...

$59.99-$99.99

Enjoy 40% off

selected baby

(999)

List View Small

5 colors available

Brand Name

Product name Line1

$59.99

(999)

5 colors available

Brand Name

Product name Line1

$59.99

(999)

5 colors available

Brand Name

Product name Line1

$59.99-$99.99

(999)

List View Small Cards

Brand Name

Product name Line1

$59.99

(999)

Brand Name

Product name Line1

$59.99

(999)

Brand Name

Product name Line1

$59.99-$99.99

(999)

Browse Grid

Grid View

INC Internation...

Embellished Keyhole

Maxi Dress

$59.99

Enjoy 40% off

selected baby

(999)

5 colors available

Brand Name

Product name Line1

Product name Line2...

$59.99

Enjoy 40% off

selected baby

(999)

5 colors available

INC Internation...

Embellished Keyhole

Maxi Dress

$59.99-$99.99

Enjoy 40% off

selected baby

(999)

5 colors available

Profile Photos

Dashboards

Payment Due:

5/31/16

Order Arrives:

5/11/16

Hi there, Kim!

View dashboard

Groups

Comments

katysmith84

Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Fusce euismod odio quis leo volutpat auctor. Nunc a consequat ex, ut fermentum risus.

Profile

Katy Smith

San Francisco, CA

Profile

Orders

Address Book