Guest Tracker App
The Guest Tracker app is a mobile app used by brand ambassadors to check in guests into company events, accommodations, and transportation, allowing event organizers to report on detailed event metrics for their clients and provide a unique, concierge service for their guests. My role was to redesign the guest check-in progress bar and how users accessed the boarding details to provide for a more intuitive guest check-in experience.
4-ish days, January 2018
Redesign the progress bar and guest counter at the bottom of the vehicle screen to show:
• Total number of guests who have been scanned on to the transportation, which may consist of multiple vehicles
• Total number of expected guests for this transport
• Total number of guests who have been scanned on to this specific vehicle.
• Total number of unexpected guests who have been scanned on to this specific vehicle (Let’s
say there are 2 Unexpected guests on board)
Additionally, create a more intuitive way to access a boarding details screen that shows every guest that’s currently on board (currently accessed by tapping on the progress bar).
UX Methods Used
Design Tools Used
Sketch (high-fidelity wireframes)
Pen & Paper (low fidelity wireframes)
After a recent redesign of the guest tracker app, GMR Marketing received feedback that the Transport check-in screen was a bit confusing. This screen is used to scan ID badges while guests are boarding on to a Transport.
Transports are scheduled private rides for event guests that can consist of multiple vehicles. For instance, one Transport could be one large bus or three medium-sized vans. Since Transports are always scheduled ahead of time, there is always an expected guest list for them. When brand ambassadors scan someone on board, they check to make sure that person is on their guest list. If they aren’t, the brand ambassador can decide to still allow them on board, but that guest needs to be flagged as ‘Unexpected’ and counted against the Transport's overall capacity.
User feedback indicated the check-in counter at the bottom of the screen wasn’t very intuitive. While brand ambassadors liked the general progress bar, they wanted to see exactly how many guests were checked into their specific vehicle, and how many unexpected guests were on board as well. It was also identified that tapping on the progress bar to show more details about who was checked-in to the Transport was not an intuitive experience either. My job was to use this feedback to redesign these elements to help brand ambassadors achieve their goals.
Improve the guest check-in experience by redesigning the progress bar. Inform brand ambassadors of how many people have checked-in, with respect to the list of expected guests, overall vehicle transport capacity, number of expected and unexpected guests onboard, as well as how many of each are in a specific vehicle.
Additionally, make it easier for brand ambassadors to access the boarding details.
When I first dove into this design challenge, it quickly became apparent that redesigning the progress bar would not be a straightforward task. The user needs were to communicate four variables: the number of people checked-in a specific vehicle, the number unexpected guests checked-in a specific vehicle, the total number of people checked-in to the Transport, and the total number of expected guests for the Transport. Identifying how exactly to efficiently display these metrics was difficult.
Part of what contributed to this difficulty was a lack of clarity surrounding the scope of the redesign. It was not clear if other elements on the page, such as the scanning indicator, last scanned guest, date, and itinerary could be redesigned or resized to better accommodate the new information users wanted displayed, or if I could only tinker with the progress bar. It was necessary for me to follow-up with GMR Marketing to get answers to these questions and identify any other technical constraints before settling upon a solution.
I began tackling this design challenge by dissecting the provided instructions, listing out the user goals, pain points, and design requirements. I also sketched out a simple user journey and site map to visualize how users were moving through the Guest Tracker app and how the screens fit into the larger application. This helped me affirm what work needed to be done, and how we would measure success.
Through this, I determined that brand ambassadors were ultimately trying to get answers to the following questions while using the Guest Tracker app:
Identifying these questions helped create the framework for my design, and were my guiding force as I began devising solutions.
I was eager to begin sketching -- but before I did, I googled around for similar, guest check-in apps. Seeing how designers before me had tackled this problem provided some a general direction for where to start.
One thing that immediately jumped out at me was how most apps tended to organize this information in a table. It made sense. This was an easy way to organize and view all the variables affecting the answers to the brand ambassador's questions.
This made me wonder if perhaps it wasn't the progress bar, specifically, that the brand ambassadors liked -- but rather the quick summary of how the Transport was filling up. I started thinking of ways I could better display the information brand ambassadors craved -- not necessarily with a progress bar.
I began sketching out the different ways the vehicle and Transport information could be displayed. I did quite a few iterations at this phase in the design process, building on each previous sketch to identify the most viable solutions.
Rethinking the Progress Bar
As I sketched, I quickly began finding issues with the progress bar. The current progress bar was displaying the total number of people checked-in against the total number of expected guests. While this was a nice visual point-of-reference for how the transport was filling up, it didn't seem all that useful. Displaying the total number of check-ins against the number of expected guests doesn't inform the user how many expected guests are on board relative to the number on the guest list, and risks misleading the user into thinking they've checked everyone in from the guest list, when in reality some of those people are unexpected guests. I knew that if we really wanted to help the brand ambassadors, we would need to break out total check-ins by expected and unexpected guests, and how many spots were available for each.
This meant displaying the vehicle capacity and overall transport capacity would be a necessity. Otherwise, how would brand ambassadors know how many seats they had available for unexpected guests? How would they know when a given vehicle was near or at capacity? I began incorporating these metrics into my design.
As I sketched out ideas, I also began questioning if there were any technical constraints around how I could display the information. Can I redesign the whole screen or just the progress bar? Does the progress bar or screen have a fixed size, or can I make them bigger? Are there any limits to what metrics the app could display? Is this redesign happening in a vehicle-specific vacuum or will it need to accommodate other check-in scenarios, like hotels and events as well? Are there any other technical constraints I need to be aware of?
I reached out to GMR Marketing to get some clarity on these issues. In the meantime, I assumed no immediate constraints aside from those already given.
Initial Design Concepts
After sketching out some ideas, it was clear there were more than a few ways to display the vehicle and Transport information, and no particular approach stood out as being "the best." I took three different approaches and mocked them up in Sketch, to visualize how they might actually look in the app. One without a progress bar, but with large check-in metrics; one with progress bars, broken out by vehicle, Transport, and guest type; and one that was a sort-of blend of the two, with an interesting tap/slide up interaction to navigate to the Transport information.
I initially designed some of these to be a bit longer than the original vehicle screen's 1080x1920 size. Midway through creating these, however, GMR Marketing responded to my technical constraint inquiries and recommended keeping the original size.
To accommodate this, I reduced the padding on some elements of the original and made the scanning indicator (arguably the most flexible of the design elements when it came to size) a little bit smaller. While scanning guests in to the Transport was the app's main function, the larger value of the app came from providing guests with quality service and understanding the transportation or event metrics. Brand ambassadors seemed most likely to provide this when the information they needed was readily accessible, and the size of the scanning indicator seemed less apt to impact this. As such, I felt I had enough reason to move forward with this potentially controversial decision.
My first design was inspired by the tables I had seen in the other check-in apps, coupled with the knowledge that brand ambassadors liked to be able to quickly look see who was checked-in. So, I laid out in the information in a table-like format, but with large numbers and labels for better scannability.
My second design played it more safe, keeping the well-liked progress bar concept, but expanding upon it to break down check-in information by vehicle, Transport, and guest type. The scanning indicator was a little bit bigger here, but at the expense of having a less-intuitive way to access the check-in details (again, tapping on the progress bar -- but this time I made "Transport" and "80 of 90" hyperlinks to provide an additional affordance that tapping the area will provide additional information).
My third design tried to blend the previous two while trying to stay truer to the original vehicle screen. The main differentiator with this one was you could tap the arrow or slide up the progress bar to reveal more detailed information about the vehicle and transport. My thought was you could still scan guests in while this progress bar was expanded, providing an alternative overlay for the vehicle screen that provided more high-level information about the Transport while guests were being checked-in.
Getting User Feedback
Uncertain of which direction to proceed with, I reached out to potential end-users to get their thoughts on which approach was best. Through social media I was able to connect with five individuals who had experience in event organizing or checkings guests into events.
Testing the Designs
With no sufficient time to schedule moderated user testing with these individuals, I settled for the less-than-ideal approach of gaining feedback via Facebook Messenger.
I sent each of them a message, providing appropriate context for the screens they were about to see, then asked them to imagine themselves using the app to check-in guests to a Transport they had organized. "Which design, or part of a design," I asked, "would best help you answer the following questions:"
I sent the messages out on Sunday afternoon and had collected feedback from the five prospective users Monday night.
Overwhelmingly, 5/5 preferred the progress bars approach of design #2. Everyone felt that provided the easiest way to see how many people were in the vehicle, transport, and the breakdown of expected vs. unexpected guests checked-in. Here's what some of them said:
I loved this moment in the design process, not just because it provided a clear indication of which design path to take, but because the feedback flew so hard in the face of my progress bar hypothesis. It underscores the importance of testing and validating assumptions before making decisions.
While I was pleased that design #2 was the clear path forward, I wasn't as excited about the fact that this design had the least intuitive means of accessing the Transport check-in details. The affordances were few and far between -- and unfortunately, people's comprehension of this design convention was not something I had tested in the first round of user feedback.
Because of how unintuitive the original design approach was for Guest Tracker users (tapping the progress bar), I wasn't confident a couple underlines were going to make this carbon copy approach any better. As a result, I opted to add in the button used in design #1. This made the scanning indicator small again but left nothing up to chance with regard to ensuring people could figure out how to get to the details screen.
I also made a few text adjustments, based on user feedback, to better communicate what the progress bars were showing.
With more time, I would have liked to do another round of user testing to validate this decision and identify other areas for improvement. I'm also curious what impact shrinking the scanning indicator has on the overall experience. But, given the time I did have available, I'm pleased with the solution we delivered. It achieves the desired goals of making the progress bar(s) more intuitive, informative, and brings forward a previously hidden interaction. Based on the feedback received, I'm confident brand ambassadors will better perform their jobs with the assistance of this redesigned screen.
What I Learned