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