Guest Tracker App

Design FInal Header Image

Project Overview

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.

Timeframe

4-ish days, January 2018

Client

GMR Marketing

Tasks

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).

Platform

Mobile

UX Methods Used

Ideation
Sketching
Competitive Analysis

Wireframing
A/B Testing
Hi-Fi Mockups

Design Tools Used

Sketch (high-fidelity wireframes)
Pen & Paper (low fidelity wireframes)

Define

Introduction

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.

The Opportunity

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.

The Challenge

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.

Discover

Ideation

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.

20180205_205157

Through this, I determined that brand ambassadors were ultimately trying to get answers to the following questions while using the Guest Tracker app:

  • How many guests are we expecting for this Transport?
  • How many people are in this vehicle?
  • How many unexpected guests are on board?
  • How many total people have checked-in to the Transport?

Identifying these questions helped create the framework for my design, and were my guiding force as I began devising solutions.

Market Research

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.

Market Analysis


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.

Sketching

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.

20180205_203845
20180205_205136

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.

Technical Constraints?

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.

Design

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.

Design 1

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. 

Design 2

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).

Design 3

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.

Screen Shot 2018-02-05 at 8.49.36 PM

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:"

  • How many guests are we expecting on the transport?
  • How many people are in this vehicle?
  • How many unexpected guests are on board?
  • How many total people have checked-in to the Transport?

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:

  • "Design #2 is by far the best one, bar none. The colors pop. It's the easiest way to see who's in vehicle and transport."
  • "[Design #2] gives me the information I need without being overwhelming or seeming like "too much" data.  Sometimes business put too many numbers in front of your face when in reality, you truly only care about a few (even though all numbers are important)."
  • "I like the visual indicator from [Design #2] that shows capacity"

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.

Final Touches

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. 

Design Final

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

  • Taking the time early on to do a few google searches of similar types of apps helped quickly generate potential solutions. This exercise arguably saved time in the long-run by reducing the amount of time that would have otherwise been spent "feeling around in the dark" for solutions during the sketching phase.

  • Early in the design process, my analysis and market research led me to believe perhaps the progress bar wasn't a necessity. Gaining some brief user feedback, however, proved the opposite to be true. This underscored the importance of gaining user feedback during the design process, and not relying on unvalidated assumptions.

  • Knowing from the get-go that I wanted to get user feedback helped me budget the time I spent on sketching, creating mockups, and documentation. This kept me grounded as I designed, stopping me from going down the rabbit hole of trying to make a design perfect. Settling for "good enough," getting feedback, and iterating ultimately led to identifying an effective solution more quickly than if I had tried to waterfall a pixel-perfect screen. 

  • Overall, the design challenge was a welcomed change of pace from the bureaucratic approach I've been used to at my current job. Being able to dive in and quickly move through the design process, without having to adhere to a slow, formalized process, was invigorating and reminded me how fun designing can be.

Selected Works

Vision Care InfoUX Design

MyREIUX Design

Guest TrackerUX Design