ROLE
UI/UX Designer and Research
TOOLS
Figma, HTML, CSS, JS
MEDIUM
Digital Mobile App
STATUS
Class Project
YEAR
2024
PROJECT GOAL
Provide students with ideal study spot locations in an efficient, time saving manner using UI/UX research and design tools.
PROJECT OVERVIEW
Formula 1 is the pinnacle of motor racing, attracting millions of passionate fans worldwide. For many sports enthusiasts, attending a live race is a dream come true. However, the high costs associated with this prestigious sport often pose a barrier for the average fan. Despite this, the allure of Formula 1 continues to draw fans in.
PROBLEM STATEMENT
F1 fans face significant challenges in choosing the best tickets for a race. With 24 events to pick from and seating options encircling each track, they must decide where to sit while sifting through conflicting advice from various sources and platforms, each promoting their seats as ideal. This overwhelming array of choices and lack of reliable guidance makes ticket selection difficult.
POTENTIAL SOLUTION
A mobile app that consolidates essential information will streamline the decision-making process for fans. By addressing users’ distrust of ticketing website reviews, often outdated, biased, or irrelevant, the app will offer a community-driven review forum. Users can set personal preferences to view only tickets that meet their criteria, further reducing browsing time.
What Do Users Currently Do?
To understand our users' current pain points, I asked various Formula 1 fans to walk me through their process of purchasing a race ticket. Here is the summarized and most commonly followed pathway.
Typical user experience purchasing a ticket
1. Select a Race
Of the 24 races in the season calendar, users must first determine which race they wish to attend.
Why is this a problem?
Users face a 1-in-24 choice with multiple factors, slowing their decision-making from the start.
2. Select Grandstand Location
Upon selecting a race, they then must decide where on the track they wish to view the race...but how do they decide that?
Why is this a problem?
Users must decide where on the track to view the race, influenced by their priorities and desired experience, with over 20 grandstands to choose from on a single track.
3. Search for online reviews and photos
.jpg)
Users looked to sites such as Reddit, YouTube, and Google for photos, other fans' reviews, and videos to help them decide.
Why is this a problem?
The process is time-consuming, as users must gather more information about each seat. If unsatisfied with the details or reviews, they must repeat the process for another seat.
4. Purchase Ticket
After finding a seat, users must visit the host country's commonly used ticketing site to buy the ticket.
Why is this a problem?
Some sites are not language-friendly, and their UI can be challenging for non-native users to navigate.
Framing the Problem
Upon seeing how users are currently navigating this issue, I broke down this process into statements to better develop the problem statement.
How Might We...
provide a place F1 fans with clear and easily accessible information about seat tickets to help them with their decision making process for the best seats according to their preferences.
Jobs To Be Done (JTBD)
When I go to buy an F1 ticket, I don’t know which seats are worth it, help me make searching for this information easy and accessible, so I can choose the best seats with my values/budget in mind to enjoy the race!
Information Architecture
To understand how to efficiently gather and present information, I proceeded to outline the Golden User Journey, then how users will be able to navigate key features through the navigation layout.
Golden User Journey
Home Page and Navigation Flow
Wireframes
I started the design process off with Crazy 8 Sketches. Since this was part of a class, other class members were able to vote on the best sketches that they thought were best communicated. I was not allowed to discuss my sketch ideas, just the end goal solution. This method helped communicate which ideas were clearly intuitive for the solution, but also successful in aligning with the end goal.
Upon receiving feedback, I started designing the low fidelity prototype, and fine tuning with the professor and outside feedback over the following four weeks, developing the high fidelity prototype, ready for user testing.
Video Walkthrough
Here is the full walkthrough of what a first time user would experience. [About 1 min]. Originally designed and animated on Figma, I then coded this out as an HTML/CSS/JS file to practice front-end development skills.
User Testing
Methodology
Observe users completing a series of tasks and ask follow up questions. I requested users to talk through their thought process and talk out loud to see their reactions as well.
Tasks
Observe users completing a series of tasks and ask follow up questions. I requested users to talk through their thought process and talk out loud to see their reactions as well.
Onboarding Set Up
Set up their preferences in the initial onboarding.
Save 2 Tickets
Save two seats users would be interested in purchasing.
Like a Review
Like a review that users found helpful for the seats they are interested in.
Find Price Drops
Locate and identify price changes.
Edit Preferences
To track preference changes, users were asked to visit this page and make updates.
Find an FAQ
Locate the Frequently Asked Questions page, and find the answer to a specific FAQ.
Submit a FAQ
Submit a question they did not find in the FAQ.
Purchase a Ticket
Purchase a ticket under their saved tickets.
Verbal Questions
The follow-up questions quantified qualitative data by asking users to rate elements on a 1-to-5 scale.
Results and Insights
Here is a quick overview of the testing results and conclusions drawn from the user testing.
Learnings & Next Steps
This project enhanced my understanding of user flows, highlighting how individuals connect different pieces of information to navigate efficiently. Through user testing, I observed firsthand how users interact with prototypes, uncovering their priorities and identifying areas for improvement. These insights proved invaluable in designing for diverse audiences and ensuring the app was both functional and user-friendly.
Working with a generous timeline but limited resources taught me to prioritize essential features, focusing on key elements to create an appealing and effective app. Additionally, I learned that failure often provides the most valuable lessons. By analyzing why certain aspects didn’t work as expected, I gained a deeper understanding of user behavior, enabling me to make more informed and thoughtful design decisions.
