RRS UI Library | UX Design

UI Component Inventory
Rack Room Shoes

Project Overview

A. The Challenge

Create a full UI component inventory (i.e. UI library) on Figma of all existing components in preparation for a new design system.

B. My Role

I was the sole practitioner creating, cataloguing, and designing the UI library.

Weekly meetings with the UX manager were to update and discuss project progress.

C. Responsibilities

Utilize the Inspect Element tool to analyze pre-existing components: HTML, CSS, padding, margins, font, line height, and hex colors; document and organize components on Figma; and assist with cross-functional collaborative meetings.

D. Timeline

3 months: Create a full inventory of web, tablet, and mobile components.
6 months: Add mobile app and email components.
9 months: Finalize all specs and organization for design system.

First Phase (3 months):

Inspect Element tool

Setting up Figma pages

Component Specs

Inspect Element

HTML & CSS were analyzed using the Inspect Element tool to ensure proper padding, margins, line height, borders, hex colors, and fonts were designed and entered into Figma accurately.

Screen Shot 2022-04-24 at 10.52.44 PM.png

Figma Pages

Titles for pages were given in order to mimic the future design system (e.g. Buttons, Icons, Modals, etc.). Each page included frames for desktop, tablet, and mobile, which displayed components side-by-side for easy comparison.

Component Specs

Each component's specs were noted appropriate to its type. Buttons with text would have font, size, hex color code, line height, padding margin, border, and background color, while images would simply have dimensions, padding, and margin.

Second Phase (6 months):

Mobile App &

Email Components

Mobile App

Unlike the desktop, tablet, and mobile viewports on a browser, the mobile app components were created from screenshots, without the Inspect Element tool. All specs for padding, margin, font, etc. were given for each component.

NOTE: The orange is deliberately "different" as the branding colors are changing.

Email Components

Similar to the mobile app, many Figma components for email were created from screenshots based on SalesForce images, along with some emails sent and inspected on the browser.

Email components were created using the Litmus email marketing platform for Gmail in Chrome, Apple Mail (iOS 14.2), and Gmail App (Android 10.0) - light and dark modes.

Third Phase (9 months):

Preparing for the

Design System

A. Phase Three Role

For the final phase, I reorganized and renamed components to suit the proposed design system with Bootstrap, created additional components, and prepared the UI component inventory for the next steps with the UX Design Team.

B. What I Learned

For this project, I spent many hours using the Inspect Element tool, which gave me a better understanding of HTML and CSS. I researched
other design systems, their naming conventions and organization. A lot of attention to detail went into this project, which further developed my own "eye" for detail.

C. Next Steps

The UX Design team will meet over several weeks to collaborate on component naming conventions, naming of Figma pages, and which components to continue to utilize moving forward with the design system.

UI Component Inventory Rack Room Shoes