Point Of Sale Management

You probably walked in a restaurant, cafe, … and saw a touch screen kiosk. Lots of people these days use these devices to order their food and other items. This project has two different sections, one section which is the front face of the product that actual users see this and order foods from it, the other face is back-end that users who buy this product for their restaurants or cafes can manage their kiosks which are just one type of hardware that can be managed through this system. I was responsible to create a solution for the back-end management system.

This is one of my projects as a user experience designer for a company which focuses on hospitality business. I was responsible to solve the complex problems, creating wireframes, designing visual comps and redlines for managing, editing, creating profiles, menus, items for different types of devices like kiosks, waiting displays, terminals, …

shrug

What Was the Problem?

Creating and managing menus in POS systems are hard and very time consuming. We needed to find a better and easier solution to help users manage their POS dashboards.
designer

What did I do?

I started doing some pre-research about this project since I was new in that team and wasn't very familiar with POS systems. Then doing some rough sketches and discussing them with product owners. When we reached at a point that we thought it's good for research state I designed a fully working prototype to test it with users.
brainstorm

Who Did I Work With?

I worked with our design team, product owners, developers and researchers during the time of this project.

Design Process

  1. Research (Who are the users? What is the product? What are the goals?)
  2. Collaborate, build relationships and start to know the team (Stakeholders, project managers, developers)
  3. Create lots of ideas and talk with stakeholders and developers (keep everyone in the loop, to prevent big surprises)
  4. Iterate & test (user test where possible)
  5. Create interactive wireframes with Axure and talk with stakeholders and developers
  6. Iterate & test (user test where possible)
  7. Creating redlines and visual comps for developers
  8. Keep in touch with developers and project managers to solve some unseen problems

 

What I Learned?

  1. Users of this product might be technical/installers who know the product very well or might be normal users without any technical background that bought the product. So the interface and overall experience of this product should be easy to use and intuitive for all types of users.
  2. There might be some technical constraints from development standpoint because the product will be connected to some legacy software to get additional data.
  3. This product only supports Chrome browser.
  4. Other competitors product experiences are not intuitive so this is a great chance to create a new and easy to use product.
  5. They had their own visual guidelines and UI elements that I had to use them in order to be consistent with other products.
See Full Interactive Prototype Of This Project

Ideation And Brainstorming

Lots of meetings with developers and project managers to understand priorities, limitations, goals, … We had lots of ideas on paper and whiteboard. I asked all people to draw their ideas and talk about them. The results were amazing. We discovered lots of constraints and possibilities.

 

Profiles List Scenario

In this section after interviewing the users we understood that they want to see all of the profiles that they can manage in a very clean interface. They need to see all profile names which in this case are POS hardware, state of the hardware either it’s active or inactive without going deeper into profile view (which we added a colored tags in the table for them to easily scan through all items), menus that specific profile is using, type of the hardware that this profile is registered to, last updated date and the last person who has updated this profile.


You can check the video demo of this section below, also you can check the interactive wireframe by clicking link below.

  • Create, manage and edit profiles
  • See list of all available profiles, attached menus, type of the profile
  • See the menu that specific profile is using
  • Preview the profile without going in profile management section
  • Preview user details that edited this profile
  • Preview the status of each profile (Active/Inactive) and see related error messages
  • Search and filter through the profiles list
View Interactive Prototype

Profiles List Before And After User Research

Before

  • Profiles list columns had separate filter icon and it was cumbersome for users to access these filters each time.


After

  • We moved the filter options to a single location which can easily be activated by clicking on button and users can change multiple options at a same time and see results immediately.
list1list2
2018-03-10_02-14-44

Profiles List Prototype Demo

Create A New Profile Scenario

We decided to create a WYSIWYG editor to help user with a step by step guide to create a new profile. Becuase it was a new product, users didn’t know anything about how they can create a new profile, how to attach a menu to profile, edit menu items and change its properties. Using this method we managed to help users easily understand how they can create a new profile step by step and at the same time they can see how their profile is going to look in the actual hardware. we added auto save functionality to this section to help users understand that they won’t lose any of their data while they are creating this profile.


You can check the interactive wireframe for this section by clicking link below

  • Select the device type and see the useful information of each device
  • Select related device options
  • Search for the available menus in system and attach the to profile
  • Ability to edit menus, images and texts in real time just by clicking on each item
  • Arrange menu items in profile management by dragging without going to menu management section
  • Select and preview theme and fonts for the profile
  • Assign the new profile to multiple locations
  • Ability to save the profile in any time
View Interactive Prototype

Add New Profile Before And After User Research

Before

  • Users had a hard time understanding the logic of each step in creating a new profile, each section was at the left sidebar and it didn’t present itself as a section manager for each profile.


After

  • By moving the sections manager to the top and with use of Office ribbon design we solved this problem completely.
profile1profile2
2018-03-10_02-26-14

Add A New Profile Prototype Demo

Add New Menu Scenario

Same as profile concept, we used WYSIWYG editor to create or edit a menu. You can test the interactive wire frame from link below.

  • Search and select items in database to add to the menu
  • Add or update item images
    Add or edit item categories
  • Preview and rearrange items in the menu
  • Ability to save the menu in any time
View Interactive Prototype

Add New Menu Before And After User Research

Before

  • When users tried to add new items to a menu, the search result was covering the previously added items and they didn’t see the changes while they were adding the items because newly added items covered by search drop down results.


After

  • We solved this by moving the search bar to the right side and make the results panel smaller, this way they can easily see previously added items and search results at the same time.
menu1menu2
2018-03-10_02-56-03

Create A New Menu Prototype Demo