Design Problem
Build an experience to get users to buy tickets and attend the Washington Wizards game night on Oct 31, 2016
User Research
Both male and female are likely to attend the game in equal numbers. Majority of attendees will be from DC and nearby areas.
Who are the users?
I interpolated the users of this website by getting the census data of Washington DC.
13% people between the ages of 18-24 years and 
22% people between the ages of 25 to 34 years
I investigated the prospect of getting demographics data by looking at the twitter followers of Washington Wizards, but I was unable to do so as most of the tools were paid and I did not have any budget assigned for this project.

Target users are relatively younger people
and have a high probability of owning a smartphone with access to the Internet
1. Provide Google cards in Google search results and the ability to purchase a ticket using Android Pay or Apple Pay from the card. This may also include the functionality to enter credit card information. I didn't pursue this idea because Google cards don't have the ability to have input fields as of this writing. Also, even with this user flow, we will need to maintain a website as users might come from different channels such as social media or ad clicks. This would have resulted in higher costs of business
2. An Augmented Reality game that involves people shooting a virtual basketball into a virtual basket hanging in mid-air. This would result in increased engagement and sales, but I did not pursue this idea as it would have resulted in high development costs not justifiable for one game.
3. Finally, I decided to enhance the existing mobile website as it is platform agnostic resulting in low development costs.
Problem Definition
Design a mobile first website that can run on both Android and iOS.

User tasks
Select the seats
Fill payment information
Add to Calendar

Business Goal
Maximum number of users to sign up for the WW game
Create the UX experience with minimum cost

User Goal
Buy the WW game tickets in as few clicks as possible
Design Iteration 1
1. Mobile First Website
2. Easy access to information - Venue and Time are essential for professionals as they can only visit the game during off hours. So make this information very easy to find.
3. Digital Calendar - Ability to add the event to the calendar as professionals rely excessively on digital calendars.

User flow
Balsamiq Wireframes
(a) Landing Page (b) Choose seats with a price filter
(c) Ticket Confirmation (d) Mark event in calendar
Design Iteration 2
I realized that it is tough to make an informed decision about the seat that you do want to buy on a mobile screen due to following reasons:
Clicking on the seat is harder because of limited real estate of the smartphone
Users do not have an idea of what the view of the game would be like from the seat that they are buying
I decided to investigate the idea of being able to experience the stadium using your smartphone. I considered the idea of using Virtual Reality where users can interact with a full-scale model of the stadium and observe the view from the seat that they want to buy. But since VR headsets were not widespread at the time, it will not improve the experience of a significant number of people.
I investigated the idea of looking at a 3D model of the stadium using your smartphone's orientation to look around. The user would also need to move around in the stadium to look at the view from different seats. I considered creating a movement system used in games to walk around an environment, but it would have been too slow for users to move around the whole stadium. So I came up with the idea of teleporting to the front of the seat that the user wants to observe the view from.

I created this prototype in Unity using C# and Cg for custom shaders. I highlighted the seat that the user was looking at using a raycast from the center of the screen into the environment. For the purposes of the prototype, the teleport action was mapped to a mouse click. If this was running on a mobile device, the action would correspond to a tap using the touchscreen.
(a) The seat closest to the center of the mobile screen gets highlighted. (b) User could teleport to the front of the highlighted seat by tapping on the touch screen
This idea had the following problems:
Teleporting to seats far away from you was difficult because the target size of the seats became smaller the further away they were from the user.
Users had no way to observe all the seats in the stadium using a bird's eye view to get holistic information about seats available to make an informed decision. 
Design Iteration 3
I then investigated using 360-degree photos taken from a seat to experience the view of the stadium. This idea does have the disadvantage of high bandwidth requirements to stream a different 360 image for every seat the user chooses to visit. But I decided to investigate this idea further for intellectual purposes, less so than proposing this as a technically feasible solution.
360-degree view interaction
I used the 360-degree navigation interface used by Facebook. I used Origami to prototype the 360-degree photo navigation as it was the only tool that has this ability. The 360 navigation UI from one of the examples at the Origami website is very useful. Investigating the current UI for this project, the camera frustum icon representing where the user is looking is useful to orient the user in the 360 photo. The orientation was with respect the little nook at the top of the circle. This little nook represents the default orientation of the 360 photo. For the purposes of this project, the starting orientation of every 360 photo should be looking at the court.
I used a 360-degree camera capture rig Unity asset to create 360-degree photos for the interactive prototype.

360 rendering (Equirectangular) of the scene from Unity

Locomotion - minimap view
I started designing around how 360 photos can b incorporated in a phone and what will the interface look like. In this case, some interactive elements were driven by the constraints of the medium.
For example, people want to move among the seats to explore the 360 view from there.
  · Tapping on the chair to get there
  · Google street view like navigation
But ultimately, the previous methods were suitable for small-scale locomotion, not the locomotion required for a large scale stadium with 1000's of seats. So I came up with the idea of a mini-map covering the top one-third of the screen. Pan would move the user across the seats. To support navigation of large stadiums, I also included a tap to zoom and double tap to zoom out mechanism. A pinch to zoom in and out mechanism would have been harder to use with only a part of the screen occupying the minimap. Furthermore, the minimap also accomplishes the job of visually indicating sold, available and accessible seats to the user for better navigation.
I also investigated moving the visual icon of the user versus moving the map beneath it as the interaction paradigm. I settled on moving the map below the visual icon because of the larger touch target area of the map as compared to the smaller visual icon of the user. Another disadvantage of moving the visual icon of the user is that the user would not be able to see the seat of where they want to navigate to as their finger will cover it.
Furthermore, this UI is being used on a mobile device with an internet connection loading 360-degree photos of considerable size. I made a conscious decision not to load an image while the user is moving to move to a new position, but only when she is finished moving the visual icon of the user.
Price Scroll UI
Another essential component of the experience was the balance between great seats and price. Users would want the information about the price of the seat up front and in between the process of choosing a seat. I investigated multiple ideas for this considering that the screen space was very constrained.
· Using a cursor in the center of the screen space to ray cast into the 360-degree environment to select a seat and show its price as a part of the 360 photo.
· Clicking on a chair in the 360 view to select the price.
I tried prototyping these ideas using Unity, but they would require the users to stream a large 3D model over the network. It would also add a lot of technical complexity to the project of needing a standalone app that can render a 3D model and use ray casting to select the chair. Using a 360-degree photo instead keeps the technical complexity low and can easily be presented using a browser with minimal processing power on the user's device.
Users needed a way to select and filter seats based on price. I came up with a scrolling price filter that also acts as a locomotion mechanism to move you to the filtered seat. To keep the filtering simple, the filter range is fixed between the maximum and minimum price available seats and the user can scroll to select the price that they want to explore. I chose to not provide a range filter and instead give multiple records of the price if multiple seats have the same price. Conceptually this acts as a list of prices that you can browse the seats with. The scroll UI also has the advantage that the user can see other prices near the price that they are looking at. I made the background of the Price scroll UI translucent to maximize the view of the 360 photo.

Checkout UI
Users also needed a way to buy the multiple tickets. When the user clicked on "Buy ticket" they would add the ticket to the seat that they were viewing the 360 view from, the price scroll UI will indicate the price of the ticket and the position in the minimap will show them the overall position of the seat. The "Checkout" button has a red dot indicator at the top right with the number of tickets that are present in the cart.
I created the prototypes using Origami by Facebook.
Back to Top