MLB BALLPARK FENWAY APP
adding a new feature for fans
OVERVIEW
In this concept, MLB wants to leverage their current mobile app to give game attendees tools to better discover everything the ballpark has to offer and to simplify the processes of finding and purchasing concessions and merchandise.
In a team of three, I focused on crafting the team and project plan that we would use to stay on task during the timeline. I dove in to the research with user interviews, contextual inquiry and competitive analysis. The team came together for the synthesis to discover the "I statements". We sketched independently then converged to produce the best design of the app feature before we began digitizing our wireframes.
The digital prototype was built using the layout, color scheme and font used within the existing MLB app.
TIMELINE
2 weeks
TOOLS
Sketch, Invision,
Card Sort, Affinity Mapping, Sketching, Wireframing, Prototyping
ROLE
Project lead on a team of 3 worked through each phase of research, synthesis, design and testing
PROBLEM STATEMENT
Fenway park attendees need a way to conveniently find and buy concessions and merchandise because it’s difficult to locate all the options available.
SOLUTION STATEMENT
We believe that by creating a feature in the MLB app for browsing and purchasing merchandise and concessions. We will facilitate a more enjoyable ballgame experience through the app.
We’ll know this to be true when we see increased usage of this feature within the app.
USER RESEARCH
To get started, we developed a screening questionnaire yielding 15 responses allowing us to complete a total of 5 user interviews.
I complete 2 of the 5 user interviews the group conducted. In one interview, I did a contextual inquiry with a current user of the MLB Ballpark App. I saw firsthand how our user uses the MLB app, hearing and seeing what features they use and what they never explore.
I also did a competitive analysis of the Coachella app focusing on what features for food/merchandise was available to the festival attendees as we believed they most closely related to the functions we were looking to solve.
APP MAP
The app is robust and full of many features! We had a difficult challenge of identifying where this new feature would exist and how would it solve the need of our users.
I laid out the app map portions focusing on the ticket, membership, and journal features while my teammate completed the ballpark portion.
We discovered there was a concession feature on the app but lo and behold we couldn't find it on the app map. This led us to the upfront placement of the concessions & merchandise feature.
Our feature lives in the Ballpark side and would sit directly under the Ticketing Section.
SYNTHESIS
I wrote out my key findings from my interview and contextual inquiry on individual post-its and we affinity mapped as a team to pull together our findings.
This allowed us to identify the "I statements":
-
I seek to enjoy the experience at Fenway
-
I want options as I search for concessions
-
I want to avoid long lines and missing parts of the game
-
I'm unsure what's around my seat for concession/merchandise options
From the interviews, we found the biggest pain point is long lines for our users. They are seeking to enjoy the game at Fenway and don't want to waste time wandering around looking for something to eat.
If they're purchasing merchandise, location is less important from their seat but using the map icon would benefit them if they aren't as familiar with Fenway Park.
These findings, led us down the road to focus on solving the users needs for finding and ordering concessions and merchandise.
PERSONAS
During affinity mapping, we identified two user personas as we saw two themes reoccurring:
-
Primary: Die Hard Baseball Fan
-
Secondary: Experience Seeker
Both of these users will use technology easily, enjoy attending games at Fenway Park but focus on different feelings while they're at the park. We elected to solve both their needs of finding and ordering concessions and merchandise in Fenway Park. Because both users disliked long lines we knew that the feature would be able to solve both their main pain point.
DESIGN
Post analysis, we had our solution in mind and sketched independently. We followed a double-diamond method in order to use all our sketches to find the best ones and create that. During this phase we collaborated together to find the best sketches where we would proceed to paper prototyping prior to digitizing.
We divided up the screens to build out to maximize our time - our first user flow would focus on the concessions and merchandise was secondary. I sketched the merchandise path and built out those digital wireframes in Sketch.
We worked with our designs first in Sketch then Invision to add the animations following our user flow. Sketch cloud allowed us to collaborate on the screens we were designing.
USABILITY TESTING
I wrote the testing script, scenario and tasks that we used during both rounds of usability testing. Our scenario included both personas while talking about how the user was attending a game at Fenway, they were getting hungry but they didn't want to leave their seat to go look for food.
We tested:
-
the function of the app
-
how the filters would work
-
We also highlighted the ability to filter for dietary restrictions to show what the user could do
I completed two of the five user tests where I was able to understand the flow we had designed wasn't the easiest for our secondary target user to get through without making errors.
FILTER BAR ITERATIONS
Major Feedback about the filter bar:
-
Users struggled to find them
-
the delivery/pick-up selection/radio button caused confusion
-
Users weren't able to tell what filters to select
-
During later testing the text color was confusing
Based on the feedback,
-
New Headers were added to aid navigation in process
-
The pick-up /delivery options filter was updated by testing the color of text and the size of the font
-
Breadcrumbs after user selects the filter in order to reduce confusion in process
CHECKOUT PAGE ITERATIONS
Feedback about the checkout pages focused on small and easy to improve items:
-
Confusion on a button 'apply' had users asking about promotions
-
The Payment/Order information was out of order for some users
-
Users weren't able to read some of the text
Based on that feedback, the changes to the designs were:
-
Removing the 'apply' button as it caused confusion among the first testing round
-
Adjusting the order/payment information to reduce confusion
-
Darkening the text in the Payment Box so Users could easily read it
We took inspiration from existing food ordering apps to maintain consistency that users may previously be comfortable using as well as established design patterns.
Lessons Learned
-
Having a style guide created earlier in the design process would have been essential as the team designed different screens to prevent any major design changes to be made
-
Schedule more time for usability tests
Next Steps
-
Add new filtering options/restaurants flow paths
-
Adjusting coloring within filter to differentiate more
-
Add nutritional information to food options
-
Look to add more animations in cart