UX/UI DESIGN / RESEARCH / CAPSTONE PROJECT

birdbeak

Improving the Hall H Line Experience at San Diego Comic-Con
birdbeak is a social media app that helps Comic-Con attendees make informed decisions before committing to a huge time investment like the Hall H line. In addition to the app providing live updates about the venue and line, the social media component facilitates communication between Comic-Con staff and attendees. It can also give people personalized recommendations on other panels to attend during the day while friends save their spots in line, or if they decide to skip Hall H altogether.
Skip to the High-Fidelity Prototype
Role
UX Researcher and Designer
(User Research, Wireframing, UI Design, Interaction Design, Branding, Prototyping, Usability Testing)
Duration
4 months
Tools
Sketch
Miro
Marvel
InVision

Introduction

Problem
Every year, more than 100,000 people flock to San Diego Comic-Con to attend panels and events related to their favorite movies, TV shows, and comic books. Hall H is the convention’s largest and most popular venue, but with a capacity of only 6,500, people must wait hours in line in order to get a chance at gaining entry.
Goal
Design a tool that makes it easier for people to determine their likelihood of gaining entry into Hall H and reduce the amount of time they wait in line.

Research

1. Secondary Research: How do people currently line up for Hall H?
I conducted secondary research to better understand the rules and lining-up process for Hall H.

Since 2014, Comic-Con has used a wristband system to help manage the line. Wristbands are given out the night before panels take place to the first 6,500 people in line. Once they receive a wristband, people can choose to stay in line or leave, but those who leave must be back by 7:30am the next morning. If they don’t make it back in time, they have to go to the very end of the Hall H line. People who did not get a wristband and stayed in line overnight then have a chance to enter Hall H in their place.
This information helped form my main research objectives:
  1. Identify the strengths and weaknesses of the current wristband system for managing the Hall H line
  2. Find solutions to improve the experience of waiting in line for entry
2. User Interviews
I conducted 5 remote user interviews with people who had experience waiting in the Hall H line in order to learn their thoughts about the wristband system and to understand their behaviors when lining up for Hall H.

Synthesis

1. Affinity Mapping
Affinity mapping allowed me to find themes or trends in what the participants said in the interviews. I wrote down key observations, searched for patterns, and then grouped together related observations into different themes that would help me with my research objectives.
Key Observations
  1. All participants viewed the wristband system positively because having a wristband reassures attendees that they’ll get into Hall H
  2. The majority of participants identified the following pain points:
    • Line cutting
    • People allowing too many of their friends to join them in line
  3. All participants use their smartphones for Hall H line updates and finding alternative things to do using Twitter and the Official Comic-Con app
2. User Personas: Who's lining up for Hall H?
I created personas to represent the two types of people lining up for Hall H so that I could remind myself of the target users during the design process.

Design Process: Finding a Solution

User Stories: How can the Hall H Line experience be improved?
Once my target users were identified, it was time to narrow down which features aligned with the users’ main needs.
Ranking user stories helped me determine the following:

Make finding information about Hall H and the Hall H line easier.
A social media app would provide the most benefits because it could both facilitate communication and give live updates about Hall H.

Reduce time spent in line by recommending panels to attend during the day, or as a backup plan.
Provide users with recommendations for other panels they might be interested in attending, in case they want to attend panels during the day while someone holds their spot in line, or if they decide not to line up for Hall H.

Sketching

Setting Up the Structure
User flows helped me determine critical paths within the app that users would follow to achieve specific goals.
Using my critical user flows as a guide, I sketched out ideas about what screens would look like so that I could create a low-fidelity prototype and get feedback.
I started sketching a straightforward onboarding flow that would help users create a profile and then ask what their interests are.
After making their selections, a recommendations page would appear with panels that they might want to attend. Then when they navigated to the home page, they would see a social feed about Hall H and have the ability to create posts.
Incorporating Feedback from Guerilla Usability Testing
When I conducted guerilla usability testing with these sketches, all of the participants were able to get through onboarding without a problem, but they had problems figuring out how to create a post. The Post Something section was separated from the social media posts, and the Panel Recommendations section took most of the focus away from it.

High-Fidelity Prototype

Results from Testing the Prototype
I created a high-fidelity prototype and conducted moderated usability tests with people who have been to Comic-Con or have an interest in attending. Testing would help determine if people could easily navigate the app and find important features. I was also interested in finding out how people would engage with the social media component of the app.

Conducting usability tests proved valuable because I learned how people engaged with the app:

Information directly from the app is preferred.
Users are not always turning to social media posts to find information about the Hall H line. Instead, they look for information from the app directly.
Consume information first, then create a post. Users are interested in connecting with other attendees. They will browse posts to see if anyone makes an interesting comment before deciding to create a post of their own. The app should make it easy to read posts while still enabling the user to create a post.
Easy navigation from every screen is important. The lack of a bottom navigation bar on the Recommendations page confused users. While the initial purpose was to encourage users to browse their panel recommendations, it became clear that they needed a convenient way to navigate around the app if they weren’t interested in looking at panels or the social feed in the homepage.
The panel schedule should be more visible. Users mentioned that the panel schedule should be easily accessed at all times and not hidden away at the bottom of a screen or in a menu. By placing a Schedule button in the bottom navigation bar, the user can easily find it.

Conclusion

birdbeak makes it easier for people to determine their likelihood of gaining entry into Hall H and reduce time spent in line because it decreases time spent looking for information online. It provides live updates about Hall H and facilitates communication between Comic-Con staff and attendees.

It also provides panel recommendations and an easily accessible panel schedule so that people can discover panels to attend while their spots are being saved in line, or as a backup in case they decide not to line up for Hall H.
Lessons Learned
If I were to continue with this project, I would love to further develop the prototype and test it with people at San Diego Comic-Con. I would specifically like to learn how the social feeds and the panel recommendations feature affects their Comic-Con experience.

Other Projects

IntroductionResearchDesign ProcessUI DesignUsability TestingConclusion