Client
Role
UX, UI, & Visual Design
Tools
Illustrator, InVision
Overview
As a company that distributes convenience store products, Capitol decided it would be nice to start a program allowing employees to purchase retail sized products at a discount. There was already a way for employees to order products, but often the bulk size was a drawback and an employee couldn’t place their own order.
The Marketplace was conceptualized to fulfill this space. Placed in the break room, it would consist of retail shelves and coolers and hold individual products for employee purchase. The Kiosk POS would be a touch screen computer with a scanner. Users log into the kiosk by scanning their employee badge, eliminating the necessity to type in a username and password. The scanner can also be used to ring up any items with UPC codes.
First Version
IT created the app functionality in order to test the way it links with our back end system and ensure that ordering worked properly and accounts were always charged accurately.
This prototype had nearly everything on one screen with very little visual hierarchy. In order to get the project test phase rolling, I created a quick skin for the prototype.
As I was not informed of the Kiosk until IT had begun coding, this temporary solution relieved some time constraints and allowed me to pursue more research and analysis before delving into the design phase.
Research & Analysis
USER GOALS
– Buy Item (via scan or look up)
– Check Price (via scan or look up)
– Check current balance
– Check order history
– Email or print history
– Change interface language
INTERACTION GOALS
– Friendly
– Unexpected
– Bilingual navigation
– Seamless animations between screens
I created user flows to understand how the customer would navigate through the interface.
Because the kiosk has a small number of core functions, the interactions and navigation while ordering is important. While iterating through wireframes it was deliberated when a back button was useful, how many times to confirm, does scanning an item automatically add it to the cart, what information is necessary on the item page, what the complete order button should be labeled, and so many more small decisions.
Design
Both lo-fi and higher fidelity wireframes were produced. As with other projects, the company’s stakeholders prefer a higher detail wireframe. Once the first iterations were complete in the lo-fi sketch phase, I moved on to detailed wireframes.
The mockup is an example of a possible branding scheme. The branding of the initial kiosk is still under construction, but this shows stake holders and example of a working design and helps work out ideas to make the design more modular to accommodate rebranding when marketing it to outside companies.
