Overview
A redesign of an existing app used by hospitality clients. Door staff at events use the app to scan customers’ tickets. In addition to scanning, there is an attendee list, as well as a stats overview, and app settings.
Challenge
One of the main business needs for this project was that the new app needed to be able to handle larger events. As well as being able to target our users' needs and remove existing pain points, such as increasing the speed of the app, faster check-ins, using less battery life and allowing multi-ticket check-ins.
Tools
Figma — Design
Miro — Research, Planning, Workshop, User flows
UserZoom — User testing
After Effects + Lottie — Animation
Zeplin — Engineer handover
Process
The process began with consulting with the key stakeholders in order to understand the requirements, functionality and context. Following this, I conducted some competitor analysis as well as compiled a research plan.
Working from the requirements set out, I mapped out a top-level flow, before moving on to a more detailed user flow, wireframes, and high-fidelity designs. I conducted a number of unmoderated user tests to certify our assumptions and to make sure that everything was usable and easy to understand.
The designs went through a number of iterations, from user feedback but also from reviews with the stakeholders as well as the wider UX team.
The Design System from The Access Group was used in order to keep consistency between the other products that the client could likely be using as well.
I also created a number of animations to bring the app to life and give the user some nice feedback whilst using the app.
I used Zeplin to hand over the designs to the engineering team and conducted design QA as part of each task in the sprint.
Personas
In order to gain a greater understanding of who our audience is and what the problems were, I led a workshop with some of the stakeholders and the client success team, as well as interviewed a number of existing users. From these I compiled personas.
Top Level Flow
Working from the requirements set out by the stakeholders, I mapped out a top-level flow.
User Flow
Wireframes
Solutions
Speed — a number of considerations were made in order to make everything work as fast as possible. From the login details, the event would automatically be set, so that it doesn't need selecting and the user can scan straight away. Next tickets can be scanned one after the next without having to do any other action.
Multi-check-in — if a ticket with associated tickets is scanned, a button will display allowing all other tickets from the group to be checked in as well.
Battery life — the user's phone batteries were running out quickly, so to preserve battery if the camera is inactive for a set amount of time (users can set their own duration), then the camera will pause automatically, as well as allowing the user the ability to pause the camera manually also.
Search and Filter — Added the ability to search and filter the guest list quickly and easily.
Usability — Since users are likely to use the app from outside a venue in the evening, with a lot of noise and activity around them, a number of considerations had to be taken into account;
Dark mode — as default, since the app would be used in a low-light setting.
Contrast — making sure the interface passed the necessary accessibility requirements.
Haptic feedback — due to the noise and activity around the user, it was beneficial to add some tactile feedback. For example, when the user scanned a successful or unsuccessful ticket.
Sound notifications — added to increase the chance of being informed.
UI Design
Animations
I created some simple animations using After Effects and Lottie.
As to not affect the accessibility or usability I kept them quick and simple. Other animations used were some confetti to give a sense of joy when the user had completed checking in all guests.
Results
This project is currently in development, but feedback from clients and stakeholders has been positive so far.
Conducting research at the beginning was extremely beneficial to understand the client's needs and to identify their pain points with the existing application.
User testing helped to test our assumptions and evaluate the user's feedback.