suzan qawouq
3 min readMar 4, 2019

ShopHub is an app that helps users search for items on local stores either with regular search or by taking pictures of interesting items they find around them. After placing the order, they will receive it the following day.

The problem

When we are in a hurry and need stuff for the last minute before a trip or a special occasion, going to the mall sometimes can be a frustrating trip. Along with another day to day responsibilities, we may find ourselves tight in time, and online orders can take so long to arrive.

The solution

What if there is an app that saves us a trip to the mall and from the pain of online surfing for goods in endless websites. An app that provides a database of goods at local stores while shopping from your place while and getting your stuff the following day. That’s exactly what ShopHub does.

Storyboards

Started with looking for some real scenarios that we can relate to:

Wireframes

First Approach, and the first problem

The plan was to allow the user to search using two different ways, each one on a separate screen. At some point during the first testing sessions, some users found it confusing jumping to different screens to do regular search or search by image. and that led to the second approach.

First wireframe version

A Second approach, a new issue!

To solve that problem, the search options are placed in one screen and the user gets the chance to pick which way he/she likes to search for an item.

“Smart search? What is that? “

A user asked this question. It seemed like “ smart search” wasn’t intuitive. So we found a better term to use: “ camera search” which is now obvious that the user will be expecting a camera.

Some users assumed right away the purpose behind it, and this could save them time.

……And here come the results of the search!

Grid layout? Not the best, confusing and busy.

All users agreed on that. One user tried to look for a way to change it to list layout.

Third iteration

List layout

“Better layout, cleaner and easy to work with.” one user said.

Most aspects were tested, and now is the time to polish the design.

Styleguide

Font used: Roboto and sans-serif fonts

Final look

Prototype

Find the prototype here