2 Time Webby Award Winner Best Mobile Sports App
The Team Stream app was launched as a first of its kind community for sports fans to share and congregate around sports news and moments. The biggest challenge in producing a streamlined version of the app experience was developing a user flow that would work for different demographics and provide an optimal sports fan experience for the most people possible. Bleacher Report users, on average, spend 200+ minutes in the app per month and providing a varied and diverse engaging mobile content experience is paramount. Evolving the app UI and UX as we developed a streamlined fan experience that matched up with the ever changing needs of the modern sports fan was a the crux of this design challenge.
Over my tenure at Bleacher Report I helped oversee many iterations and evolutions of the mobile app, from it's early inception as Team Stream to the many stages of refinement and upgrades, which culminated in our complete design overhaul and revamp to today. I got to play a role in defining some of the early look and feel of some of the features of the app. Working in concert with our app developers and engineering team under Chris Nguyen and app programming and emerging media lead Bennett Spector. The overall transformation of the app into the most convenient social sports platform available to fans was a long but fulfilling one. About 3.5 million people use Bleacher Report’s app each month. B/R’s app continues to be the most engaging, most frequently used sports app in the US, with the average fan opening it 4.5X a day. Our community average is more than 2 hours per person in the app every month, topping our biggest sports competitor by 50%. Our goal is to define sports culture by capturing and creating moments that matter.
The first step was to update the basic layout of the website and translate that to the app redesign as we wanted to prioritize the concept of an infinite feed. As the wireframes evolved over time I was responsible for developing the look and feel of an image heavy visual social platform that felt user friendly and put content and headlines front and center and allowed for consumers to easily switch between different "streams" of sports content. Prior to the concept of the dock that I suggested we were using a tray that would hold all the different teams. This was behind two clicks, and the dock allowed for quick switching as it was always on the top of the app design UI. Through a SWOT analysis the two major things that we saw our users wanted was access to scores, and the ability to quickly move through different stories around their favorite teams or what was tredning in the sports landscape. I helped create and refine our user flows as more testing was conducted and we landed on a smoother overall experience.
Our commitment is to serve the best interest of our fans, no matter the disruption this may bring to the media landscape. This sensibility had to be translated to a mobile first experience that was unique compared to everything else on the market. The ways B/R connects to its community will continually evolve. Our goal with the app was to combine a passion for sports culture with an unwavering commitment to utilizing technology, creativity, inclusiveness and calculated risk-taking. From the website redesign we realized that the most engaged content had to be surfaced first. In order to do this we had to give users in the app more control.
When I was brought into Bleacher Report, the then Team Stream app was still in it's early stages, closer to a shell for it's mobile web version of the website rather than a fully fledged and robust iOS and Android application. As such, I had an opportunity to play an integral role in shaping the user interaction and design of the app as it has moved through it's different iterations through the years. Some of the features that I was able to implement are now mainstays of the in app experience and rank as our most consistently highest reviewed features in the app store.
One of the first things I had a chance to provide some design support around was the Team Stream HD app for iPad which offered a personalized dashboard on the homescreen, with the headlines, top stories and tweets from the teams and topics users had deemed their favorites on the homescreen. Our unique value proposition was that we allowed users to select which teams, athletes and sportswriters you want to follow, including athletes from the NFL, College Football, MLB, NBA, NHL, College Basketball Tips, Soccer, Tennis, Golf, MMA, Boxing, WWE and NASCAR. In this sense, team stream became the foremost sports news aggregator app in the marketplace.
This new User Experience Design infrastructure also required the design of new icons and UI elements for the app which I got to lead the charge on. This included some of our most subscribed streams such as the trending tab, the breaking news stream, and the featured stories stream. These three streams accounted for a massive chunk of all app traffic, so building them out to feel cohesive and streamlined was essential.
As the team stream app evolved into the Bleacher Report app and new branding was implemented, the underlying architecture that I had helped develop became streamlined as we integrated more community features into the workflow. The app itself is a news platform for all things sports related. The navigation design is generally done with an horizontal bar at the bottom, taking users to the most important corners of the app. The interactions are brief but meaningful, the general visuals are clean but full of personality to encourage a community atmosphere.
The "Trending" stream that I got to work on evolved into the "Fire" stream, which was one of the big changes in the updated version and allowed a constantly updating stream of the most trending and engaged with content to surface to the top. In order to optimize the speed and delivery of content our team also started natively uploading tweets, GIFs and Instagram posts within the app, rather than pulling them from the mobile web. We also focused on developing a robust version of our own mobile video player to speed up load times within the app. From small details like the play button to the scrubbing UI, I played a hand in making sure everything looked cohesive.
Bleacher Report users, on average, spent 151 minutes in its app per month per a 2017 com score report, and increasing this metric, which was more than double the rest of the top sports app in the IOS store, was our prime directive as we built innovative content experiences within the app. This included integrating our mobile games such as Flappy Beard or Mamba to be played within the app. We drove users to these rich experiences by alerting the game to targeted streams. This allowed us to see a huge spike in concurrent users of these rich experiences as we saw the time spent in the app rise at an unprecedented rate.
Another example of using this functionality within the app for a more interactive experience was our 360 NFL Free Agency illustration which fans could experience through the app in a mobile iframe that moved in conjunction with their phone gyroscope as they moved around their environment. Similarly, our interactive "All Star lineup generator" was integrated into our app programming strategy and as we alerted it across multiple team sub streams, we saw people using it and tweeting the results out, resulting in a conversation about the way we select teams. This conversation carried through social media until we finally saw the NBA adjust the format of the All-Star game teams. While our app wasn't the sole reason for this change, it lit a spark around this conversation and helped bring the issue to the forefront of the community.
Since the redesign, Bleacher Report’s in-app videos load within 1.2 seconds, on average, on both Android and iOS, according to video analytics firm Conviva. Per Conviva, the median video load time for publishers is 5.6 seconds on Android and 4.2 seconds on iOS. The video player has been frequently used since the redesign. One-third of the app’s users use one of the app’s new tabs, Fire, which features silent autoplay videos on a loop, similar to the now defunct social platform Vine. Users who visit Fire stay in the app for 24 percent longer than non-Fire users. In its first month, users watched 150 million video loops on Fire, which lets people quickly scroll through the top sports highlights throughout the nation.
As we continued to promote the app through social channels, one of our main directives became driving our social audience to the app as a way to bring down our user accquisition cost. I helped develop social templates that capitalized on some of our most engaged content and used it as a way to funnel users to our app. Using UI design elements from the app, we were able to integrate them into the social content in a compelling way that encouraged users to experience the content in app and familiarized them with the design aesthetic. This directive was a huge success as we saw some of our breaking news jersey swaps see insane levels of engagement while simultaneously promoting the app and driving huge bumps in download numbers. For example our Kyrie Irving trade video and Jimmy Graham free agency signing video both lead to record breaking days in terms of app downloads.
Another feature we looked to integrate was updating our mobile app so that people can share content from the app to Instagram Stories. When people view an Instagram Story featuring content shared from Bleacher Report’s app, they will be able to tap the post either to install Bleacher Report’s app through their phone’s app store or to open the app if it’s already been installed. The app accounts for a large percentage of Bleacher Report’s owned-and-operated audience as well as its owned-and-operated revenue. When people share a post from Bleacher Report’s app to Instagram Stories, a thumbnail of the post will appear in the story, including its title, main image, how long ago it was published, how many comments it has received and how many people have liked the post in the app. Atop the post will appear the caption “Open in Bleacher Report” that people can tap on to install or open the app. This type of social integration within the app was the beginning of a wider scale change to implement more of a community aspect to the app itself.
According to Comscore, 4.8 million people in the U.S. used Bleacher Report’s mobile app in March 2019, up from 3.7 million in March 2018. One of the main reasons people use Bleacher Report’s app is to get customizable push notifications on breaking news involving their favorite sports or teams. These push notifications can provide a form of social currency if someone finds out about a blockbuster trade before any of their friends, which is why Bleacher Report has seen a lot of people screenshot its push notifications and share them to Instagram. Turning this data point into a feature of the app drove even more downloads. In multiple blue sky sessions within the Design team, I was able to contribute big picture concepts that would be integrated in different forms as ways to build more of a community aspect to the app. From it's early stages and being hands on in developing design and UI decisions, to taking a step back and thinking more holistically about features and ideas that turn the app into more of a platform for debate, communication, and sharing was a huge aspect of my involvement in the Team Stream app.
The chance to contribute to the design and development of the Bleacher Report app was an extremely enriching experience as it allowed me to learn the worlds of User Experience Design and app development. Turning a more traditional news and notification driven app into a full on social experience and driving the engagement and downloads of the best sports app out there was a pleasure to be a part of.
Tools: Photoshop, Illustrator, InVision, Figma, Sketch, Google Surveys, Google Drive, Pen & Paper, A/B Testing
Deliverables: High Fidelity Wireframes, Mockups, and Motion Graphics for our Engineering Team
Research Methods: User Testing, A/B Testing, User Interviews, Surveys, Usability Testing