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, …
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.
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.
Before
After
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
Before
After
Same as profile concept, we used WYSIWYG editor to create or edit a menu. You can test the interactive wire frame from link below.
Before
After