Building a design system from the ground up

When I joined the team at Neiman Marcus, I was hired to work on the re-platforming of the Connect App. Joining a team of 4 other designers, I assumed there would be some sort of process to follow, a system in place, a defined roadmap.

I was mistaken.

Our team was made up of newly hired designers, meaning we were thrown into the deep end. We had no sketch or illustrator files with designs from the current platform, no design system, and no formal process for re-platforming. Given time constraints, the team had dived head first into redesigning, and immediately I started to notice inconsistencies between each designers work.

‍

The beginning

I began by collecting all the files we were currently working on, and identified inconsistencies between components, and began discussions to understand what we wanted in our system.

‍

My approach

Given that I was building a design system whilst my teammates were designing new screens by the minute, I took a methodical approach to this system. I began by establishing a font library, a color library, and an icon library.These acted as foundational pieces that allowed me tp begin building components.

‍

‍

Educating the team on the system

To reduce friction and encourage my teammates to begin using the system, I included notes on the color library providing additional information regarding when to use which colors.

This ensured consistency among team members designs.

‍

‍

‍

Creating reusable components

I continued building out the design system by building components such as navigation bars, page headers, sub-navigation, accordions, text links, buttons, product cards, progress bars, and more.

From there, I started reusing these smaller components to build robust larger components, so that every bigger component was made up of smaller reusable elements.

Maintaining the system

Equally as important as building the system was maintaining it. I maintained the system in 3 different ways:

• Maintenance through peer feedback (issues flexing/shrinking components, changing states)

• Maintenance through Figma updates (adapting our design system to utilize new features such as max/min width, variables and advanced prototyping)

• Maintenance through progressively building out the system (added components on a needs basis)

Design system analytics

Aside from ongoing communication with my team, another tool I use to assess the usefulness of the design system is Figma’s built-in analytics.

These analytics are able to expose information such as which components are used most often, how many times components are being detached from their primary component, and even which instance is most used.

I observe the usage here and will often go back to my team and ask why they don’t use certain components so that I can remove unnecessary ones, or edit their composition for easier use.

‍

Wrap Up

The implementation of the design system contributed to the business by:

• Significantly reducing screen design time, leading to quicker execution and handoff to engineers

• Empowering engineers to verify components for pixel perfect execution

• Establishing a centralized point of reference for designers to validate their work