StarMUVI
Client location Estonia
Status Launched successful project
Responsibilities Audit, complex UX/UI design, UI kit, Hand-made illustrations
My client already had the application when we started work. The first stage was a design audit, after which the client wanted to redesign his app
This application is used in cinemas to scan entrance tickets for employees and perform related functions. The main audit request: to make the interface easier to understand and faster to use, and for redesign: to make a modern interface that is easily implemented by developers on Android devices
Preparing for an Audit
A good design, it's a design that solves the tasks assigned to it. Therefore, before moving on to a direct analysis of the existing interface, I started talking with PM on this project
I prepared the main questions that we covered:
1. What is the main purpose of using the app? Scanning entrance tickets to cinemas and obtaining information about them
2. Under what conditions is it used (availability of lighting, number of users on one device, required speed for use, etc.)? External environment: subdued light. A large number of actions in the shortest possible time
3. Who are the main users? Cinema workers and managers
4. What result do you want to achieve as a result of the audit? Identify points in the design that will help speed up and facilitate the work of employees (increasing productivity, reducing errors) while maintaining the current functionality as much as possible
5. What result do you want to achieve after the redesign? A more modern, employee-friendly design. Commercial for further possible sale to other cinemas
6. What devices are used to display the interface? 2 types of interfaces: a mobile phone with a camera and a special scanner without a camera (with a special sensor for reading information)
7. What were and are the current implementation constraints (terms, operating system, budget, etc.)? The budget is limited, if possible, the maximum preservation of the functionality (backend) is required, the UI is maximally adapted for Android
After receiving the answers and other information during the discussion, I proceeded to audit each individual screen
Main page changes
User goal
Fast scanning and getting feedback from the app
Barriers identified during the audit
1. It is not clear how to change the location (near which Hall the employee is located)
2. To select an action (Check in, Check out, Info), users must constantly press Next or Previous
3. Location (Cinema, Hall) and Target action look the same, which increases the cognitive load on the user
4. Difficult to scan because the scan window itself is not displayed (where the camera is pointed)
5. The result of the scan disappears after a few seconds, in case users did not manage to catch the information (or they need to resolve the issue with the manager), they need to rescan the ticket
6. Tabs have too little contrast
7. The title of the page (Ticket validation) takes up the necessary space and duplicates the information (Scanner). Ticket validation=Scanner
8. Using only textual information. The brain processes the visual display of information much faster (icons, symbols, illustrations, photos, etc.)
9. Same interface for camera phone and special scanner
Solutions
1. Display the choice of a cinema on the screen during authorization
The selected cinema will be displayed in Settings, as users need to log out to change it
2. Put 3 main actions at once on one screen in the form of buttons, each action should have a different color (in the active state). This will reduce the chance of error and increase the speed of workers.
3. The location (hall) should be clearly highlighted, make it clear that clicking on its name will change the hall
4. For a mobile phone with a camera, add a window for scanning on the main screen, for a scanner — instructions on how it works
5. The result of the scan should remain on the screen until the next scan or change of action
6. Get rid of duplicate information (Ticket validation) to free up usable space
7. Add icons, symbols, illustrations to target actions
Result after Audit and New design
History page changes
User goal
Viewing the history of actions and obtaining information about the success of their implementation
Barriers identified during the audit
1. Only text information
2. The reason for the error is not specified (the only exception is Invalid barcode)
Solutions
1. Adding graphic symbols to the most important information
2. Specifying the cause of the error instead of duplicating the name of the operation
Result after Audit and New design
.png)
Schedule page changes
User goal
View movie schedules, their status, the number of occupied and total seats in the cinema
Barriers identified during the audit
1. Unnecessary duplication of information (name of Schedule tab and Schedule page)
2. It is not possible to view occupied seats by category (general, double, sofa, etc.)
Solutions
1. Remove duplication of information, add emphasis to tabs
2. Add options to view information about occupied seats by category
Result after Audit and New design
Movie details
User goal
Get information about the movie (place, row, hall, etc.)
Barriers identified during the audit
1. It is not clear how to return to the previous screen
2. 11 minutes gives no information
3. There is no movie title, the cover may be in another language or not in the best quality
4. Not all the information employees need
Solutions
1. Adding an icon to close the page
2. Adding a movie title
3. Assign the same colors to the movie time as in the schedule (red - unavailable, green - boarding has begun, etc.)
4. We add the information necessary for employees (PM found out after talking with employees)
5. Add an accent color to the movie status
Result after Audit and New design
Settings
User goal
Account setup
Barriers identified during the audit
1. Too much bright redish color in headers and controls (creates the feeling that the user has made a mistake or there has been a system failure)
2. Target action buttons look like they are disabled
3. It is not clear how to set up Success sound and Failure sound
4. Success sound and Failure sound look the same in importance with Log out
5. Current User, Current theater looks like an editable input field (this is not so, this information can only be changed by the system administrator and is loaded automatically when Log in)
Solutions
1. We remove the hot pink color, add a hierarchy due to a bolder color style, make the switcher familiar to users of colors (green - active, gray - inactive)
2. Add contrast to active buttons to make it more obvious that they are available
3. Success sound and Failure sound are separated and each add a switcher
4. We remove the underscore from the information that is inaccessible to change, so that it does not look like an input field
5. We add the settings necessary for the employee, identified during the communication of users with PM
Result after Audit and New design
Manager functionality *
When communicating with PM, an interesting detail was revealed: there are employees who perform scanning, and there are managers who have different responsibilities, but the functionality of the application is the same. This leads to the fact that if an employee has problems, he must look for a manager and solve the problem personally (which leads to loss of time)
Since the new functionality was not paramount for the client, PM and I started it after the completion of work on the main part
User goal (role — manager)
Quick resolution of emerging issues during the work shift
Barriers identified during the audit
1. Managers (unlike employees) change cinemas several times a week, each time they have to go to the system administrator to create a couple of devices. This leads to a loss of time at the beginning of the working day, as one system administrator serves several managers
2. In the event of a problem, the employee must look for a manager, the efficiency of obtaining information and solving emerging issues is lost
3. In the cinema, it is possible to order food from their seats, some dishes may become unavailable (too late, food has run out, etc.), the manager must go to the device located in the kitchen to change the availability of menu sections
Solutions
1. Add a screen before authorization to be able to create a pair of devices. Login information will be sent out by the administrator in advance, based on the schedule of the manager
2. Add Call Manager feature. This call turns into a fixed banner
3. Add the ability to configure the availability of menu sections in the form of switches
Result after Audit and New design
The result
What was done:
1. Prepared questions for review with PM
2. An audit of each page of the application was carried out and recommendations were given for their improvement
3. Redesigned taking into account the existing restrictions
4. Prepared illustrations and UI kit for developers
As a result of the implementation of the changes, the productivity indicators of employees and managers have improved and the number of errors has decreased (based on the results of a review by PM)
