Increasing Fanbase Engagement for WNBA.
Led team of 3 front-end developers, 3 data scientists, and 2 UX designers to create high fidelity MVP using Figma UI Design System for a mobile iOS app to improve user engagement. Prototype was tested for accessibility. Presented demo to senior WNBA executives and development team which resulted in WNBA incorporating majority of proposed features that are now part of their official app!
- Client WNBA
- Timeline 24 Hours
- Skills Figma, Miro, Agile Development
My Role
I worked as a Product Designer to lead a multidisciplinary software development team by coordinating front-end developers, data scientists, digital marketer, and UX designers while contributing on UX research and UI development for MVP prototype within 24 hour Hackathon. I was nominated because of previous front-end development experience, statistical background knowledge from finance that was relevant to data science, and digital marketing experience – that I became the point of contact for disciplines and managing the project.Â
Business Goals
WNBA executives have presented a business challenge :
- Increase Fan Engagement:Â How might the WNBA better leverage its ecosystem (fan data, marketing & media partnerships) to make engagement with the League more accessible? Measurements were created: average watch time, churn rate, AOQ
- Leverage Ecosystem: How can you imagine WNBA using what it knows about it’s fans (demographics, favorite team/player, etc.) while leveraging the marketing & media partnerships to increase fan engagement with the League?
UX Deliverables
Data Science Deliverables
Front-End Development Deliverables
Digital Marketing Deliverables
Design Process
I proposed a hybrid process between Design Thinking Framework and Google Sprint Framework supported by simple agile methodologies because of 24 hour time project limitation. Figma FigJam (Miro equivalent) was chosen as a collaboration tool. Also, during ideation Disney’s 3 Room ideation exercise was used.
Understand
Diverge
Decide
Prototype
Validate
Design Brief
This was the broad scope of design challenge presented by WNBA executives.
Increase Engagement
How might the WNBA better leverage its ecosystem to make engagement with the League more accessible?
The WNBA is the longest-running professional women’s sports league in the country with combined viewership in 2021 of 379k viewers among ESPN and CBS, 23.8 million page views on official website, and 10% growth in League Pass live game package subscribers.
WNBA Ecosystem
A network of partners that includes product managers who own WNBA Digital Portfolio, Developers for WNBA League Pass, Designers for WNBA.com website, Content Managers and Consultants
Fanbase Influencers
Changemakers, entrepreneurs, influencers and content creators who invest and inspire WNBA (Deloitte, Google, US Bank) and regional & national sport networks.
Project Setup
I created Fig Jam (similar to Miro) for our team. For some, it was the first time using the tool so we did an ice breaker by introducing ourselves using cards and choosing a team name. I introduced the philosophy of design and set up a Kanban Agile Board with lanes and WIP limits where each sticky note corresponded to department for keeping track of deliverables and transparency. During the meeting, we discussed limitations and technical scope within the deadline.
Understanding Problem
In order for everyone on the team to have a common understanding of the problem, I suggested to 30 minutes per specialized department to do secondary research and take 10 minutes to present insights to everyone. The Fig Jam collaboration board was a visual artifact that anyone could refer to, a visual space for common understanding of the problem. To support UX research, I examined 3 competing apps and relevant Neilsen reports.
Defining Problem Space
After each specialized department representative presented the research findings, I set a count down timer for everyone to go around individually to share the insights they found interesting as I marked those insights with stars. Several themes began to emerge. Furthermore, a How Might We statement was created to narrow down the addressable problem space.
Social Media Usage
Increase in engagement while consuming sports content
Crypto & Gambling
Cryptocurrency and sport related gambling growth
Digital Platforms
Increase in connectivity and growth in digital platforms
HMW improve experience of mobile WNBA app to make it engaging for Gen Z while increasing business value?
Creating Persona
To prepare for stage of ideation, I led the creation of a persona based on research insights to keep the user centricity focus during design and development process. The needs, desires, and goals of this user were referenced during the formulation of the prototype and a sanity check of making design decisions – making sure there is alignment to value brought to user.
Deciding MVP Features
After HMW statement, themes, and persona were developed, each specialized department took 20 minutes to generate solutions towards addressing the problems – the divergence phase of ideation. Afterwards, I facilitated discussion of sharing ideas and building upon them outside of departments. It was fascinating to observe how outside departments such as digital marketing had ideas for data analytics and visa versa. This cross pollination and improvement of ideas was positive. Then, during divergence phase I facilitated common critique of ideas where the best ideas were left. I then converted final solution ideas into MVP Features while keeping in mind requirements for big data analytics.
Low Fidelity Wireframes
Using the Minimal Viable Prototype (MVP) features, I led the development of low fidelity prototype sketches. I had to make sure to keep in mind the technical limitations and needs of data team during formulation of wireframes.
Design UI System
Figma UI Design system was created as a main source of information for front-end developers. I trained the front-end developers to extract CSS code attributes from FIGMA to expedite developer handoff. As UX team worked on producing hi-fi wireframes, front-end team had real time access to reference files.
Accessibility Check
To ensure adequate contrast between UI elements, I conducted WCAG accessibility check.
High Fidelity Prototype
High Fidelity Figma prototype was created as I coordinated with UX designers to stitch wireframes and add visual UI components using the design system. Meanwhile, front-end developers created a functioning prototype. I was the point of contact to explain interactions and design elements for front-end developers.
Presenting Design Process
I coordinated the development of presentation to make sure each specialized department was represented by a speaker from front-end development, data science, and digital marketing. As a UX design lead, I was responsible for presenting the FIGMA prototype to WNBA executives. The presentation was a success because the WNBA executives were blown away by many features developed while some claimed that several features were secretly being developed – which means that our design team was on the right path! The WNBA developers were impressed by the design system used during formulation of prototype since they began to incorporate such practice in-house with front end developers.
Features Adopted
This project was a success because many features are now integrated in official WNBA app.
WNBA Official App Wireframes (Before Proposal)
WNBA Official App Wireframes (After Proposal & Development)
Key Learnings
There were several key learnings after completion of this project.
Design Process
Adjust design process to essentials, especially when facing tight timeline or budget constraints. The value of UX for developers is tangible because the UX process minimizes development of time and avoid pursuit of flawed ideas.
Capacity to Lead
I learned that having a generalized understanding of each discipline was helpful in communicating with specialized team members while making sure that we were building a product that added benefits for the user and business value.
Segmentation
Agile methods of a simple Kanban board and segmentation were effective at combatting overwhelm. The front-end development team could not believe the quantity of features that were developed in such a short period of time and felt high achievement satisfaction.
Thank you for reading this far!
