Backend Management

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, ... in restaurants, cafes, ...

Creating and editing menus to use in those profiles and other related materials which users need to access in this control panel. This control panel should've been easy to use and explore for all type of users.

In this project I worked very closely with different teams, project managers and developers to deliver the best solution for this complex product.

I collected some samples here to show different parts of this project in videos and images. You can also check the interactive wireframes that I created with Axure for this profile by clicking here.

Profiles List Goals

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

Link to interactive wireframe

Profiles List Interaction Demo (Video)

Profiles List Visual Designs

Here are some visual design samples for profiles list:

Profiles List Redline

Here is a sample of profiles list's redline:

Creating a New Profile Goals

I decided to create a WYSIWYG editor to help user with a step by step guide to create a new profile.

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

Link to interactive wireframe

Creating New Profile Visual Designs

Here are some visual design samples for creating a new profile or editing an existing one:

Creating New Profile Redlines

Here are some samples redlines for creating a new profile or editing an existing one:

Creating a New Menu Goals

Same as profile concept, I use WYSIWYG editor to create or edit a menu.

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

Link to interactive wireframe