PROJECT OVERVIEW

An iOS app redesign to streamline an outdated interface without losing any current members.

PROJECT SCOPE

Our team's assignment was to design a new feature or update a current feature on Costco’s app to better serve the customer’s needs.  Costco has been slow to embrace digital capabilities with their overall business strategy, so they need some help updating their features without isolating any of their core members.

ROLE

Researcher

TEAM MEMBERS

Mikee Guerzon - Interaction Designer
Melissa Kaiser - Visual Designer, Information Architect, and Project Manager

THE CHALLENGE

How can we improve the interface of the Costco app without alienating their core members?  Updated interfaces can potentially lead to a drop off in usage, so our design needed to address key user pain points and improve functionality.

THE SOLUTION

Updated functionality can justify an updated interface.  We have noticed one particular issue where the website or app would show items available for purchase, but when Costco shoppers visited the warehouse, the items would not be in stock. 

We believe that by updating the app to provide in store item visibility and availability as well as inventory count for our user, we will decrease frustration and yield higher customer satisfaction.  

RESEARCH

BACKGROUND

To kick off our project, I did some background research on Costco as a company and their typical shopper to gain an understanding on their business goals and practices. 

MEMBERS

• Average household income: greater than $100,000 / year
• Average age: 2 years older than the general population
• Majority are homeowners
• Over 80% of members go to shop for groceries
• 90% annual renewal rate

BUSINESS

• Business model: membership only club - annual fee to access low cost product
• Targets business owners and families
• 2017 FY Net Sales: $126 billion
• Membership fees make up 72% of operating income and 80% of gross margin
• Slow to adopt common retail services (pay online and pickup in store, checking item availability, etc)

INTERVIEWS

To better understand the needs and pain points of the Costco member, I proceeded to interview five different members.  I screened ten potential interviewees to only speak with regular Costco shoppers (visiting at least 1x per month) and also loyal Costco members (being a member for at least 5 years).  

Based on these interviews, I created an affinity map and found some common themes that would influence the direction of our project.

IN STORE PURCHASING

• 100% of members went to the store to purchase items rather than buy online
  • Most users wanted to pick / see the item in person (groceries or large, major purchase items) 
  • Others needed an item immediately and didn't want to wait for it to be shipped
• For many, visiting the store was part of a routine or even a family activity

IN STORE AVAILABILITY

• 100% of members wanted to know if an online item was also available in the store
  • Frustrated that they could not tell if an item on Costco's website or app could be found in the store
• I also spoke with a Costco employee - he confirmed that Costco warehouses had different inventory depending on the location (due to the demographic of the shoppers of each store) 

IN STORE FRUSTRATION

• 80% disliked the constantly changing store layout - found it difficult to find items
• 60% disliked the long lines - but many have accepted this as part of Costco shopping

COMPETITIVE ANALYSIS

In addition to my background research and user interviews, I also did some competitive analysis to see if our competitors were better at addressing the pain points of potential users.  I compared the Costco app against the Walmart app and the Sam’s Club app (two apps that were frequently cited in their app store reviews).

1. Costco was severely lagging behind its two competitors in features that would address issues commonly cited in our user interviews (like in store item availability, in store locator, and scan and pay)

2. Further research showed that other warehouse-style retailers (like Home Depot and Ikea) provided even more detailed information that would help ease user’s pain points - Home Depot's app showed the exact number of items in the store and Ikea's app indicated the aisle to find the item

PROTO PERSONA

Based on my background research and user interviews, I created the persona Anne Li that would help us visualize our users’ needs and brainstorm empathetically.

CHARACTERISTICS

• Family oriented - has husband, two college kids, and elderly parents to care for
• Likes convenience, value, and dependability
• Not brand oriented, open to suggestions
• Prefers seeing items in person before purchasing, especially big ticket items

PAIN POINTS

• Busy work life with very little spare time
• Not enough product descriptions to understand the item
• Difficult to understand navigation

DEVELOP

FOCUS

Based on my research, I downloaded the key points with my team and we discussed what design features we could update and add to best serve the user’s needs.  Although there were many points that we wanted to address, we focused on the main points that affected all members due to the limited timeframe of our sprint.

IN STORE AVAILABILITY 

The main feature we wanted to highlight was whether or not an item was available in the store.  This was a consistent issue with all users who were interviewed and is an aspect addressed amongst Costco's competitors.

APP CUSTOMIZATION

Since users are going to visit the store, we wanted to let them set a location as "my warehouse" and see what is available at the warehouse they usually frequent.

The navigation bar across the bottom on the current app on iOS can be edited, but not in a clear way.  We wanted the user to be able to access their most frequented items (ex: shopping lists, savings, etc).

WIREFRAMES

Due to our focus on in store availability and app customization, our interaction designer, Michael Guerzon, created wireframes for some suggested improvements.

USER FEEDBACK

Since these were new features for the app, we needed to get user feedback on whether or not these steps flowed logically and if there were any areas for improvement.  The testing revolved around tasks from the task scenario I created:

• Customize your navigation bar
• Set “my warehouse"
• Search for a vacuum cleaner
• Choose a vacuum cleaner and look at the product details
• See if it is in stock and if it in stock, add item to shopping list
• Customize your navigation bar

POSITIVE POINTS

• Users were able to search for their item
• They were able to see how many items were in stock at their warehouse and nearby warehouses 

PAIN POINTS

• Users were confused by steps to customize the navigation bar
• They didn't know how to finish setting "my warehouse"
• Disconnect between the search function switching screens (went from the search bar on the homepage to a separate page with “shop all departments”)

Following our team discussion, Michael made the following design iterations.   

He removed the navigation bar customization step which changed the flow of the "my warehouse" set up, changed the search function on the homepage, updated the sort function for search results, and improved the in-store availability function so that more information was visible and users could add to their shopping list more easily.

USABILITY TESTING

With these wireframe iterations, I conducted another round of usability testing with three users to confirm that the screen updates addressed the pain points as we had hoped.

POSITIVE POINTS

• All users were able to see item availability and inventory count in their own warehouse in addition to nearby warehouses
• All users were able to use the sort function in the search results - and noticed the choice to see results just in "my warehouse"
• After adding their item to their shopping list, users were able to access it later to view their selected product

PAIN POINTS

• Users still had trouble finishing saving “my warehouse"
  • Back caret was not as intuitive
• Search bar on the home screen was a little ambiguous
  • Users didn't realize they could browse by department until they clicked on the search bar
• When checking nearby warehouses for item availability, users found the + sign next to warehouse location ambiguous - some thought it was to add to a list

VISUAL DESIGN

Our visual designer, Melissa Kaiser, applied the Costco style guide to make the screens consistent across the entire app.

REFLECTIONS

RESULTS

The end result was an updated app with features that are important in today's competitive retail environment and addressed some of our user's commonly cited pain points.

Furthermore, we have additional recommendations for stakeholders.  Based on our research, Costco’s success is dependent on their membership fees.  They are facing stiff competition from many business (Walmart, Sam’s Club, and of course, Amazon) and if they cannot keep their current members or provide potential, future members an incentive to join, they may not be as successful in the future.

So with this in mind and based on user interviews with some of Costco's younger members, we would recommend the following:

• Fix the physical store layout for easier item location within the warehouse
• Increase younger membership - incentivize app downloads
  • Integrate Digital and In Store Capabilities
    EX: aisle location of product in the warehouse, membership ID located in app, etc.
  • Efficient Shopping and Expedited Check Out
    EX: scan and pay option, paying online and picking up in store (to help reduce lines), etc.

LESSONS LEARNED

It was a challenge to balance the company’s business goals with the user’s needs.  There were a number of things we wanted to update and change, but did not have enough time given our 2 week sprint.  

It was also a lesson in feature prioritization - since there were so many things we wanted to change, we had to focus on which one would have the greatest impact on our user’s overall satisfaction.

NEXT STEPS

DESIGN ITERATIONS

We would like to iterate our designs to make the ambiguous search bar and symbols more clear (based on user feedback) and submit for additional testing.

GENERAL UPDATES

Make layouts more cohesive across all devices and operating systems, with closer attention to the HIG.  And to create a more logical way for users to customize the navigation bar.