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 trending 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.
The eventual goal for Bleacher Report was to evolve from more than just a news aggregation and curation application and become the definitive sports media platform. A place where fans could gather and talk trash and stay up to date with games, share clips with their friends, participate in interactive contents, and truly become a part of a community. To achieve this lofty goal one fo the major directives that I was asked to tackle was how to make the actual app design feel friendlier and more approachable. Something that felt like a more natural gathering place rather than just a port of our mobile web layout for the site.
Our commitment was 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. In concept meetings with some of the engineering team and our director of emerging media, I was able to get a sense of what customer segments primarily used the app for whether it was scores or news or interacting with their fellow fans and found innovative technical and visual solutions that would put higher levels of control in front of our users.
Customer obsession is a major focus for any project that I tackle, and catering to how our users would be interacting with their teams and most important subjects was a topic that we did a heavy amount of research around. The overall goal for the Team Stream app to go from being a publisher based media app where we curate news stories and provide update notification and scores to become more of a social platform where you could dictate your community experience based on the sports teams and topics of interest in the overall cultural ecosystem that you subscribe to. Essentially we wanted to take some of the best parts of other experiences - the instant updates you get on a platform like twitter, the high quality visual content you get on instagram, paired with the community and conversation of a platform like reddit all told through the perspective of the ultimate sports fan.
Like I mentioned earlier, when I was brought into Bleacher Report, the then Team Stream app was still in its early stages, closer to a shell for its 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. Through a process of wireframing and truly examining the overall user experience for the app I was able to help streamline things to make it a more efficient and fun user journey.
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.
Video architecture became a major area of focus as the app continued to grow and the company was looking for more premium revenue streams. I was behind the art direction and app integration of our Team Stream Now realtime news update show which was shot live in studio and produced daily sports content at a high clip with high quality video and image assets. In doing so, we ended up launching apps for both AppleTV and XBox that would feature this robust video content as it became a staple of the Bleacher Report editorial playbook. This transition from a largely text based article generation publisher to a multimedia content space was key in the transformation of the app as well as Bleacher Report as it transitioned into it's next stage of development.
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 idea was to allow fans to express and follow different aspects of their fandom while interacting with the sub-communities within each niche.
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 acquisition 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. Having a hand in the content strategy and content creation that emphasized app downloads and growth was an essential factor in developing a multi-pronged set of touchpoints for our users.
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.
Key Collaborators: Chris Nygen, Art Chu, Bennett Spector, Noah Chestnut, Hammed Kohistani, Annie Pyle, Justin Chen, Chris Pedrick, Gregory Wild Smith, Ross Schwaber
Tools: Photoshop, Illustrator, After Effects, 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
Category: UI, UX, Graphic Design, Brand Positioning, App Development