Project Overview

Team: Denise Heebner, George Sosa, Christine Chiang

Role: UX Design Lead, Project Manager

Time Period: 2 Weeks - Group Work / 1 Week - Individual Iteration & Redesign

Tools: Sketch, Craft, InVision, Illustrator, Pen & Paper

It’s no secret that for most people, convenience is everything. We want the ability to get any product, from anywhere in the world, as quickly and conveniently as possible. Thanks to the rise of online retailers this luxury is our reality, most of the time. Every once in a while, as much as we try to plan around it, we have to venture to a traditional retail store to purchase an item. This can be extremely time consuming between the driving, parking, and wandering aisles trying to find exactly what we’re looking for. 

What if there was a simple, easy to navigate mobile application that could take you to the exact location of the product you’re looking for without having to wander around trying to figure out confusing store signage and layouts? Over the course of a two-week design sprint I worked with a small team to design Pocket Assist. 

Pocket Assist is a SASS platform that transforms the shopping experience for both the retailer and the consumer. As a consumer, simply download the app, select from one of our partner stores, search for the product you need and the app will direct you via a map-based navigation system to the exact shelf your product is on. Still need help? We’ve got that covered too! Built in assistance brings a store employee right to you. 

Research
On-Site Visit

To get the project started my team and I visited Home Depot, a large, national retailer that houses thousands of products ranging from a small screw to large appliances. Our goal during our onsite research was to:

  • Observe shoppers and their patterns.

    • Did they look like they knew where they were going?

    • Did they look lost and hesitant to ask for help?

    • Were they utilizing the signage?

    • Were they browsing or working off of a 'shopping list'? 

  • Review the store layout and signage.

    • Was it easy to follow?

    • Did it follow a logical pattern?

    • Did it leave us asking any questions?

  • Interview customers.

IMG_7474.jpg
IMG_7472.jpg
IMG_7477.jpg

User Interviews

While at Home Depot we interviewed customers to get further insight into why they were there, what their shopping habits and patterns are like, what their overall experience at a large store like Home Depot is, and what sort of things they would change the experience in the future. 

The individuals we interviewed varied from new homeowners, renters, and those who have owned multiple homes throughout their lives. Their professions ranged from construction workers, software developers, teachers, government employees, and real estate agents. The Home Depot attracts a very large and diverse customer base from DIYers to professionals. We tried to interview as large of a cross section as possible to help us understand who and how broad the user base is. The information gathered from the interviews revealed a number of common themes. 

  • All of the users we interviewed said they shop online and really like the ease of it.

  • All of the users we interviewed said they are willing to go into a physical store to purchase something they need, especially if it's a last minute item.

  • All of the users said the first time they shopped at a Home Depot they were overwhelmed by the size of the store, the amount of products and found it difficult to find what they were looking for.

  • 40% of the users said they were regular customers, shopping at Home Depot at least once a month.

  • 75% of the users said they find it difficult to locate a product because of the layout, signage (or lack of) and unavailable associates.

User Personas

After the interviews were conducted two personas, Travis Murphy and Karen Lee, were created to visually represent the information and insights gathered from the user base we talked to. During the design process these personas helped us stay focused on who our potential user is, what their needs and goals are, ultimately keeping the human factor at the center of our thinking and designs. 

Empathy Map

As we iterated over our research and interviews and mapped out the things that are important to our users, we found ease of use, efficiency, convenience, organization, and clarity to be the top priorities. A member of my team created an empathy member that visually translated this component. This map served as an additional visual element to help us get a deeper insight into our users. 

 
Empathy-Map-Travis-01.png
 

Problem Statement

Store layouts are designed to achieve a convenient way for users to locate products. After initial research and observation we concluded that this isn’t always the case. Layouts in large stores will often cause confusion, frustration, and the time wasted searching for a product drives many consumers online vs in-store. How do we improve the in-store experience allowing customers to be successful and ultimately become repeat in-person customers?

Storyboard

To illustrate one of the main frustrations we encountered during our research, I created a storyboard. Here we see Travis needing to find a small replacement part for his broken weedwacker. Normally, he would order the part online but, due to his travel schedule, today is his only free day to take care of the lawn. This means he has to visit his local Home Depot. In this situation he spends a lot of time between driving, trying to locate the part, and ultimately finding the wrong part forcing a return visit to the store. Frustrated from beginning to end, Travis wishes he would have been able to get in and out of the store quickly and painlessly. He understands that there are times that shopping online won't work and he will have to go to a store. However, situations like the one he faced keep him from wanting to go more than he absolutely has to. Illustrating this scenario helps highlight some of the common needs and pain-points the users we interviewed faced.  

Decision Flow Diagram

As my team discussed and sketched out possible solutions, we came up with a decision flow addressed the problem statement and provided a solution that would help ease pain-points. We put this in front of users to get feedback and used it to iterate over our diagram.  

Decision-Flow-Diagram.png

Paper Sketching & Wireframing

After figuring out our initial decision flow we began, as a team, sketching various screens and wireframing out what we needed to include, making adjustments along the way.

 
 
 
 

Rapid Prototyping, Usability Testing & Feedback

After we felt we had a good handle on our screens, my teammate created and tested a rapid prototype to see how a user would respond to it. I noted any changes we might need to make based on their interactions, hesitations, and overall experience with the prototype. After initial user testing of our prototype, we found that there was confusion around how to navigate between screens and which UI elements would be the most useful. I also found that it was taking too long to get into the actual application due to all of the location access permissions. I was happy to uncover these results at this phase, it allowed us to make quick adjustments and retest the prototype.    

 
 

Low-Fidelity Wireframes

Using our decision flow diagram, wireframe sketches, and feedback from our users, I created an initial set of low-fidelity wireframes in Sketch which takes our users through the shopping experience at a Home Depot using Pocket Assist. They begin by finding their store by zip code, searching for a product by part number, selecting the product from a list, and following the map until they reach their destination. 

User Testing Feedback & Design Iteration

After testing the prototype ourselves and putting it in front of a new batch of users, there were some large holes that we needed to address with our initial prototype.

  • In order to create a better user testing experience we needed to incorporate better UI elements such as product images, logos, and a more cohesive flow.

  • The relationship between Pocket Assist and the business (i.e. Home Depot) was unclear and confusing from the initial splash screen.

  • It was unclear how a business could partner or sign up for the SASS aspect of Pocket Assist.

  • It was unclear why a login screen was necessary or how you might find other stores.

All of this feedback required me to go back to the drawing board and re-assess the user flow diagram.  I reviewed what we had and what worked vs. the feedback we received and revamped the user flow diagram. 

 
 

 

High-Fidelity Clickable Prototype

In addition to the new decision flow diagram I also took time to iterate over each screen, adding in real content, editing the logo and color palette to not clash with any potential major retailer while conveying a clean, modern, professional aesthetic. I also expanded on the navigation adding features like maps and associate assistance to the existing footer navigation. 

View the high-fidelity clickable prototype in action. 

screen-overlay.png

Retrospective & Future Development

The Pocket Assist project fills an interesting opening in the market for both consumers and businesses. It addresses the need consumers have for locating products quickly and efficiently, while simultaneously addressing the goal businesses have of getting customers into their stores. While a consumer may enter a store with the Pocket Assist application looking for one product, there is a higher probability that they will see something else that they want or need and purchase it. Ultimately the consumer spends more money with the business and doesn't feel like the trip was a stressful experience.  

Due to the tight deadlines of the project I stepped up as project manager and design lead, helping to move the team through our daily and weekly tasks. After the initial deadline and team presentation I revisited the goals, decision flow, designs and gathered additional user feedback. I iterated over each aspect of the project to develop it into a more cohesive application taking the entire user demographic, business and consumer, into account. 

Moving forward, future development plans for Pocket Assist include: 

  • Creating partner plans for businesses to sign up for one of the varying tiers and feature sets.

  • Developing the business management dashboard which allows businesses to manage their accounts, features, etc.

  • Create additional support tools for the customer that allows them to get personalized concierge help on projects, supplies, and shopping assistance.