Tools: InVision, Figma, Whimsical, Google Surveys, Google Drive, Pen & Paper, A/B Testing
Deliverable: High-fidelity prototype for the existing mobile app with the new revenue feature
Research Methods: User Testing, A/B Testing, User Interviews, Surveys, Usability Testing
Timeline: 2 weeks
Creating a new revenue stream for Bleacher Report; a sports and sports culture application.
The Problem
Users are finding it tedious to have to go to multiple applications to get their sporting news and sports team merchandise.
The Solution
An E-commerce platform built within the Bleacher Report application that collaborates with Fanatics (a sports merchandising retailer). This would bring sports fanatics the ultimate experience by enabling them to read about their team and purchase their merchandise all in one application.
My Role
Through this project I played many roles from Product Designer to Product Manager; however, my main focus was a UX Researcher. I conducted user research, user interviews, managed/prioritized feedback, and conducted user testing (A/B testing).
The Users
Through our research, we identified two user personas and referenced them throughout the process. Bleacher Reports user demographic are primarily die-hard sports fanatics and the casual fans. We referenced these personas to ensure our vision aligned with the primary goals of the user while addressing their pain points.
The Process
Analysis
Through conducting a SWOT analysis, we concluded that Bleacher Report can tap into a new market that will increase revenue and drive a profitable partnership with Fanatics.
After conducting the feature analysis against Bleacher Reports competitors, we were able to validate that an integration with a merchandising retailer would be a unique value offering. There were no competitors in the space with this capability.
User Research & Results
Next, we wanted to know buying patterns of our users. Notably, when people are typically buying their sporting merchandise. These insights would allow us to send tailored push notifications for new sports merchandise.
Key Insights
After many surveys and user testing we came to a few realizations. We learned from our users they enjoyed the usability and stability of the current Bleacher Report application. They mentioned there were few bugs and it was easy to navigate through.
We also validated the demand for a retail partnership with sporting content. Our users indicated that they were not happy with having to navigate to a new application to purchase goods.
After surveying over a dozen user's that used Bleacher Report, 74% indicated they would prefer having a sporting merchandise shop directly within the application.
Usability Testing
Within the current Bleacher Report application there is a fire symbol which represents that an article is 'trending'. We wanted to bring a similar functionality within the new feature set (Bleacher Report Shop) to keep consistency within the application. We also hypothesized that this would drive the social interaction as a user could share their wishlist with their network.
We conducted user testing via usabilityhub.com to measure the effectiveness of the current symbol within the new context. After surveying 16 users, 69% of them indicated that the heart symbol was more representative of adding something to a wishlist. We concluded that using the same symbol (fire) would lead to user confusion.
User Flows
We created and refined our user flows as more testing was conducted. Below illustrates the user journey before our involvement
With the introduction of the new revenue feature, we realized the starting point should be the user selecting their preferred team(s). As a result, the user would see targeted retail recommendations when browsing through sports content.
After presenting the previous user flow, we learned that users wanted to access the retail feature in additional ways. This included: on frequently visited pages (e.g. the browse page) and the ability to access the entire retail application as a stand-alone feature.
Low-Fidelity Wireframes
Low-fidelity sketches are the most efficient way to validate and iterate through design options quickly. By focusing on our extensive insights, I sketched a basic flow for the app and how it would integrate into the current application accounting for ease of usability, trust and good information architecture for the user.
Mid-Fidelity Wireframes
In the wireframing stage, we rapidly applied feedback from the sketches above to create a click through prototype. We conducted observatory testing on users to understand how easily users could navigate through the application with the new revenue stream being added. We stuck to the current UI and style guides of the current application as that is what current users were used too, and quite frankly enjoyed. Thus we implemented our new feature set much more seamlessly.
High-Fidelity Prototype
As we continued to iterate and do A/B testing we were able to launch a prototype of our design incorporating our new user flows, in which users felt comfortable with not ruining their current experience without the new revenue stream. As it was seamlessly integrated into the everyday use of the application.
.svg)
.svg)
.svg)
.svg)
.svg)
.png)
