San Miguel
UX Design
Beermen
Project Overview
To develop a comprehensive mobile application and website that enhances the relationship between the San Miguel Beermen and their fans worldwide. The platform will provide fans with access to game highlights, detailed statistics, merchandise, and ticket purchasing, fostering a deeper connection to the team.
Sitemap
After Usability Study
After Usability Study screenshot of ticket screen, add to cart confirmation, and purchase confirmation
Iphone 14s with Team roster displayed
The Problem
The San Miguel Beermen, the most successful team in the Philippine Basketball Association, is facing issues with fan engagement and brand representation. Despite their success on the court, the team’s digital presence and user experience are perceived as dull and unengaging. This has led to fans feeling disconnected from the team and its star players.
The Goal
Revitalize the San Miguel Beermen's digital presence to enhance fan engagement, strengthen brand representation, and deepen the connection between the team and its supporters.
My Role
Lead UX Designer, UX Researcher, Visual Designer, Graphic Designer
Responsibilities
Conducting Interviews, Paper Digital wireframing, low and high-fidelity prototyping, conducting usability studies, and iterating on designs.
Research Summary
I conducted users interviews with basketball fans, which I then turned into empathy maps to better understand the consumer needs as well as identify pain points with the existing San Miguel Beermen app. The research highlights significant gaps in the San Miguel Beermen’s current digital strategy that affect fan engagement and brand representation. By addressing these issues through a new and improved app and website, the team can enhance the overall fan experience, increase brand loyalty, and capitalize on new revenue opportunities
Maria's User Journey Map
By creating user journey maps, I wanted to document the process of how Jessica interacts with the app. This includes documenting how she behaves, feels, and what she thinks while accomplishing her goals to address paint points.

Low-Fidelity Prototype
The first user flow emphasizes a user's ticket checkout process.
Usability Parameters
Study Type: Unmoderated and moderated usability study.
Location: Remote
Participants: 5 Participants
Length: 20-30 Minutes
Pattern Observation
Observation 1: 4 out of 5 users would like a diagram of the arena so they can see the section of the arena they are sitting in.

Observation 2: 3 out of 5 users were not sure if they completed their purchase.

Observation 3: All 5 users would like to access their tickets through the app.

Observation 4: 4 out of 5 users said that the size selection buttons were too small.
Mockups and Insights
Based on the theme that customers were apprehensive on purchasing tickets due to the ambiguity of the seats, an insight is: Users need a seating diagram of all the section of the arena prior to purchasing tickets

Based on the theme of purchasing merchandise: Users need a confirmation once the item is added to cart as well as a confirmation once they have completed their purchase.
Before Usability Study
Before Usability Study screenshot
Accessibility Considerations
Headings: I used headings with different sized text in order to establish visual hierarchy

High Contrast: I used a high contrast color palette in order for users to better distinguish visual elements. In addition, I created hover and on press animations in order to allow the user to identify where they are within the app and what they have selected.
High-fidelity Prototype
I included new screens to the high-fidelity prototype that I discovered in my initial usability tests.
Takeaways
Impact: Our target users feel more engaged. The San Miguel Beermen as a product is transparent and easier to access.

What I learned: I learned to address issues related to fan engagement and brand representation, finding innovative solutions to enhance the digital experience.
I needed adapt to feedback and made iterative improvements to ensure the app's success.
Next Steps
I would like to incorporate social media platforms. It would be a great way for fans and players to connect. It would allow each player to promote themselves under the umbrella of the San Miguel Beermen.
Paper Wireframes
I sketched out paper wireframes for each screen in my app, keeping the user pain points in mind about player recognition, ticket availability, and the latest news


Wireframes for Home page
Wireframe for team roster
Maria Santos
Maria is a passionate basketball fan and a dedicated supporter of the San Miguel Beermen. She grew up watching basketball with her family and has been a loyal fan of the team for over a decade. Maria works as a marketing manager in a bustling firm in Manila and is tech-savvy, frequently using her smartphone and laptop for both work and leisure. She enjoys attending live games whenever possible and keeps up with team news through social media and sports websites.
Maria's Problem
She finds it difficult to access engaging content, including game highlights and exclusive features of star players, and faces challenges in purchasing official merchandise online. Additionally, she misses out on timely notifications about games and special promotions.
Frustrations
  • Difficulty finding up-to-date information about the team and games.
  • Limited access to highlights and exclusive content featuring star players.
  • Lack of an official online store to purchase merchandise.
  • The current digital platforms feel outdated and unengaging.
  • Missing out on game notifications and special offers.
Goals
  • Stay updated with the latest team news, game schedules, and player stats.
  • Feel connected to the team and its star players.
  • Purchase official team merchandise easily.
  • Engage with other fans and share her passion for the team.
  • Receive notifications about upcoming games and exclusive promotions.
Image of sticky notes that are categorized by types of pain points
User Research Pain Points
Lack of Star Player Prioritization: The team’s star players are not being highlighted effectively, leaving the brand underrepresented.

IMerchandise Availability: There is no online shop for fans to purchase team merchandise, limiting their ability to feel immersed in the team experience.
Fan Awareness: Fans are not well-informed about the current roster of players and upcoming game schedules.


create your own happiness
Let's work together
Made on
Tilda