Mock-Up High-Fi Prototype
Industry Project
24hr Hackathon
WNBA was the client for our industry day bootcamp project. Working in a team of 11, my role was in UX design and responsible for research, creating the persona, and designing solutions through sketching and high-fidelity wire-framing to address the client's problem space.
Problem
How might we help the WNBA better leverage its ecosystem (of fan data, marketing partners, and media partners) to make engagement with the League more accessible than ever before.
Solution
To increase existing and new fans to the WBNA by personalizing and creating engaging content about the players to create a deeper connection with existing and future fans. Our team focused on the mobile experience to make it more accessible for fans to engage and learn about the WNBA players.
Tools
Figma
Team
3 UX designers
3 developers
3 Data Scientists
1 Digital Marketer
1 project manager
My Role
UX Research
UX Design Solutions
Presenter for UX Design Content
Timeline
24 Hours
Our Design Process
Empathize
Research Users' Needs
Brainstorm Session
Problem/Goal: As a team, we collaborated on defining problem space through the lens of the fan. We discussed ways to connect existing fans of celebrities and convert them to be WNBA fans.
Persona Quote: "I don't know who to root for, I don't know anything about the teams or players of the WNBA!"
Constraints:
- 24hrs to Design and Implement,
- Blue Sky Thinking,
- Needs to be Accessible (Low Floor, High Ceiling)
Assumptions:
- VR - not everyone has access,
- Spotify & TikTok easy to access,
- Celebrities are Influential
- Positive Social Impact creates strong connections
Define
How Might We...
After our secondary research, our team defined the problem space in a How Might We question to ensure all team members were on the same page.
Persona
Yasmin - Millennial
In creating the persona, we wanted to choose a persona that in not familiar with the WNBA but someone that is active on social media and follows influencers and artists.
In looking back at the persona, I would further simplify the categories into the following:
Frustrations: Overwhelmed with too much text
Goals: Wants to learn more and expand on her interests
Behaviours: Big music fan and loves to connect online
User Stories
Ideate
Ideas
Brainstorming
After sharing may ideas on how to entice and maintain millennials fans to the WNBA, as a team we decided to focus on music.
Since one of the WNBA sponsors is Beats, an audio, speaker, headphones company, we felt using the concept of music would be an effective platform. The main idea was to introduce future fans to the WNBA with an interview between a player and a famous musician discussing current relevant topics.
As each discipline set off to define their part, the UX team focused on creating the story, persona, wireframes and user interface design.
For my part, I focused on the story, persona, and worked with the other members of the UX team to complete the wireframes for the Web Dev team.
Storyboard
Solutions
Main Features
1. Engage
2. Inform
3. Incentives
Engage:
In identifying the solutions, our team focused on finding a way to engage people to access the WNBA app through a live interview with Drake and one of the top WNBA players.Inform:
Once we attracted individuals to the WNBA app, we proposed to update the player information cards to be less text heavy and more personal, showcasing their Spotify playlists, personal interests, and any positive social impact contributions to their community and/or the environment.Incentives:
Once the live interview is complete, the user has the option to sign-up to the WNBA via email and in doing so, they receive an NFT of a digital autograph of a player of their choice. This last step aims to reinforce the positive experience and help to encourage new fans to join and show appreciation for existing fans to further maintain their support.
Sketches
Sketches
The UX team presented quick digital sketches to the team to achieve:
A visual representation of our ideas.
Explain the layout and arrangement of the elements.
Team feedback on the flow and function of our designs.
To ensure our sketches met our personas needs, informed by our research, and addresses the problem space.
Prototype
Wireframes
High-fidelity
Using Figma, the UX team translated the FigJam sketches into high-fidelity wireframes, modifying and adding to the existing WNBA app for efficiency and consistency. As we completed a wireframe, it was passed onto the Web Dev team for their coding and implementation.
Prototype
As part of the UX team, we each contributed to building high-fidelity wireframes to hand off to the web developers. We learned the best way was to complete one page at a time and then let the web devs code each page.
Key Learnings
Communication
One of the main takeaways from our industry project was great listening and communication skills. The main two ways we achieved these were:
Ensuring everyone's ideas were captured and opinions were heard.
Decisions; anonymous voting worked best.
Time Management
Another key learning was keeping within the time constraints for this project (24hrs) by:
UX team, needed to consider how the complexity our ideas would impact not only our time but the time and effort of the Web Devs and Data Scientists to complete.
Understanding that the designs won't be perfect but to ensure there was time to allot for designing the presentation and practicing our speaking parts.
Problem Solving
When conflicting opinions inevitably arose, I found the best way to problem solve was:
Refer back to the problem space, user stories, and proto-persona and ask if the proposed solutions or ideas aligned with our user and business needs.
These main components brought us back to what was important thus keeping us on track, confident in our approach, and reducing any arguments.
Thank you for reading my case study!
Want to work with me? Feel free to contact me!
...or just say hello on my social media.