ROLE
Product Design Intern
TOOLS
Figma, Adobe Photoshop, Jira, Mobbin
COLLABORATORS
UX Designers, Brand Designers, Product Managers, UX Researchers
TIMELINE
06/2023 - 08/2023
OVERVIEW
The Bleacher Report (B/R) app bridges the gap between sports and culture. They have outgrown their current app and so the company is looking to fully rebuild the B/R mobile app’s livestream and creator features to help realize their new creator strategy and grow its business and audience.
Here are some issues with the current livestream experience:
IN THIS PROJECT I WILL ACCOMPLISH THE FOLLOWING 6 PHASES:
OBJECTIVES
The app product is currently shifting from a legacy news medium to a creators-focused format. As of summer 2023, the team is focused on premium creators that are hand picked by our programming team. We are hoping to evolve this to an app where anyone can create content. With this shift in strategy we’d like to generate ideas on how the creator experience could evolve and grow over time and how we can encourage more users to get involved in content creation.
WHITE PAPER RESEARCH
64%
of young people think about platforms as their first step in accessing creator content
57%
of young people prioritize creators over platforms when seeking out content
81%
of young people are interested in following creators on multiple video and social platforms
While platforms provide an entry point for creator discovery, at the end of the day what social media users care most about is the creators themselves. Consumers are willing to leave platforms and follow their favorite creators to new spaces.
80%
of consumers say their purchasing decisions are impacted by content made by average people
89%
of young people indicated that they trust creators
Creators’ words carry a lot of weight thanks to their relatability and credibility. Because creators’ followers can see themselves in their favorites, they’re open to trying the products they recommend.
77%
of young people are interested in creator livestreams
75%
of young people are interested in exclusive fan content
While followers already feel extremely close to their favorite creators, they want real-time and personal interactions to feel even more connected.
THE WHY'S
THE USERS
PROBLEM STATEMENTS
USER PROBLEM STATEMENT
How might we create a concise, pleasurable experience for users by improving upon the creator + livestream experience?
BUSINESS PROBLEM STATEMENT
How might we increase revenue by monetizing creator livestreams ?
STAKEHOLDERS
After reading up on existing UX research on creators and users, I mapped all of the stakeholders involved in the project from internal and external, which provided me with a deepened understanding of whose needs I must prioritize.
COMPETITIVE ANALYSIS
To further understand the creators, video, and livestream realm, I analyzed quite a few leading social platforms, divided into several categories. They are key features, app screens, audience, weakness, and opportunities. I would first acquire the screens on Mobbin, a platform with documented flows broken down by features for most apps. For every app I analyzed, I examined both features aimed towards creators and general posts, like so:of whose needs I must prioritize.
A CLOSER LOOK AT TWITTER(X)'S COMPETITIVE ANALYSIS
JOURNEY MAP
LIVESTREAM STEP-BY-STEP BREAKDOWN
I attended several of B/R App’s existing livestreams and created this journey maps based on high and low points in the experience, broken down into two categories of notes, actions and cognitions. I documented the touch points each time I interacted with the livestream and the excitement brought on by said action.
PAIN POINT IDENTIFICATION
By rendering my journey map, I was able to identify many issues within the livestream workflow. For instance, clicking “join room” and the video itself actually takes the user to two different pages.
Here’s a summary of my journey map findings. We will improve low-pleasure moments and make the high-pleasure moments even better:
NEW FEATURE BRAINSTORMING
Step 01
VENN DIAGRAM BRAINSTORMING
I brainstormed new livestream features that tick off one or more of the three categories: engagement, uniquely B/R, and monetization. This way, I would be constantly thinking about the functionalities of these new features as I brainstorm.
Step 02
FEASIBILITY MATRIX
After discussing these new ideas with my manager and several adjacent product managers, I sorted them in a feasibility matrix to identify the high-feasibility, high-priority features from the new ideas generated from the venn diagram brainstorm.
Step 03
MAPPING NEW FEATURES WITHIN EXISTING B/R ECOSYSTEM
Finally, I integrated the new features to be developed into the venn diagram again to get a clear view of the functions and benefits each new feature achieves.
WIREFRAMING
With my UX research and brainstorming complete, I moved onto wireframing, based on a preliminary app flow diagram I had devised. I would go on to update this app flow diagram as my design changed as I continuously gained new insights on the project.
EXTRACT ELEMENTS FROM EXISTING PROTOTYPES
i first drew inspiration from existing prototypes and boiled them down to shapes for easy wireframing and experimentation. This also effectively maintains UX/ product consistency.
PRELIMINARY APP FLOW DIAGRAM
NON-LINEAR APPROACH
I did not work only in low-fidelity formats, but was jumping back and fourth between low and mid fidelities. This allowed me to tackle ever-evolving features and flows and testing if they would work on a UI level.
PLAYER CARD ITERATIVE PROCESS
As the days went by, I continued my iterative, non-linear process after receiving feedback from team members and product managers. I also conducted some informal testing, which also informed my design decisions. Here’s an example of how my monetized player card purchase feature evolved:
This is my wireframe.
Accordion format to sort all monetized player cards
Accordion + slider to sort all monetized player cards
Experimented with a categorized grid format
FINAL APP FLOW DIAGRAM
After analyzing many pieces of research, stakeholder insights, and many such iterative processes, this is what my app flow diagram looked like:
KEY DESIGN DECISIONS
PLAYER CARDS AS MONETIZED TOKENS
Player cards of athletes could incentivize users to purchase in support of their team during livestreams. Since all viewers in the streams will be able to see these monetized tokens being sent, users also get competitive in purchasing and sending them to gain recognition.
Additionally, player cards tap into the psychology of collecting objects to complete a set, which also incentivizes purchasing. Users could also purchase player cards of the creator as a way to tip them, with all of the profits going to the creator.
CAPTURE THE ENERGY OF SPORTS
To capture the energy surrounding sports and dialing up the fun factor of the livestream experience, I designed a feature for users to make a free throw to send their player card token in addition to notifying the chat of it.
I also incorporated a lottery feature for users to two rare player card from a collection. This incentivizes users to stay until the end of the stream and rewatch VOD’s so they can participate to win free player cards.
B/R COIN SYSTEM
The coin system was conceived of as a love child of the Reddit karma and Twitch point because it is used both as a community involvement reward and a token to purchase monetized player cards.
Users can purchase coins outside of livestreams. They will also be prompted to make an in-app purchase for more coins if the player card they want to purchase costs more than what they currently have in their wallet.
LIVESTREAM FAN POLLS
During the live, users could vote in response to a creator-generated poll, which can then be shared to a friend or even through another app. This is also a feature designed to increase user engagement.
DIALING IN TO AN EXISTING LIVESTREAM
To nurture the organic bond between creators and their loyal viewers/ followers, viewers of the livestream can choose to dial in to be featured in the live. When they do so, the UI changes to accommodate for the fact that the user is now also live on air. This would also increase livestream engagement as the new guest is bringing in a new piece of opinion that the rest of the viewers are sure to react to.
END OF LIVESTREAM
At the end of the live, the user is directed to watch additional trending livestreams. Additionally, there is also a leaderboard that presents who had tipped the most during the livestream, incentivizing users to send player cards to receive this recognition at the end of the livestream.
HIGH FIDELITY PROTOTYPES
CREATORS TO USER FLOW
This flow navigates from the creator’s profile to the user’s profile and demonstrates how users can purchase player cards/ monetized tokens and B/R coins through their profiles, outside of a livestream.
CURRENT FEATURES REVAMPED
I improved upon the current emoji reaction, share, and in-this-live panel according to my research to deliver a more pleasurable experience.
PLAYER CARDS
n the player card pop-up panel, users can view and send their purchased player cards, exchange B/R coins for more player cards, and wait until the end of the livestream for a chance to draw two rare, seasonal player cards.
RESPONDING TO POLLS AND SHARING POLL RESULTS
To further engage sports, creators can set up polls in their livestream and have watchers answer these questions. The results are then discussed in the stream. Of course, the watcher can also share poll results to engage more users.
DIAL IN
To encourage more creator-creator and watcher-creator interactions, when the creator is allowing dial-in requests, users can join the livestream as a host if accepted. When a watcher becomes a co-host, the UI changes to acomodate for the fact the user is also now live.
END OF LIVE LEADERBOARD
Finally, as the livestream ends, this UI with related livestreams and scrollable leaderboards are presented to the viewer so they feel more motivated to tip more to be on the leaderboard.
TAKEAWAYS
ENTRENCH YOURSELF INTO THE PRODUCT TEAMS
Take the time to familiarize yourself with the company product ecosystem! I did so and immediately knew who to go to for one-on-one meetings to go through my designs.
READ UP ON PREVIOUS UX RESEARCH
Concatenate existing UX research, team member wisdom, and product managers’ documentation on previous iterations of the app. This helped with my design process immensely.
NON-LINEAR APPROACH
Adopting a non-linear development timeline where ideas and features inspire and feed into one another is great for a burst of creativity within the confines of the project.
IMAGE SELECTION
When utilizing third party images for your design, it is a great idea to select shots with the same color palette and composition, while taking into account the company’s branding.
Thank you for the most beautiful summer full of personal and professional growth B/R! Hoping our paths will cross again in the future :)
