background

In late February of my freshman year, my Human-Centered Design and Development class was assigned our 3rd project, "Embodied Shopping". Hopefully you can see how my communication skills and my work style has improved in this project since the last one, "Lyft Rating System".

My team consisted of me, Elizabeth, Jai, and Amelia. I have worked with Elizabeth in the past, and both Jai and Amelia approached me and told me that they wanted to work with me.

our big idea

To understand the needs of the contemporary grocery shopper, channeling this knowledge to inform the design of a refined experience for grocery store patrons that maximizes positive and empowering embodied patterns of interaction.

our process

We were faced with the task of cohesively deciding one problem with the grocery store shopping experience to design a solution for. To gain more insight on this broad prompt, we first chose to observe customers in Target, a big box store environment. We began this project with observations and interviews.

observations

We noticed that Target used big signs to indicate what is in each aisle. These signs were placed on either side of each aisle so that a customer could easily locate their products.

We also noticed that customers aimlessly wandered throughout the aisles and picked up items along the way. This led us to believe that customers did this in order to get ideas for what to buy while wandering.

shoppingobserv.jpg

 

We also noticed that there was a call station and a screen available at the end of some aisles. The phone allows customers to call a customer service representative to come to the aisle where the customer is at, and help them find the item they are looking for.

The screen allows a customer to scan an item and check its price and it shows the customer which aisle the  item is located at.

In the two hours that we did our observations, we did not notice anyone noticing or using these services.

callstation.jpg

 

interviews

Who did we interview?

Target customers doing their shopping on a Saturday afternoon. This population consisted of:

  • middle aged women
  • young women
  • families/couples.

    Here are some key takeaways from our observations and interviews:
  • Many customers use their smartphones while shopping to do what looks like checking a list they wrote down, contacting people back home to see what they need to purchase, or looking up coupons and sales.
  • People we interviewed were regular Target customers (every 1-2 weeks), but chose not to use the Target app. They told us that they don’t need another app on their phone and that the Target app has many bugs that prevent a smooth user experience.
  • Customers  tend to avoid finding an employee to help them, and they prefer to be self sufficient while shopping.
  • Customers find it hard to locate employees if they do want to ask for help, because employees tend to be spread unequally throughout the store.

affinity diagramming

We wrote down takeaways from our observations and primary research in order to help us form our personas.

img_0694.jpg

personas

 

secondary research

We did some secondary research to understand the demographics of the customers at big-box stores. We discovered that a large majority of big-box shoppers are female. In Target for example, about 60% of shoppers are female while 40% are male. Also, we found out that the largest age group is 25-44. From our primary research, we saw that many shoppers at these stores hold their phones in their hands while shopping. And our secondary research supports that a large majority of customers use smartphones while shopping [1]. Using these facts, we thought of ways we could incorporate the large cell phone usage during the customer’s self-sufficient shopping experience.

We did some competitive analysis on shopping areas that use customer's reliance on their cellphone as a way to improve their shopping experience. It turns out that Stanford Shopping Mall, located in Palo Alto, California, implemented a set directories that allow customers to interactively find the route to their desired location, and then text those directions to their phone from the touch-screen kiosk [2].

Using this as our inspiration, we decided to design kiosks in big-box stores that allow users to search for items they are looking for and text the directions to their phone. Before we began designing, we did some competitive analysis to see if any similar ideas already existed.

competitive analysis

Target iOS application

The current version of the Target iOS application has some key functions; in store navigation help, shopping list formation, product browsing, online ordering, and in store pickup ordering. On the surface of the iTunes store description the application appears to solve every shopping experience problem a user could encounter, but the reviews tell an entirely different story. User reviews reveal an app that is slow, often crashes, fails to save information, gives false information about item stock, and does nothing to improve their experience in store.  Also, users of Apple Watches said since updating the app they experienced connectivity issues.

Walmart iOS application

The Walmart iOS application has many of the same functions as the Target application. It can compile a shopping list, allows for mobile payments in store, helps users with in store navigation/product location, can create pick up orders, and promotes special savings and deals. Again, much like the Target application the current version of the Walmart application fails to deliver on its promises. User reviews claim the shopping list function does not work and are hesitant to trust the app because Walmart sells products from third party sites that are not also sold in stores.

Home Depot iOS Application

The Home Depot iOS application had four key features; in store navigation/product location, shopping list creation, taking pictures of an item to find similar items, and live chat with store staff. Unlike the Target and Walmart applications, the Home Depot application receives outstanding reviews from users. A few of the key parts of the app that users seem to particularly like include; the “check off item” feature on the shopping list, and the in store navigation feature.

our solution

Seeing that many people from our primary research and from reviews on the app store disliked having to download an app for a store, we decided that the existing applications with similar ideas to ours were not ideal. We narrowed down our problem statement to guide our solution:

Women (ages 24-44) who shop in big box stores need help to identify and locate products based on their shopping necessities in a self-sufficient manner.

Our design solution is a in-store kiosk that aims to solve the specific issue of locating products for the main demographic of big box stores, women ages 24-44. This app will allow the user to to do more self-sufficient shopping that will not affect store layout, hinder revenue, or change the role of employees at the store. Within our kiosk, people can compile lists of items and have the directions sent by a link to their phone.

Much like how brands pay for prime, eye catching shelf space in store, brands could pay for “digital shelf space” within our application. For example, Lay’s® could pay Target to have their product be the top result when people search “potato chips” or “chips”, thus causing people to notice their product first, over the competition’s. Also, the routes that our app would map out for people to pick up list items would have people go by the ends of aisles as much as possible, while still being efficient, since the end of aisles are where many “special promotion” and “new product” stands and displays are in big box stores.

placement of kiosks

Research showed that the most effective placement of kiosks in big box stores is in areas of high traffic [3]. Although the entrance and exit ways are areas which customers most frequently populate, they are not ideal for the placement of kiosk. If kiosk are placed in the entrance way the customer will not be prompted to explore the rest of the store which will likely result in a loss of revenue for the store. An alternative location for kiosk placement is at the end of aisles which are also areas of heavy traffic. Heavy traffic locations allow the kiosk to be seen and used often, which is both helpful to customers who need assistance and employees who won’t have to stop as often to help these customers.

task flow

Screen Shot 2017-08-21 at 4.01.52 PM.png

 

initial design sketches

The first screen that the user sees. The user can select a language from the top four most common languages in the US.

img_0742-1.jpg

 

The user can choose to search for a specific item, or choose from multiple categories.  

img_0743-1.jpg

 

This is the screen that would be shown when the user selects categories.

screen-shot-2017-03-22-at-7-55-25-pm (1).png

 

This is the a subcategories screen that would be shown when the user chooses produce from the main categories screen.

screen-shot-2017-03-22-at-7-56-20-pm.png
screen-shot-2017-03-22-at-7-57-58-pm.png
screen-shot-2017-03-22-at-7-59-14-pm.png
screen-shot-2017-03-22-at-8-00-13-pm.png
screen-shot-2017-03-22-at-8-01-37-pm.png
screen-shot-2017-03-22-at-8-05-38-pm.png
screen-shot-2017-03-22-at-8-06-49-pm.png

usability testing

We conducted usability tests on 3 users and gave them either of the following scenarios:

Scenario 1:
You enter Target in search of BBQ chips. You approach a kiosk at the end of an aisle and decide to use it to help you find where the BBQ chips are. We want you to interact with this kiosk in order to find BBQ chips.

Scenario 2:
You enter Target in search of fruits. You approach a kiosk at the end of an aisle and decide to use to it help you find where the fruits are. We want you to interact with this kiosk in order to find fruits.

We asked the users to think out loud while performing this scenario, the following results show what the users said.

User 1

Scenario 1

“What you would search for in the store”

“I would search and then just type in BBQ chips.”

“I can add things to my cart, I think that’s all I can do here”

“Then I would press ‘visit’ to look up an item.”

 

User 2

Scenario 2

“I would press English”

“On this screen I can either search for an item, or look at categories of items”

“I would type into the search bar, fruits”

“I’m assuming this is a map. Shows the different types of food and the location so I can find it.”

“It’ll probably show me a red dot somewhere showing me where the specific fruit I want is.”

 

User 3

Scenario 2

“I would press English”

“If I pressed categories, it would show me the aisles I guess”

“I would probably click on categories first.”

“Then I would click on fruits”

“Then I would pick a specific fruit, then it would show me where it is on the aisle and I would just go there.”

wizard of oz prototyping

We used Wizard of Oz testing as another way of testing our users. Instead of having live cameras on the user while they are interacting with the prototype, we used FaceTime to communicate between the user and the sketcher.

User 1
Scenario 1

“I would press English”
“Then I would search BBQ chips”
“Now I can choose the BBQ chips that I want and then it will show me where it is on the map”
“Then I would just remember where it is and go there”

User 2
Scenario 2

“I would press English”
“I think this allows me to search for a specific item or I can choose from a bunch of categories. Since I’m looking for fruits, I would look in categories. Also if I wanted to buy the same things as last time I could swipe my Target red card.”
“This shows me categories of things I can buy. I would click fruits”
“Then I would choose bananas, and once I’m done I would add it to the list and click on ‘Get directions’”
“I’m assuming that I can enter in my phone number and it will text me the directions?”
“I would slide to click on the link. The link would probably take me to a map”
“So once I find the product I want I just check it off the list”

Results from Wizard of Oz Prototyping

Scenario 1:

Everyone we tested for Scenario 1, immediately went for the search bar to search for ‘BBQ chips’ which is what we wanted them to do. The main problem we realized lied in our UI for for the screen that showed the options for BBQ chips. Users thought that by clicking on the “list” button (which one user thought read “visit”) they would be shown how to get there and then they would be done using the kiosk. Most users did not even acknowledge the “Get Directions” button and they thought that the their interaction with the kiosk would just end after they selected items and saw the location of those items on the map.

 

Scenario 2:

All but one of the users we tested did not click on the “categories” button as we wanted them to. Most of them actually typed “fruits” into the search bar. Just like in the first scenario, users also thought that their interaction with the kiosk was over once they add the buttons to the list and saw their location on the map showed up.

During our Wizard of Oz testing, when users incorrectly chose to search for fruits, instead of looking through the categories, we sketched this out:

We decided to completely take out the categories section because most users were not using it anyway. Some of them were acknowledging that it was there, but they didn’t think to click on it.

 final UI sketches

img_0742-1.jpg
img_0743-1.jpg

Above is our new Search screen. Instead of having “Search” and “Categories” both be in the center, we decided to shift the focus to “Search” only. In testing nearly everybody gravitated towards the search option. If the user wants to browse through categories, they have the option to do so as well. We chose to keep it because, although not heavily used by test participants, it provides an option for people who don’t know the name/description of the product they want, but do know the category it goes in.

The following screen is just refinements we made. This screen did not need major changes based on our usability testing, we simply made coloring more precise, font more legible, and lines cleaner.

screen-shot-2017-03-22-at-10-26-19-pm.png

 

The following screens are our final screens for "Categories" and "Produce". These screens did not need major changes based on our usability testing, we simply made the coloring more precise, font more legible, and lines cleaner.

screen-shot-2017-03-22-at-10-28-22-pm.png
screen-shot-2017-03-22-at-10-30-06-pm.png
img_0770.jpg

For the above screen, we made the buttons for adding the items to the list much more legible and took away the highlight that encompassed the entire fruit because it seemed excessive and made people linger too long when testing. We decided to include a “similar items” section that would pop up after the user adds items to the list. This would hopefully get users to buy. We made the button for “Get Directions” much bigger and more legible so users would notice it. In testing people did not notice it due to its small, messy state.

We decided we needed an example of what the map/list would look like once you clicked the link, prior to starting to shop. We made the list as gray, so it would stand out as its own entity against the white background. We also made the directory arrow red for the sake of visibility.

img_0739.jpg

 

We decided we needed an example of what the map/list would look like once you clicked the link, prior to starting to shop. We made the list as gray, so it would stand out as its own entity against the white background. We also made the directory arrow red for the sake of visibility.

The testing of this interface went well, but we made the decision to have the directive arrow be red so it would stand out more and be obvious to the user. In addition, we made the coloring of the list more obvious and clean.

screen-shot-2017-03-22-at-10-41-16-pm.png

 

takeaways + reflection

I was really proud of our work as a team. During our presentation, we got mostly positive feedback from our class via Slack.

Here is a breakdown of things people thought we did well:

  • People thought our presentation flowed well. We used appropriate transitions, and we seemed very prepared.
  • People liked our depth of research.
  • Our presentation was very easy to follow, didn't leave people feeling bored.

Here is a breakdown of the criticism and questions we got:

  • Would people feel comfortable entering their cellphone number into a kiosk?
  • Our professor thought our documentation was too staggered. We didn't connect all the pieces in a fluid manner.
  • The implementation of the Target redCard seemed unnecessary, and beyond the scope of our project.

"If I don't practice in the areas where I a struggle, then I won't be able to grow as a User Experience Designer."

The most important lesson I learned from this project is that in order to work effectively as a team, everyone needs to be involved in every part of the process. Originally, I thought it was best to have people exclusively work on the parts of the project where they had the most strengths. As a result, Amelia and Elizabeth mostly worked on sketching while Jai and I mostly worked on research and documentation. This caused some discrepancies in our documentation, and not all of us were informed of the complexities of the other parts of the project. I hope that in my future projects, I make an effort to contribute in areas where I am not naturally skilled, because in the end practice makes perfect. If I don't practice in the areas where I a struggle, then I won't be able to grow as a User Experience Designer.

Overall, I was able to improve on the flaws that became evident in the last project "Lyft Rating System". I became more willing to take feedback from my teammates, and I was able to maintain a positive rapport with my teammates even when we had differing opinions.

I still have a long way to go as a UX designer. There's still so many things that I can improve on, including public speaking skills, documentation skills, and effective team leadership. Sometimes I forget that I'm only a freshman and I've only been doing UX for less than a semester. I have plenty of time to work on these things and I will continue to put my best effort into every project.

 

References

[1] http://marketingland.com/survey-90-percent-of-retail-shoppers-use-smartphones-in-stores-135759

[2]http://www.prnewswire.com/news-releases/simon-and-ebay-inc-launch-connected-mall-at-stanford-shopping-center-300003069.html

[3] https://www.kioskmarketplace.com/articles/location-location-location-experts-offer-advice-for-in-store-kiosk-placement/