Responsive Check-In
Enabling event attendee check-ins from any device
Cvent
Responsive
Accessibility
Goal
Check-in that is easy to use for new users such as one-time volunteers who help on the day of the event, as well as robust enough to make it a useful tool for regular users with specific needs around permissions and security.
Status: Release May 2025, Early Adopters
The Problem
Event planners have different operational needs the day of an event than they do in the preparation beforehand. They use different devices and technologies for support during an event for which Social Tables is not optimized. The current ST app is quite outdated and only available for iOS. So, planners end up carrying their laptop around which is not very convenient.
HMW help planners and event staff or volunteers who are unfamiliar with ST to carry out activities on the day of event?
Defining Requirements
We tapped into our existing users and client success managers to learn what was important to planners:
Ability to manage attendees on any device, so mobile first approach
Allowing volunteers to help check in without creating an account
Allowing event owners to stay in control and share only the info they want
We also audited the existing iOS app and prioritized which existing features to include, which ones to forgo, and which to delegate to post MVP.
For MVP we deprioritized seating as it was not essential for checking in attendees. Allowing volunteers was initially designed for, but later moved to post MVP to allow time for implementation research.
Design Principles
Prioritize learnability
Mobile first approach
Use of the new design system
Aim for Level AA accessibility compliance
Validating and Prioritizing Feedback
We tested the designs with users and got feedback from internal teams. Based on that, we prioritized things to add to phase 1, such as the ability to return to the default "not checked in" state, added labels, and revised the check-in interaction from a slider to a drop-down.
Edit Attendee Info
Filters and Attendee Settings
UX Review and Accessibility
The last and very important step for this project was ensuring the built product met the requirements, including UI, performance, correct user permissions, and accessibility. QA and I did a thorough review with emphasis on the following areas.
Overall Page Structure
Is the page title very similar to the <H1>?
Are we using correct headings structure without skipping heading levels?
Interactive Elements
Next, I looked at anything interactive, such as buttons, links, and input elements.
Are they marked as such and announced correctly by the screen reader? Buttons perform actions, links lead to pages.
Are all states and focus rings showing correctly? Does the focus ring have a 2px outline with a minimum of 3:1 contrast with the non-focused pixels?
Keyboard operability: Can I tab to the interactive elements in the correct visual order?
If buttons are icon-only, do they have accessible names?
Are all tap targets large enough?
Is there enough space between adjacent interactive elements?
Do all input fields have labels read out by the screen reader?
Then we ran it a few times with a screen reader and checked if anything was missing or announced in a hard-to-understand manner.
Overall UI and Breakpoints
Afterward, I examined the UI starting with the main breakpoint, in this case, “small”. I compared padding, spacing, colors, and font styling to the designs to ensure they matched. Then, I reviewed how elements transitioned to the next breakpoint and the next larger one.
I plugged in long names to inspect how they display and whether they got truncated where needed.
How does the layout look when data is missing? This step helped catch edge cases missed in the design phase.
Lastly, QA checked the build on multiple platforms, browsers, and zoom settings, and performed Level 1 & 2 accessibility checks.