A Location-Based
Website for Shopping
Small Locally

If you’ve already read the below introduction and initial research to the Local app, click here to skip ahead to the Local website-specific project content.

Small, locally-owned shops almost never list their current inventory online, but instead are limited to listing basic information like store hours and location. They don't have the resources to develop websites and apps that can compete with those of large corporations.

If a shopper wanted to compare products and pricing between the big online vendors and that of small businesses in their neighborhood, they would have to physically go visit each store – a prospect that is so time-consuming as to never be considered by the average consumer.

How can the consumer make informed comparisons between what's in stock at nearby businesses and what can be ordered online?

Goals

Design a single website that local small businesses can together use to display their inventory, allowing customers to easily browse items available at a variety of smaller stores nearby before visiting in person to make a purchase.

Empower small businesses to better compete with large corporations and enable the consumer to make informed shopping decisions between products available locally and online.

Client: Student project for Google's UX Design Certificate Program
Sectors: Commerce, Navigation
My Role: Entire product design – research, conception, prototyping and testing
Project Time: 2 months

I wanted to understand the habits and typical circumstances of consumers who shop at local small businesses and how a new shopping platform might improve their experience.

I started by conducting 5 interviews. Several pain points immediately stood out.

Research

  • Many local small businesses have websites with information about the business, but not about the products and pricing of their inventory.

  • Visiting many stores to compare prices is time-consuming and unrealistic, but my interviews showed that participants wanted to be able to make informed decisions.

  • Participants wanted to be confident an item was in stock before taking the time to visit the store in person.

  • Especially for participants in urban areas, there are simply too many stores to visit in order to be aware of what specific products they offer.

I used what I discovered during the interviews to create user personas and a user journey map. This allowed me to identify additional opportunities to improve shoppers' experiences before exploring a variety of concepts in paper wireframes.

Paper Wireframes

Paper Wireframes – Homepage

I explored different layouts for arranging a search field, a categories grid, and an ideas carousel on the home page. 

I wanted a hero image showing the user’s specific neighborhood as the backdrop for a search field overlay in order to show their own unique neighborhood, setting their experience apart from the more generic big-box store shopping experiences right from the outset.

This is the final drawing for the homepage, which I used to create the first of the low-fidelity wireframes. 

Low-Fidelity Prototypes

Testing – Usability Study Round 1

I tested my prototype with 5 usability study participants and created an affinity diagram to help synthesize their pain points and other feedback. Below are four of the issues and suggestions for improvement that I saw frequently come up for participants.

1

2

Users assumed the “from the manufacturer” section was advertising, and therefore wanted it removed.

2/5 participants

4

Some other features that users wanted added included reviews in product descriptions, multiple modes of transportation available for routing / maps, and a “save for later” option for items.

I then worked to address these issues as I added fidelity to the designs.

3

Users unanimously liked the use of overlays for product descriptions as a way of staying more closely connected to the unchanged search results while looking closer at a product.

4/5 participants

Users had a strong negative reaction to the “ideas” carousel, associating it with underhanded product pushes and advertising.

4/5 participants

High Fidelity Prototypes

1

Participants thought that the recently viewed section looked too large and/or should be less prominent on the home page.

3/5 participants

High Fidelity Prototypes – 2nd Iteration

User flow: On the home page, the user begins shopping by A) typing into the search field (with optional categories to narrow results), B) selecting a recently viewed item from the carousel, or C) simply browsing items by category.

The satellite imagery in the hero space updates based on a user’s current location in order to convey to the user that they’re searching within their actual neighborhood—not some warehouse a hundred miles away.

I reduced the vertical space taken up by the recently viewed section, because users said it seemed to take over the search function, which needed to stand out more.

Search


How it works: In the search results, hovering over a result instantly displays the relevant route information, showing the user where the item is and the travel required for them to go and purchase it. In this image, the book from McNally Jackson is hovered over.

2

Search function lacks focus and needs more breathing room.

3/5 participants

Product Description


Study participants indicated that supporting local small business owners was a strong motivation for shopping locally, so I included a “meet the owner” section to put a name and face behind stores.

3

Users would like to be able to click on the map pin for store details.

2/5 participants

Home


Once the user clicks the search field at the top of the home page, the recently-viewed and categories sections are swept away, and searching becomes the central focus with more breathing room, per user feedback.

Testing – Usability Study Round 2

4

Nav bar, search results, and shopping list are too similar to each other and plain-looking.

2/5 participants

Users can now adjust the route and travel times based on other means of transportation.

Store Description


As requested, users can now click the store pins for store information.

Clicking a search result opens the product description. I used an overlay to assure to the user that their search results along with any search filters will remain unchanged when they return to them. An arrow button beside the overlay allows the user to carousel through the search results if they choose.

After adding products from different nearby stores, the shopping list page organizes everything they’ve added in a list format as well as a shopping route. Re-ordering the stores in the list will automatically update the mapped route.

Some users commented that the background of the shopping list and search results was flat and plain-looking. I modified the background to give it some transparency with a continuation of the map behind it.

The user searches for items nearby, with the options to narrow by category or to change the desired location of the search results before running the search.

Search Results


My goal was to lay out the search results in a way that empowers the user to consider the purchase options in their neighborhood with all the relevant information at hand.

Shopping List