This is an app that identify items in your surroundings using your device camera. It finds the exact match but also price and style alternatives to that product. User can chose to buy product online or in a physical store, tells you where it is and even gives you directions to it.

Main features:
► User can identify a garment, an accessory or any item in environment, even in motion.
► Matching is done automatically. The more detail user captures, the more precise and faster the match.
► App also gives users alternatives to similar items, with price and availability based on desired item.
► Gives user the choice to buy online or buy in a physical shop with real-time price and stock information.
► Shows closest physical shop with directions and duration. Shows opening times and contact information.

On this page you can follow me through the process from idea to visualisation.

1. Brainstorming

I start off by brainstorming abut the use cases and the purpose of the app. I usually just sketch on a piece of paper to make sense of the project. At this stage I am only thinking about the use cases without any thought of structure of app – I’m trying to figure out what makes most sense and gives the most value to the users. I asked around the office and friends what would be of most value for them. Quite a few mentioned that they would really appreciate alternatives to very expensive products. Ladies preferred to buy it in store even if more expensive.

2. Use case diagram

The I start making the diagrams to map in more detail on what the different use cases would be. I formally now added the “alternatives” option. I also added the possibility to locate physical stores in the users vicinity.

3. Structure

I love this step because it gives a structure to the “things” that will appear in the app. By looking at the structure, it will make it easier to figure out what kind of elements would be best suitable for each “thing” . Since the products are the heroes of this app I decided to use cards for them. It makes it more tangible and supports the mental model when favoring etc.

The three highest level screens are the “find”, “History” and “Favorites” screen and I decided to go with the Navigation Drawer pattern. I was thinking about going with the fixed tabs pattern because its only 3 screens but would rather use those for filtering. Furthermore there will be additional items in the Navigation drawer such as, settings, account, Google wallet, help. It is also then consistent with the other Google apps.

4. Inventory of “things”

OK so in this step, I make an inventory of “things” that will live in the app. You can say that this is a low level of Information Architecture exercise but its really useful to figure out how things fit together. It makes it easier to start thinking about what components and patterns to use for the “things” :)

5. Sketching screens

At this stage I have the overall structure set, I know what screens I need and my previous inventory shows me what “things” need to be in the app. So I start sketching and trying out different layouts, elements and patterns. “Things” start to take shape into cards, lists etc. I think this is one of the most important steps and good to do together because this is the base to build the more detailed wire-frames on and is a very creative step.

GET INPUT, RINSE AND REPEAT, REFINE :)

6. Detailed wire-frames

Start working with Illustrator and proper guides and margins to put the elements in its place. Setting the right sizes although this was a bit too cramped I must admit! Give me some more time and I’ll fix it :)

1.0 Scanning an item with the camera identifies it quickly and presents the results automatically on match. Or user can tap the progress button to show results so far.
2.0 History is available and takes user to a result instance based previously performed.
3.0 Favorites can be added and viewed from this screen.
1.2 User gets the perfect match but also alternatives for style, price etc.
1.2 User has the possibility to chose color, size and different purchasing methods.
1.3.1 User can sort online vendors by using the fixed tabs or swiping. “Buy” enables quick purchase through Google Wallet
1.3.2 Again, sorting is made possible by fixed tabs. This time default is by distance from current location.

7. Colors and final details

This step we add the color identity to our app but also some finishing touches that supports the usability of the app. I decided to go with a Blue grey 500 + 700 and a strong cyan accent color. I used accent color for the buttons to emphasize the action.

8. Purchase flow

This is the most common flow for identifying, selecting and purchasing an item. This optimal flow utilizes Google wallet for direct purchase because the payment and address information is already stored. The red arrow illustrated alternative/shortcut flow.

Note: for this app, a cart is not used to ensure simplicity. Later builds may include a shopping cart system but only if simplicity can still be maintained. The main concept of this app is to find an item and purchase it within minutes – quick, fast and easy.

9. Visualization

Making a visualisation is a great way to communicate a concept. A visualisation says more than 1000 thousand words! Here I want to illustrate how the scanning process works.
– The user starts the scan
– Taps on the object she wants to scan
– The systems starts analysing and matching it with products
– The more detail the user captures, the faster the system can exclude and include.
– Logos and iconic colors and shapes are great and gives almost instant results!