BLEACHER REPORT
New User Onboarding
Our current onboarding flow is the first impression users have of the app, where we can introduce the value of the brand, aggregated sports content, alerts, and personalization. However, our current onboarding flow is outdated and makes it difficult for users to experience the value of the app. As a result, we are currently losing a high volume of users throughout the flow.
As the Product Designer on the team, I was responsible for gathering competitive analysis and research, and leading the design process from early concepts to delivery.
PROJECT TYPE
Mobile App, iOS + Android
TEAM
Jane Neiswander | Product Designer Mario Reid, Katie Klein | Content Design
Andrew Burke | Product Manger
Ligja Gill | UX Research Manager
Felipe Gil, Rene Candelier | Engineering
TOOLS USED
Figma
Adobe After Effects
Origami
TIMELINE
Launched Fall 2022
Analyzing pain points in our current flow
I began by outlining the current onboarding flow and partnering with UX research to develop a research study to analyze the current pain points. I also researched competitor examples looking for industry standards and possible improvements we could make.
Pushing A Brand-Forward Welcome Screen
To improve the welcome screen, I collaborated with the Content Design team to develop concepts that aligned with the product team's goals, legal constraints, research findings, and showcased the B/R Brand. I also considered tactical considerations such as user flow and accessibility. The videos in the designs below were designed and animated by me.
LEGAL CONSTRAINTS
Since this is one of the first pages of the app, we have to get any design changes vetted through the legal team. I gathered feedback from legal to start framing our solutions around the project.
01
we cannot use images or videos of athletes because they are editorial and not commercial rights
02
we cannot use an illustration with a likeness of an athlete or a brand
03
we cannot use other brands in our illustrations (Nike shoes) because of conflict with app sponsors on the launch screen
Sports Imagery Photo Grid
Abstract Shapes
Textured Collage
In the next phase, I explored the information hierarchy and density of the pick teams page. BR allows users to follow leagues, teams, players, and interests, so I wanted to make it easy for users to find the content they were most interested in.
Research Considerations
We had clear data that showed that users who selected 6 or more streams during the onboarding process were more likely to be retained after day one. With this in mind, I started exploring ways to influence users to select more streams.
Exploring hierarchy on pick teams page
We narrowed down the wireframes and wanted to get a better understanding of the usability of our concepts. Our research team was unavailable to conduct the test, so I wrote the brief made the prototypes and conducted the A/B test. In the test, users were asked to complete a series of tasks that would encourage them to explore the layouts, hierarchy, and interactions within the prototypes.
Main Findings
The tabbed view gave participants early indications of the breadth of content featured in the B/R app.
While participants appreciated the scan-ability of the list view, they found that it was more information to process at once.
Participants felt that the icon view was a more updated looking design and that it felt more organized.
A/B Testing Final Concepts
“This goes above and beyond [what I was expecting], I was thinking purely sports, maybe specific teams, but the add-ons [interests] are really nice.”
-Male, 26
“The page was very long, I had to scroll a ways to find the interests compared to the other one that had the categories at the top of the screen.”
-Male, 26
Final Design
Here is the final design, with all the pieces of the flow connected together by final animations and transitions.
With this design, we improved the app's first impression by creating a welcome screen that showcases the breadth of content we cover. We also improved the team selection process by providing a picks summary that shows users who they've selected to reduce cognitive load. After users selected picks, we provided them with recommended streams that were similar to what they selected to help encourage users to personalize further.
Impact and Reflection
Overall, this project was a great collaboration between product, design, research, and engineering teams. We achieved our goals of improving the first impression of the app, reducing friction on onboarding, and adding brand personality.
From a design perspective, I am particularly proud of the following skills I learned:
Wrote and launched a user test
Learned how to use After Effects and Origami
Reduced friction and created a more polished design
During the design process, we became aware that our current data rates were very poor which made benchmarking this experience particularly difficult. If I were to do this again, I would have launched the different updates to the app in a series, rather than all at once. This would have given us a better understanding of how each update affected user experience considering the lack of available data.
