Check-In | Check-Out Event App
In a search for the most convenient way to welcome event guests
Project Overview
The Check-In | Check-Out Event App is a web-based mobile application that serves as a vital component of a larger event management system.
Before an event, event managers can use the app on tablets and desktops to easily manage and review the guest list. On the day of the event, the app’s focus shifts to on-site operations, empowering event staff to check guests in and out.
Intro
This project was a design challenge to improve the user experience of an existing event app. The goal was to analyze the current user journey, propose key improvements, and design a new feature that adds value for both event organizers and attendees.
Problem Statement
The existing event management app provides a way for users to check in, but the process is inefficient and lacks key features that would streamline event entry and management. The primary challenge was to create a more intuitive and reliable experience for users and event staff, while also introducing a new feature to address a significant pain point in the event lifecycle.
My Role
UX Researcher:
Conducted user journey analysis to identify pain points and opportunities.
UX/UI Designer:
Developed low-fidelity wireframes and a prototype for the improved user flow and a new feature.
Tools
Figma, FigJam
Phase 1: The Challenge — Uncovering User Pain Points
The current app’s check-in process was a source of frustration. Through an in-depth user journey analysis, I identified several key pain points.
Before & After: The Existing App UI
To visually ground the problems identified in my research, I’m going to use a sketch (not the real UI design) to illustrate the key screens of the existing app’s user interface. This will give a clear picture of the design challenges and set the stage for the improvements proposed in the next phase.
User Personas
To understand the core challenges, I developed a set of user personas based on different levels of technical proficiency and event management experience. For this case study, I will focus on two key personas to highlight the different needs my solution addresses.
Sophia Reed
| Event Coordinator
Profile:
Tech-savvy expert
Goals:
Ensure smooth and efficient check-in, manage high-pressure scenarios with ease, and provide quick guidance to new employees.
Needs:
A fast and reliable QR code scanner, advanced search and filtering options, and customizable features to align with specific event needs.
James Carter
| First-time Participant
Profile:
Tech-savvy, a novice in the industry
Goals:
Successfully check in guests for the first time while staying organized, learn and adapt quickly to the tool’s features, and overcome shyness by focusing on task efficiency.
Needs:
An intuitive interface that’s easy to navigate without prior experience, reliable QR code scanning to avoid delays, and clear, concise feedback from the system at every step.
User Journey Analysis
The existing flow for any staff member to check in a guest involves the following steps:
Entry point: The staff member accesses the app via a QR code scan on their phone or a provided link.
Searching: They open the guest list and search for registered guests.
Check-in: The staff member checks in the guest from the list or by scanning a QR code on the provided ticket.
Check-out: Currently, a dedicated check-out process via QR does not exist. The only way to check out is manually, and it is a hidden functionality.
Corner Case: If a guest is not found (neither through a QR scan nor a search), or not registered at all, there is no in-system workaround. A proposed solution is to add a new guest registration option for staff.
Onboarding and Entry Point
Positives:
The entry point is relatively easy to use via a QR code or link, and the guest searching process is straightforward with helpful on-screen cues like “search box” and “total guest check-ins.”
Negatives:
There is no onboarding process for new employees, which could lead to confusion.
Suggestions:
A simple onboarding flow would be beneficial for new users.
Navigation and Usability
Positives:
Guest searching is straightforward with multiple methods (typing, filtering, scrolling). The “scan barcode” icon button is easy to reach, and the camera stays open after a successful scan, allowing for a good flow for event staff.
Negatives:
The keyboard does not close automatically after a search, requiring manual action. The upper part of the screen is cluttered with secondary information (time, place, duration). Additionally, it’s easy to accidentally tap the “check in” icon button while scrolling.
Suggestions:
Making the “scan barcode” icon button slightly larger would improve its tap target. Using gestures like swiping left and right could be a useful navigation alternative, though this would require user testing. Rearranging the screen to prioritize essential information and hide unnecessary details would also improve usability.
Performance and Responsive Design
Positives:
The app demonstrates good performance and fast load times, which is crucial for a dynamic event environment. The responsive design is good for various mobile devices, and the scan functionality is correctly hidden on desktop. The max-width on the desktop view is also restricted to maintain a clean layout.
Negatives:
The desktop version’s filter functionality is not as visible as the mobile version. The desktop layout also mirrors the mobile layout, which negatively impacts readability and accessibility on a larger screen.
Suggestions:
A smart search bar that combines filtering and searching into a single, intuitive action would be a major improvement, ensuring the filter functionality isn’t hidden from the user.
Accessibility
Positives:
The “scan barcode” icon button is easy to reach and tap, the desktop view has a restricted max-width, and the app provides good feedback messages for completed actions.
Negatives:
Several readability issues exist, including insufficient letter spacing and small font sizes. Color contrast does not meet WCAG AA standards. Some functionalities appear disabled, and the close button on the “side bar” is too small and too close to the edge, leading to accidental taps. The keyboard stays open after searching, and the search results remain hidden.
Suggestions:
The “scan barcode” icon button could be larger to be a better tap target. Better hover effects are needed for the desktop version.
Edge Cases and Errors
Check-in more than once:
The current message shown for a double check-in is sufficient, but the color could be changed to an informational tone rather than an error tone. It is important to conduct user research to understand the common practices of event managers regarding guests who leave and re-enter.
No guest found:
The current error message is correct in its tone. To improve the user experience, a suggestion to search by name could be added if the initial QR scan fails. If the business model allows for it, a new feature for managers to quickly register a guest on the spot would be a valuable workaround.
User Roles and Permissions
This project was scoped to a single user type on-site: the event manager. Asking about user roles and permissions was a key part of scoping the design challenge and confirmed that the focus should be on the on-site team’s needs.
User Satisfaction and Pain Points
This project was scoped to a single user type on-site: the event manager. Asking about user roles and permissions was a key part of scoping the design challenge and confirmed that the focus should be on the on-site team’s needs.
User Satisfaction:
Run a user survey to measure overall satisfaction with the tool. Metrics to track include: general satisfaction, usability, ease of use, and emotional impact.
What to Measure:
Task success rate, time on task, error rate, and identifying dead ends.
How This Helps the App:
By identifying pain points, prioritizing improvements, and making data-driven decisions based on feedback, the app’s usability and user satisfaction can be significantly increased.
Key Features Analysis
Guest List & Searching:
Key features:
Searchable database with manual search, filtering, and auto-suggestions.
Strengths:
Clear overview of guests, accommodates manual searches, and is user-friendly.
Weaknesses:
Issues with typos, lack of fuzzy search, and unintuitive filters.
Opportunities for Improvement:
Introduce fuzzy search, improve advanced filters, and test performance with large databases.
Check-in & Check-out Process:
Key features:
Guests can be checked in manually or via QR code. The app tracks attendance status.
Strengths:
QR code scanning is fast, and manual check-in handles exceptions.
Weaknesses:
Relies on an internet connection, error handling is unclear, and the check-out option is hard to find.
Opportunities for Improvement:
Add an offline mode, introduce bulk check-in options, and create a prominent, intuitive check-out process.
Phase 2: The Solution — Design & Improvements
Improving the Search Experience
The existing search functionality is a key pain point. My proposed solution is to implement a Fuzzy Search and Better Auto-Suggestions feature.
Why:
This addresses critical pain points for tech-unfamiliar users and reduces errors during manual guest searches, aligning with the needs of personas like James Carter.
Validation:
I would conduct usability testing with both tech-savvy and tech-unfamiliar event staff. I would also propose A/B testing to compare the new system with the old one and perform error analysis using real event data.
Approach and metrics:
Usability testing:
Recruit tech-savvy and tech-unfamiliar staff. Provide tasks like searching for specific guest names with typos or alternative spellings.
Metrics: time taken to find a guest, search success rate, and user satisfaction.
A/B testing:
Compare the current search system with the improved search. Test under identical conditions.
Metrics: number of successful searches, reduction in errors, and user preference.
Error analysis:
Use real event data to simulate searches.
Metrics: percentage of errors handled effectively, frequency of mismatches.
Auto-suggestion improvements:
Handle typos and alternate spellings:
The system should include algorithms that account for common misspellings, phonetic matches (e.g., Bertha vs. Berta), and alternate spellings of names (e.g., Emma vs Ema).
Highlight matches:
Bold or highlight the portion of the suggestion that matches the query to make the results clearer.
Results categories:
Separate results into logical groups: “Exact match” and “Similar matches”. Also, by attribute: “First name”, “Family name”, “Company name”.
Ranked results:
Prioritize more relevant results based on: Exact matches first. By attribute: “First name”, “Family name”, “Company name”.
Past searches or recent activity:
Show recent searches if nothing is typed yet. Show searches from other event managers as well.
Other search improvements:
Quick clearing of search results:
Suggestion: Add a visible “Clear search” button or icon. This saves time for users who need to switch between searches frequently.
How it works now: You should clear the content by selecting the text and deleting it, or delete characters one by one and then hit enter to clear out the filtered results.
Dead-end: This could be a dead-end for some tech-unfamiliar users. Workarounds like clicking “back” or refreshing the page are time-consuming and can lead to undesirable results
Closing the keyboard on mobile:
Automatically close the on-screen keyboard when the user hits “Enter” or selects a result from the dropdown. This prevents the keyboard from hiding results, improving visibility and interaction speed.
Incorporating filtering and sorting in search results:
Add a filter menu above all the results with sticky placement. The menu should open as a sliding drawer. Combine filters and sorting in one panel. Provide clear visual feedback, show the current sorting method, keep the chips that appear when a filter is selected, and keep the shown results counter.
Prototype of the final wireframes:
Phase 2: The Solution — Design & Improvements
Check-out Process
The current app lacks a clear and intuitive check-out process. I’m proposing a new feature to address this pain point and provide valuable data for event organizers. I’ve designed two variations and will use validation methods to determine which one is most effective.
Variation 1: Use the Same QR Code
How it works:
When a guest’s QR code is scanned, the system checks the guest’s current check-in status. If they are already checked in, it provides a message and an option to check them out.
Advantages:
No additional steps are needed, as it uses only one flow. The process is simplified and consistent for staff.
Challenges:
There’s a risk of accidental check-outs, and the system requires more complex logic to handle two processes from a single scan. The manual check-out option needs better visibility in the guest profile.
Variation 2: Using Check-in and Check-out Modes
How it works:
The app introduces dedicated “Check-in” and “Check-out” modes that staff can toggle between. They can switch between modes whenever needed to check in or check out. The same QR code will be used, however system won’t make a verification if the guest has already checked in.
Advantages:
This provides a clear differentiation between the two actions, minimizing errors. It also streamlines the workflow, allowing staff to focus on one specific task at a time.
Challenges:
This approach has a learning curve for staff who are not used to toggling modes. A manual check-out option for lost tickets is still needed.
Phase 3: The Outcome & Next Steps
This project allowed me to explore a full design process, from problem identification to a high-level solution. It demonstrated how a small but significant feature can solve a real-world problem for both users and the business.
Learnings
The Importance of Foundational Analysis:
This project highlighted the critical value of a thorough user journey analysis and persona development. Before proposing solutions, I had to understand the entire ecosystem, from onboarding to edge cases.
Designing for Diverse Users:
By creating personas with varying levels of tech proficiency, I learned the importance of designing for a wide spectrum of user needs. A solution that works for an expert like Sophia might not be intuitive for a novice like James.
Prototyping as a Validation Tool:
Developing a low-fidelity prototype was invaluable for testing my ideas quickly and identifying usability issues early on. It allowed me to get a sense of how the flows would work in practice before investing time in high-fidelity mockups.
Next Steps
High-Fidelity Mockups
Create a polished, high-fidelity design of the new feature.
Usability Testing
Conduct usability tests with potential users to gather feedback and iterate on the design.
Data-Driven Insights
Work with a development team to implement tracking to see if the new feature improves key metrics like checkout efficiency.
Thank you!
Thank you for taking the time to look through my case study! I hope it gives you a clear picture of how I approach problems and shape solutions. I’d love to hear your thoughts or any feedback you might have, and I truly appreciate your interest and consideration.