Creating a design system that encompasses multiple brands from scratch, with the aim of uniting Gap, Inc. brands under a shared foundation of design language that UX, brand designers, engineers, product managers and stakeholders can use as a single source of truth.

1. Challenges faced

When I joined the design systems team, I discovered that the previously established design system for Gap brands had placed a significant focus on the engineering aspect, neglecting the design side almost entirely. As a result, the designers had no system to adopt. Furthermore, multiple sources of truth were available, but they were not regularly updated, which resulted in confusion and lost time. The designers had no handoff process, exacerbating the problem.

2. Getting started

Due to the immediate need for a design system for the stores team, I was reassigned from brand work to construct the store's design system. Fortunately, this occurred at an opportune moment, as the store's library was expected to be smaller in scale, allowing us to concentrate on the users' specific needs during development. Despite having to work at a rapid pace, it was essential to establish the library with a strong foundation to ensure that text and color modifications could be made with ease.

3. Stores build

When my partners from Stores gave me components to build, we realized that we needed more information to turn designs into components. To solve this problem, we created a Designers Handoff File in Figma and a checklist that must be completed before building a component, including due date, designer name, design type, team review, request review with Design System, Jira #, and due date. This saved time by eliminating the need to search through emails and Slack for the correct specs. Additionally, it allowed other designers to give input into the component to meet their needs by having their team review it before handing it over. We also created a Dev Handoff Figma file with a two-step process. First, I placed a new component in the Figma file and tagged the dev to notify them that it was ready to build. Once built, I placed it in alphabetical order on a second page for devs and project managers to use as a reference. This removed the need for designs to create specs in their document and provided one place for devs to access specs without having to dig through designers' files.

4. Learnings & interviews

During the speedy store build, I gained valuable insights that could be applied to the brand's design system. It became apparent that a handoff process involving designers, design system designers, and developers was necessary. To gather feedback and requests, I distributed a questionnaire to the entire UX team, which yielded some great ideas. One of the suggestions was to create a sticker sheet that would allow designers to visually browse the components and copy and paste them into their workflow. After taking in all the learnings, I created a process flow to share with the UX team once the brand library was completed.

5. Brand library build

With the Stores library built, I could shift my attention back to the brand libraries. I began by developing the typography and color pallet, followed by designing sticker sheets for both. Then, I proceeded to build out the components, which ranged from simple to complex, always using accessibility standards.

6. Finding a component

Due to the large number of components in the library, it became difficult for designers, including myself, to remember all of their names. Figma's built-in list of items and search feature are two ways to search, but for the more visually-oriented designers, I created a sticker sheet that contained instances of all components in alphabetical order. They can simply copy and paste these components into their work file. As it turned out, this sticker sheet proved to be the most popular of the three methods for finding components.

7. House cleaning

We had several places where documentation was stored and when you have multiple sources of truth with some not updated, people will not trust your design system. My awesome boss, Justine Luis, really had to fight for a better solution, and was ZeroHeight. ZeroHeight allowed us to document the guidelines for using the components, the color palette, and the typography and examples of how the guidelines have been applied in practice. ZeroHeight also made component updated easy as they allow instances of the master Figma component within their files. Update Figma, ZeroHeight is updated.

8. Onboarding

During the interview process, I discovered that some of our designers lacked the necessary knowledge to use the components in our library, as well as the typography and color palette. Additionally, they were not familiar with many of Figma's features. To address this issue, I created and led the team to developed onboarding documents and video tutorials that covered topics such as the Design Systems Handoff, Terms & Conditions, Customizing a Component, Swapping Branded Components, and Component Fix. I delegated this task to my colleagues and was extremely pleased with the high-quality work they delivered.

9. Sharing

I asked for a time slot during our weekly UX meeting to present the enhanced design system, handoff process, and onboarding documentation. The demonstration received a positive reaction as I showcased how its usage can potentially reduce design time by up to 35%, according to a Figma study. After the presentation, we sent out messages on Slack and email when component and design systems updates had been made to keep the team informed.

10. Results

• Smoother handoff to design system designer & dev team.
• Embeds the design system into the design process making it easier for designers to adopt.
• Gives the design system team Jira tickets & due dates.
• Norming a component with your team before handoff allows the component to be useful for all team members.
• Allows UXDS to make suggestions. Handoff file provides design & information in one place.
• Devs will not have to reference UXD design files for redline specs. They will have one place dedicated to them for specs & variants.
• Devs will know the component is finalized & ready to develop.
• Helps promote accessibility into the design process.
• Creates accountability amongst team members, and easy tracking for when something goes wrong.
• A source of truth for everyone.  

Gap Stores Address Biggest Customer Frustration With New “In-Stock” Mobile App

Gap Inc. is dedicated to listening to customer feedback and addressing their concerns. One of the biggest issues customers face is not being able to find the item they want in their size when they visit a store. Our research revealed that the item was available in the store around 40% of the time, but it was located in the stockroom rather than on the sales floor. This led to customers leaving the store disappointed, and a potential sales opportunity being missed.

Getting started

Together with the UX Architect, Product Manager, Engineers, and myself, we collaborated on developing initial solutions and took a prototype to stores to obtain feedback from associates. This feedback allowed us to refine and iterate on our ideas, resulting in a minimum viable product (MVP). As we continued to explore the project, we made adjustments to our workflows based on what we had learned, and repeated this process for additional flows.

How it works

The first step in using the "In Stock on Shelf" app is to scan the units into the system, including details such as size, color, and stockroom location. Whenever an item runs out of stock on the sales floor, instead of manually checking the racks, sales associates are promptly notified on their mobile device to replenish the item. Likewise, if a customer is unable to locate a particular size, an associate can easily scan the barcode of the item in question. The app then provides a comprehensive list of all available sizes and colors for that item in the store. If the desired size is available, the app indicates its stockroom location, streamlining the process for the associate and ensuring that the customer finds exactly what they need.

Results

The new technology implemented in Gap stores, called the "In Stock on Shelf" app, has received positive feedback from store teams who have described it as "brilliant," "remarkable," and even "life-changing." Since its deployment, the rate at which items are available in the stockroom but not on the sales floor has decreased to just 1% across all stores. This means that customers looking for specific sizes and colors can now easily find them on the sales floor.Hans Jacobsen, district manager of Gap stores in Minnesota, has praised the time-saving benefits of the app, stating that store associates no longer waste time searching for products in the backroom. Instead, the app allows them to view available inventory in real-time and locate items quickly and efficiently.In addition to facilitating the replenishment of sold merchandise with back stock, the "In Stock on Shelf" app also generates a real-time replenishment report that takes into account what has sold and where replacement units can be found. Visual teams have found the app particularly useful, as it enables them to make informed decisions about merchandising based on inventory levels.The app's seamless integration with Gap Inc.'s other retail technology means that when an item is out of stock, associates can quickly find it online using the "Order in Store" app, ensuring a positive customer experience.The success of the "In Stock on Shelf" app in Gap stores has led to its pilot implementation in the company's other brands.

Gap, Inc. responsive website build.

Gap, Old Navy, Banana Republic and Athleta were in need of a major redesign to make the sites responsive and modern. The redesign would give the brands more tools, the ability to change CSS, fonts and a new navigation system..In my roll with the Navigation Path, I teamed with Customer Insites. We ran user testing using several prototypes and gathered data. Next we refined the designs, tested again and presented our findings to the brands.Since 4 brands were involved, this meant communicating with their team. Each brand is very different so we had few challenges ahead of us.

Working with brands

During the our meeting, my teammate and I presented the new navigation to each brand separately, along with our test results. We informed them that they had the flexibility to customize the colors and fonts, and that the process would be much quicker than it had been in the past.

The build

provided the dev team with pixel-perfect visuals, red-lines, and pattern documentation. When the front end developer was ready for a visual QA, I used Chromes Inspector to view the code, made adjustments and sent them back to the developer.

Results

Thanks to these changes, our customers are now able to navigate much more easily on all devices, and our brands have convenient access to customize fonts and colors as needed.

I'm a big fan of music apps and as a music lover, I appreciate all that they offer. However, I've noticed that they aren't very "thumbs first" in terms of ease of use. I didn't create any wireframes for this project, as it was more of a visual design exploration. Instead, I spent time examining various music apps and identifying the common components between them, as well as noting what I did and didn't like about them. I focused on creating a design that could be navigated primarily using the thumb, and added features such as groups and live concerts/shows.

Prototyping improves efficiency

Ever find it difficult to explain micro-interactions, page flows and interactions to a stakeholder, client or developer? Using words like animation tend to scare PM's as it surely will be out of scope! One of the best tools I've used to sell my work is prototyping. Even small prototypes. When a partner or client is allowed to see and feel these micro-interactions they often find the justification in why they are important. Below are some examples I have created and used in projects.

A fun project that took me out of the norm

I had the opportunity to take part in Tesla's design challenge, which involved creating an energy flow feature. Out of the 250 portfolios that Tesla reviewed, I was among the top 10% of designers invited to submit my work. It was a novel experience for me since I had never before designed UI flows for onboard vehicle systems. This challenge prompted me to consider the safety and hand reach of the driver. By making the controls easily accessible and within reach, drivers could keep their focus on the road rather than diverting their attention to locate action buttons on the screen.

Older work