• Point of Sale Management

Point of Sale Management

Project Goal

I was responsible to find a best solution to design a control panel for point of sale (POS) hardware. User should be able to do tasks such as creating, managing and editing  menus, items and lots of other settings.

My Role

I was user experience designer in this project, worked with a team of 15 developers and project managers. We worked in agile environment with daily standups, sprint reviews and retrospectives.

Tools & Deliverables

I used pen and paper for rapid ideation, Axure for interactive wireframes, Photoshop and Illustrator for visual designs and redlines. We ran some usability studies with Axure wireframes.

Project Summary

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 backend 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 backend 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, … See Full Interactive Wireframes

DUE TO NON-DISCLOSURE AGREEMENTS, SOME DETAILS HAVE BEEN INTENTIONALLY MODIFIED OR OMITTED FROM THIS PROJECT.

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

  • 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.
  • There might be some technical constraints from development standpoint because the product will be connected to some legacy software to get additional data.
  • This product only supports Chrome browser.
  • Other competitors product experiences are not intuitive so this is a great chance to create a new and easy to use product.
  • They had their own visual guidelines and UI elements that I had to use them in order to be consistent with other products.

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.

Scenarios

This project had three main scenarios. We called each hardware such as kiosks profile. Each profile assigns to a hardware that can show a menu to users.

First scenario was about managing the list of the profiles that user created, second was about creating a new profile and last one was about creating a new menu for the profile. Below you can see each scenario’s tasks.

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 on this  link.

  • 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

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 on this link

  • 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

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

  • 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

Profiles List Before and After Usability Studies

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.

See interactive wireframe of profiles section

Profiles List Visual Comps and Redlines

Add a New Profile Before and After Usability Studies

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.

See interactive wireframe of add a new profile section

Add a New Profile Visual Comps and Redlines

Add a New Menu Before and After Usability Studies

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.

See interactive wireframe of add a new menu section

Add a New Menu Visual Comps and Redlines

More Projects

Let's work together

Got an interesting project and would like to work on it with me?