UX, UI | Feb 2016
NOTE: Swipes is a made up name and appearance (created with fun in mind) since the actual company requesting this concept would not like me to be blabbing on about their plans before the release of the actual product. Some of the facts are not real, but the problems, requirements and solutions are real.
Swipes is a business doing B2B sales to small and medium size retail store chains (4-6 shops on average). These businesses sell non-edible products - furniture, clothing, electrical appliances etc. Check out the icon set that I created for the categories to get an idea of what kind of products I mean:
Here is the deal - Swipes annually spends an enormous amount of cash on printed promotional materials such as seasonal Product Catalogues to be sent to their customers (the retail store owners).
There are around 9k items in the product database with many products having several options (colors, sizes etc). Imagine how thick those product catalogs are. That is lot of paper!
So here are the main problems Swipes is facing:
There also a couple of requirements as well:
If only there was a way to solve all those problems with all those limitations using one solution…
A modern smartphone:
A native phone App can easily replace both the printed catalogue as well as the EAN scanners. This solution both minimizes the expenses of Swipes and simplifies the ordering process for the shop owners.
So a native phone App it is!
How do we make this happen? In essence it is a shopping app. What we need is:
Here is a simplified UX plan of the Swipes app:
Next step - putting the UX in some nice and clean screen layouts.
What is presented here is a result of several iterations of hand drawn sketches that will not be presented here. This is to clarify that the creative part of the UI is done with a pencil (or in some occasions a pen) and a lot of paper.
LOGIN AND FIRST IMPRESSIONS
A simple loading screen and a login form. No signup is allowed here since the B2B clients can only log in with the credentials they get from Swipes once starting a business relationship.
The first thing the users see after login is a list of products. There are two options for the viewing mode:
Top - EAN scan, text search and category search (the three product search options).
Bottom - the main navigation
EAN SCAN AND PRODUCT DETAILS
The code scanning is done using the camera on the phone (left). Once a EAN code is detected, the user automatically gets redirected to the Product Details (right).
At the bottom of the Product Details screen there are two selection inputs (delivery location and amount) and a button for adding the item to the Cart.
PRODUCT OPTIONS AND SHOP SELECTION
A vertical selector is used for specifying the different options of the product (left).
Since the shop owners often shop for several of their shops, an option to specify the shop to which the items should be sent is included (right).
A rather standard text search with automatic suggestions for past searches and match finding by the text in the search field.
This form of search filters the products by categories and two layers of sub-categories to get a specific set of products. The user can freely move up and down the category layers.
Since the App is planed for B2B purchases, the amount of items in the cart can get rather large. The users therefore need a quick and easy way to adjust the amount of items as well as the delivery location of each item.
After an overview of the order, the user ends up in a Booking Confirmation screen with the main details of the booking displayed. I little illustration as a reward for all that work they have put in to get this far :)
NOTE: This article does not include the UI of the Settings. The main aspects of the product have however been covered, so I will just stop here.
Hope you enjoyed this article and thank you for reading!
For more details on this or any other project, get in touch with me.
Have a look at my previous article -
Mobilitet IOS App Concept.