Goods Guide

One tap away from your favorite snack

Sometimes you want to buy a pack of tissues. Sometimes you need a quick look for ice-creams under 30.000 dong. Sometimes you just need a few little things so instantly it isn’t worth spending days on an online order. This is the app where you can type in your favorite snack and have a list of every store that sells it, just a few steps away from you.

A need that exists in everyday situations

It’s a real struggle for my father every time his wife asks him to buy ordinary stuff.

My father doesn’t know any store around the house. With how my mother guides him and how he makes sure he gets it right by repeating her words many times, they’re more likely to become each other’s biggest disappointment in the world by the time the conversation’s over. And somehow, mysteriously, Dad always buy one or two items wrong in the end.

So I thought of an app to help people easily find where to purchase common goods the moment they want it, by putting in what naturally comes to mind first: the products.

Starting with understanding the users, I made a number of personas and scenarios.

The first scenario presents the most fundamental need which the others also have: Finding the stores that sell the products the user needs. This broad need can be broken down to Quick and sufficient search function / Results of nearest stores to the user’s location / Comparing between stores to pick the most suitable / Guiding in case the user doesn’t know the way, to provide a specific outline of what the solutions should meet.

Thanh, the second persona, is a person with a hobby. The store he wants to re-discover is also one related to his interest. So while his foremost need is searching, if he turns out to love where he visits, he will want to not lose it. This gives rise to another need: Bookmarking stores. It has some smaller needs such as Saving stores based on the user’s classification / Viewing the bookmarked stores.

Meanwhile in Mr. Phu’s case, to solve his problem he would have to get the directions and the products right himself. That means on his phone he should be able to find a store’s address/map and note everything he’s buying, preferrably not switching between multiple apps. The former goes back to the first persona’s need, and the latter is the need for To-buy lists, which includes: Quick creation of a list / Viewing the created lists / Tracking the user’s process / Remembering the task if it is to be done later.

User flow - Building the journey

1. Finding the stores

As the purpose of the app and the very first task all scenarios have to handle, Goods Guide should open right to the Search screen. From there, users like Mrs. Hanh would get the results and decide on a store to go. Store Detail is a screen comprising of the store’s name, address, pictures and a map for those who don’t know the way.

2. Bookmarking

The user flow in Thanh’s scenario flow would go like this:

Now that the store is saved, the next time Thanh wants to visit some of his favorites, he can just find it among others in his collections.

3. Making a to-buy list

Similar to Bookmarking, users would also go from finding stores to checking results to gathering them in one place, in order to take note of all the products they have to buy. The difference is that the act of viewing the list will almost always comes right after, like Mr. Phu’s case demonstrates, ‘cause the task is not completed until users finish buying.

4. Reviewing activities

Now that the 3 flows based on previously determined personas and scenarios are established, another one is born out of a question: What if users couldn’t remember which store to bookmark?

Except those who seek for products part of their interests, it can’t be certain that everyone else will recall which store is which. That calls for a 4th section, History, with past info and context to boost users’ memory. The screen would house all interactions users have had with the stores (viewing, saving, adding to lists, etc.).

Journey of a user who looks for a store they once interacted with through History:

While History acts like an archive, there should also be an outside reminder to quickly notify users of the stores they’ve viewed, so that they can take action. While at first I thought of positioning it within its corresponding result card, such placement interfered with user viewing flow, making them pause in the middle of their intended search process just to at least consider what this piece of text was. Furthermore, the reminder might not even show up to users if the store it’s attached to is not among the results or too far down the stream. So the Store/Search screen, the very first one users will see after the launch, made for the most logical location.

Visual Design

1. An effortless search feature

As user need goes, “I need to buy this thing around where I’m at”, product and user’s location are made the focused fields on the first screen. A 3-column layout is used for Product Suggestions to enable quick scanning, and since packaging is the most visually recognizable aspect of a product, its name is omitted for less obstruction.

2. An attentive bookmark

In response to user’s bookmarking need, a Save button that leads to a list of collections created by the user, with some more suggested by the app itself based on the search input, exists in each result card.

As mentioned, the app will keep track of the stores users have viewed. This, however, works only if users select the cards. So, how can we make them tap on a result when the main reasons people check restaurants/cafes for more info is because of the space/menu? Which info does the user need to see upfront to make a decision, and which is also crucial to their task but can be viewed after the decision has been made?

Looking for stores to go to means the location and the time it takes to go there matter the most. Then come the opening hours to signal in advance whether a store is worth considering or can be skipped over. (Users should never be made to read all the way through only to find out at the end this isn’t even a viable option.) The name actually means the least to deciding if this store or that store is where you’re going to, but a great deal in visual presentation to differetiate between the results and contribute to a good hierarchy, so it’s necessary.

People I asked say in an adress, the street name alone tells them how far the place is, followed by ward and district for specificity. That leaves the house number the least involved element in decision-making, hence why it isn’t included in the result cards, but left inside the Detail screen to be checked after the user has picked which store they’re going to. (The same principle is also applied to store images — hardly affecting user’s choice at this stage, yet highly distracting.)

With bookmarking also comes the reminder. Hidden in part to reduce competition with the main search fields, the reminders (viewed stores) can be fully revealed when tapped on or swiped up. Each card comes with its own Save and Close buttons and, in contrast to the Result cards, complete info of the store. Users should be reminded and take action as fast as possible.

3. A helpful to-buy list

Guided by the notification dot over the navigation icon, users can find their current to-buy list in the List screen. Here all searched products from the same store will be grouped together under it, preceded by checkboxes as a way to prevent users from missing any item.

At the end of the list lies a reminder/ alarm button to set a date for later shopping. After users are done with their task, the Mark as Completed button if used will both archive the list and save the stores on it to a Visited collection, keeping track for users.