Gap Inc.

GAP is expanding their in-store customer experience by introducing a product tool enhanced by digital experience. Prior to the app, GAP published and produced printed product tools each month, season, collection, and year. With the new GAP Product Tool App, each store associate can download the app and have all the multiple tools collected in one app on a digital platform. This allows associates to study the latest season’s collection and better help customers in stores.

gapappbanner2

My Role

I was the sole product designer (and developer) and worked alongside a product manager. As the only designer in a really small team, I had to make sure that the process did not only result in a visually pleasing product, but into something that makes sense and provides customers a means to quick conversion. I led the design and research phase, and presented major deliverables starting May 2017.

Defining the Problem

With 6 different product tools being printed in 8 different languages, GAP is investing hundreds and thousands of dollars into ensuring that store associates around the world are all up-to-date on the latest collections. Not only does this mean that a lot of money is invested into the store associates’ product knowledge, but this also goes to show the need for a streamlined process for the benefit of associates and their customers.

Facing the Challenge

Each of the current printed tools have their own function and character in establishing product knowledge. As the sole designer on the team, I found that the challenge that I was facing was to ensure that each of the functions and characteristics of each of the tools are integrated seamlessly together. On top of that, something that I was faced with was to design these tools, while adhering to GAP’s brand identity.

Field Research

To get a better feel for the different avenues of use cases for the Gap Product Tools App, I conducted user interviews with store associates in three different locations in SF and NYC. This helped me get a better understanding of their motivations, goals, and pain points. With this information in mind, I was able to frame design and planning phases, as well as determine what vision/impact this app should have on a global scale.

GAP user personas

Steady Approach

From the multiple conversations with associates, it was clear that the multiple tools each had their own characteristics, purposes, and specific use cases. Some take priority in certain areas, but the overarching realization is that the tools need to come together into one cohesive app that associates can refer to consistently. The question in mind was to figure out how to gel the tools together to make them seem connected and fluid.

The Vision

From conversations with project managers and regional directors, we came to the conclusion that the app should ultimately serve the customers by way of the associates’ use of the app. Together, we envisioned that the store associates and managers would use the Gap Product Tools App as their main source of information and global updates.

Building the Foundation

As I started the design phase, I took the time to really study the current tools and figure out how to synthesize and make them seem integrated into one another.

Tools

The current tools being used in all Gap store floors around the world are: product confidence, bottoms guides rings, size chart rings, and do you posters. On a consistent basis, these tools are being printed in 8 different languages each month and season. That's a sum of 1.3 million dollars each year in budgets. At the same token, the product confidence, bottoms guide rings, and size chart rings are 3 separate tolls that are constantly being referred to. It makes it very inconvenient and uncomfortable to have multiple sources of information. 

tools

Setting a Consistent Framework

Sitemap Real

Through designing the flowmap for the Gap Product Tools App, I tried to look for avenues to create a sense of consistency and connectedness throughout the tools, while respecting the individuality of each of the tools. I found that avenue by dissecting the commonality among the majority of the tools: "specialty and factory." Associates are often identified by whether they work at specialty stores or factory stores. By creating a screen that forces associates to choose either specialty or factory, I found a means to blur the line among some of the more utilized tools. Though I found the avenue to blend the tools together, I realized that I would also have to find a way to visually make them seem integrated with one another.

Navigation Drafting and Testing

Nav Drafts

Designing the navigation menu was crucial not only to intertwine the tools, but also to make moving through the tools as smooth as possible. 

Draft 1 was not favored as much because it seemed to visually separate the tools. Furthermore, this screen is not readily accessible from the other tools. 

Draft 2 was successful in blending the tools together. Due to the fact that it was designed as a part of the hamburger menu located on every page, the navigation was readily accessible.

Wireframes

Size Chart
Bottoms Guide
Monthly Focus
Gap Around the Globe

Testing

The initial testing phase was interesting. I was able to discuss with associates and probe deeper into the app's effects on associate and customer interactions. One clear benefit was that the tools were just easily accessible. In the top nav, the hamburger menu is available on every screen. It's interesting to see the needs of the customer. They could ask anything from size conversion to bottom's details to latest trends and the associates were able to reach different tools quickly. Another clear benefit was that the images can be zoomed in and scaled up to show the finer details. This is something that the printed tools could not do.

A consensus among the associates was that it took a little bit of time to adjust to the learning curve of the app. They made it clear that the architecture and the sitemap was clear and easy to understand; rather, the associates made a statement on ensuring simple and clean interactions and movements. Anything more than swipe and tap is unnecessary. 

Mockups

SC High Fi
BG High Fi
MF High Fi
GATG High Fi

Interactions

Size Charts Interaction

Bottoms Guide Interactions

Monthly Focus Interactions

Gap Around the Globe Interactions

Reflections

Upon reflection, designing the Gap Product Tools App from scratch was really difficult. At the same time, I learned so much in regards to my design process along the way. The biggest challenge was to design this app while maintaining the integrity of the classic and world-renowned Gap brand identity. However, tackling this challenge along with many others, taking risks, and producing the app was really rewarding. I felt very proud and undeserving to see the Gap Product Tools App impacting the store floor in such a positive way.

Takeaways

1. Always talk with your project manager. Especially in a huge company with a lot of history and well-known brand identity, talking with the project manager gave me a complete perspective on the scope of the product and what kind of impact it should have. Personally, my relationship with my project manager was amazing and it made me feel more comfortable with the product's ambitions and plans.

2. Go the extra mile. It's often easy to be complacent with going through the motions with the design process. I found ways to take ideas a step further. Even when there isn't much room to go the extra mile, I realized that there are many ways to take things further - whether it be from presentations, added discussions, incorporating different digital content, etc.

3. Never lose sight of the desired impact of the product. Throughout the process, I found it easy to lose track of the goal: improve the in-store customer experience. I constantly thought about what would be best for the store associates. The truth is that they are a huge and definitely important demographic that is affected by the app, and I had to think about what would be best for them as well. But the desired impact was to improve how store associates can help the customer. Keeping the vision of the desired impact of the product in mind helped me elevate my design thinking and conversations with my project manager and fellow teammates.

Thank you for reading!