Swipes IOS App Concept

B2B Shop

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.

Introduction To The Case

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:

Problem 1 - The printed promotion material is an expense that Swipes is looking to manage by replacing (or at least minimizing) the need for a printed Product Catalogue.
Problem 2 - The clients of Swipes always need to have the latest version of the Catalogue available (updates happen twice a year).
Problem 3 - Currently the B2B clients of Swipes either punch in the EAN code numbers of the products on their web ordering interface or rent an EAN scanner form Swipes to be able to walk around their shop, check the stock, scan the EAN codes of the products that need to be restocked, connect the scanner to a computer and order using the computer. That is a lot of steps.
Problem 4 - The shop owners have to be able to specify which items go to which of their shops. Most times the shop owners do orders for several of their shops at the same time, so before the products can be ordered, the destination shop has to be specified.

There also a couple of requirements as well:

Requirement 1 - The Catalogue of the products including product names, prices, options (color, size etc.) and a product picture has to be available offline.
Requirement 2 - The size of the Catalogue has to be of reasonable size (no bigger than 200 MB). The most challenging part will be managing the picture file sizes.
Requirement 3 - The B2B clients have to be able to see the products and add them to their cart while offline. Ordering the items obviously can only be done once online.

If only there was a way to solve all those problems with all those limitations using one solution…

The Solution

A modern smartphone:

Works both off- and online
Is an EAN scan capable device
Can display the products in the Catalogue both in a browsable list as well as in more details view of each item
Allows searching by category
Enables searching by open text
Can prompt the user once a new version of the catalogue is available
Has enough storage space for the Product Catalogue

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!

The UX

How do we make this happen? In essence it is a shopping app. What we need is:

Login (no signup on the App itself)
Product list view
Product details view
Text search with a suggestions logic
EAN scanner
Category search process
Ordering process
Option to see the current offline Catalogue version and manually check for an update
Some settings (logging out, changing a language etc.)

Here is a simplified UX plan of the Swipes app:

Next step - putting the UX in some nice and clean screen layouts.

The UI

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.

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.

PRODUCT LIST

The first thing the users see after login is a list of products. There are two options for the viewing mode:

small images for scanning (left)
large images for previewing product detail (right)

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).

TEXT SEARCH

A rather standard text search with automatic suggestions for past searches and match finding by the text in the search field.

Up for some more reading?

Have a look at my previous article -
Mobilitet IOS App Concept.