The Team Stream app, now simply the B/R app, was built as a place for the latest news on all of your favorite teams, hottest videos, instant alerts, and live scores all in one app. The strategy behind the app meant an equal consideration for original content (such as our animations, social moments executions, long form editorial content, power rankings etc...) along with specific team and topic based curation. I helped a diverse team of programmers, engineers, and designers build out the early UI and UX for the app to ensure a smooth experience for our consumers along with the design of much of the logos for specific streams within the app. I was also responsible for building out some of our most engaged sub streams such as the Kicks section which eventually became it's own portfolio brand within B/R. Furthermore, I got to develop app exclusive experiences to draw in new users and downloads such as our 360 experiences, mobile social games, and immersive editorial experiences that leveraged the mobile experience.
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.
As the most engaged sports app in the world, the B/R App, also known as Team Stream delivers by telling the news first, executing first-in-class packaging and curation, immersing fans in their favorite pastimes with a sense of community -- making it a one-stop destination for sports fandom offering the fastest alerts in the industry, premium content distribution, and groundbreaking social features. I had a chance to touch many features of both the app and the website during my time at Bleacher Report, and these early projects have shaped one of the top sports apps in the game into what it is today.
Who is Bleacher Report? What is team stream? Bleacher Report is the app and website that will give you the latest sports, music, sneaker and video game culture in the palm of your hand. With more than 1 billion engagements in 2019, the B/R App, formerly known as Team Stream, was earned the mindshare of millions of users along with the most valuable real estate in the world - the phone inside their pocket. When it comes to the all-important ‘stickiness’, the App is opened 4x per day on average - making it the most popular sports app in the U.S. Over the past year, the B/R App saw a 145% increase in engagements. These platform-like numbers are a direct result product of the new functionality and features introduced to the app that I helped design and build over the years.
When it comes to strategy, the B/R App places one thing in mind above all else: make it easy to engage with your favorite sports. We’ve created a completely personalized user experience allowing users free reign over what they want to see, when they want to see it, and if they’re alerted about it or not. Users choose which sports, teams, and even players they follow to receive content tailored to their interests. What’s seen in-app is carefully programmed and curated by sports enthusiasts for sports enthusiasts to ensure a valuable experience for sports fans. This key personalization features sets us apart in the marketplace. Being able to send users rich media notifications about their favorite sports teams and stars in a super quick manner was B/R's number one value proposition.
The other key feature of Team Stream is the speed with which we inform users of breaking news. Within minutes of a story breaking on the field or on Twitter, our users will receive a push notification describing what happened and why it’s important. We regularly beat our top competitors in the speed department, and we feature a wider variety of content in our push notifications. Not just trades, injuries and scores, but also quotable moments and highlights of game-breaking plays. (Shoutout to NBA Street Vol. 2)
I would always espouse the power of a push notification not just from an awareness standpoint but also from a voice standpoint and teaching our programming team to speak like our users do in the comment section and to use emojis and slang and common memes going viral on twitter to reinforce their social programming and language we saw a huge uptick in engagement numbers. Between the app and it's wider integrations and our social platforms we were really able to build out a strong back and forth where it felt like a balanced ecosystem between native app curated content or written stories and original social content. If Bleacher Report wanted to be a top destination for sports news it needed a strong app to anchor that experience.
In many ways, the whole point of all of our social media content was to long term drive brand affinity in our audience and increase the likelihood that we can convert them from casual fans to longtime users of our owned and operated platforms. And it is really this type of a long term relationship that can be built with fans that makes Bleacher Report the choice for so many young people who have grow up with the app and the social presence we have built.
.jpg)
The Bleacher Report app is also the first sports app of its kind with seamless social functionality - which builds community and engagement. I helped launch the “fire” stream which are our version of facebook likes or reddit upvotes, suggested how we build out community and direct or group messaging features, helped beta test reddit AMAs (Ask-Me-Anythings) and then port over an elevated version that could be experienced natively within the app, and perhaps most importantly helped design and build out much of the UI and UX that makes it one of the smoothest sports apps on the planet. These features exist in tandem with comments, replies, and expanded profile customization. Every social feature we build is designed to develop a community of sports lovers who want to find their fan counterparts and engage with their favorite sports, athletes, and trends.
When users open the app, they’re immersed in their favorite sports and put in contact with fellow fans. Relevant content is surfaced and personalized to them. Images are tight and bright. Text is conversational and light. Videos stream as you scroll through threads. Alerts yell the news first, and often do so with HD video or rich media that add to the story. No other sports app on the planet takes as much attention to detail, builds meaningful community, or tells the news faster than the B/R App. The app experience is closely tied to our social accounts and the content I would produce as a part of our moments team would often be a promotional piece to drive users to our app.
Team Stream has done something entirely new in the mobile sports app space. By being ‘source agnostic’, that is, programming content from other news outlets right along with our own, we’ve been able to provide a best-in-class user experience. And by looking everywhere for news – scouring every resource available to us – we’ve been able to see things and react to them quicker than our competitors. We don’t care who breaks a story. They’ll get credit from us when we send our push notifications, while other outlets are waiting for their own editorial team to write a story before they tell fans. Team Stream has been the disruptor that other – more established – companies have emulated in their apps in terms of speed and functionality.
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. I helped identify and futureproof the roadmap for success for the Team Stream App experience by guiding the strategy, UX, design and development phase early on in it's development, thus influencing it's current trajectory as one of the most impactful applications in the sports marketplace.
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. This elevated experience would be key in positioning Bleacher Report as the future of sports media, as we would be interactive with fans rather than just it being a one way conversation. It isn't just about informing our fans or keeping them updated, but allowing them a space to interact with other like minded individuals.
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. As a way to build brand awareness and fan engagement we actually were able to organize Kasey Kahne to drive the No. 5 car with a new paint scheme at the Quicken Loans 400 at Michigan International Speedway, featuring Team Stream as a sponsor as a part of our marketing budget and Turner's relationship with Nascar as we were building the new designs as a way to drive more eyeballs to the eventual launch.
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. The idea would be to take away as many of the barriers between the sport and the consumer.
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. This led to a 10 fold increase in app downloads and stream subscriptions as we continued to elevate the features within the app.
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. Bleacher Report used Cloudinary as a speed to market SAAS digital cloud service to automatically transcode videos into a streamable format, adjust their quality and resolution, implement adaptive bitrate streaming and deliver them through a fast, reliable content delivery network. These features ensure that viewers experience a smooth playback irrespective of device requirements or internet connectivity on the iphone or ipad app.
Not only did I design and creative direct al the motion graphics for the Broadcast Package around this higher visibility high resolution linear video offering, I also worked with our programming and engineering teams to develop a robust TV streaming solution that would help us drive millions of linear views month over month. 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 its next stage of development. Video was a key aspect of this world and an important solution for our sports coverage.
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.
To a large degree, the value proposition for the Bleacher Report Team stream app was that we would do the work for our users in terms of aggregating high quality team focused content for them, and in doing so they would have to search all around the web to find the content they were looking for. It was a time saving measure, and we were acutely aware of this. The issue with this is that you are at the mercy of speed and really don't have a way to make fans stay, and this is why "sticky" content vehicles such as our games or animated series would become such a huge part of the future growth and success for the app. Once we established that we were the go to sports curation service on the internet, we were able to position ourselves ideally to surface our own premium content.
With the fastest alerts in the sports app industry, real access to big-name athletes like Russell Wilson, Julian Edelman, and Metta World Peace via B/R App AMAs (Ask-Me-Anythings), community threads that garner constructive conversation, and a seamless user experience for highlights, news, and lifestyle content; the numbers prove that the B/R App makes it as easy as possible to be a sports fan. My role was to find design solutions that would help our users connect with this content and similar sports content we would curate from around the web in a sticky and engaging way.
Working in conjunction with our product design team and Justin Chen under the watch of Bennett Spector, I was able to take part in the logo design process as we began to refresh the look and feel of our brand and our app. This was a massive undertaking that had many moving parts and there are countless folks who contributed both on the design and the engineering side to help bring this project to fruition. We took part in many team brainstorm and design critique sessions that were meant to be used to help develop focus groups that would define the future vision for the logo and brand.
However large the investment was from a time, team, or financial perspective the company really prioritized the app as the key to the future growth of the company, and so getting a chance to work on it was a blessing. It was a chance to truly impact the day to day lives of millions of sports fans. The optimization for mobile formats enabled Bleacher Report to reach new audiences. The increased content loading speed has also significantly improved the company’s mobile UX. And on top of all of this, the new and improved look and feel of the app and website completely revamped the feel of the brand.
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.
Building in these features in a sandbox with the aid of our UI and UX design teams lead to new innovations such as our folding ad units or expanded community streams for increased engagement. My contributions to these interactive elements of the app architecture led to over 786% increase in viewer retention and watch time for our videos.
Using the app as a unique value proposition we were able to sell omni channel brand activations like the one below to Ford where the content would be exclusively launched within the app, and then spread out on social channels, and this type of a promo would run on TV channels like HLN or CNN after sports update segments to drive eyeballs back to the app. This type of approach that had many different touchpoints to drive eyeballs to a single source really became a strength for our app when we were premiering new content as it became the de facto place to have much of these conversations.
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.
The idea is to make Bleacher Report's team stream app just as addictive as any social platform out there by putting scores, social posts, and original sports content including articles, videos, illustrations, animation, and more all as close to the consumer as possible by removing as many barriers as possible to the content. What is tough with any social platform is that while you may follow your favorite athletes or teams, due to the algorithm and the competing content with your friends and family posts, things can get lost in the shuffle, so having this centralized app has been key. Team stream is your one stop shop, and it filters out all the noise to give you exactly the sports community that you want to take part in.
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. Team Stream Curates content and sends breaking news push notifications for well over 500 teams around the world. Our users select the teams and topics they’re interested in following when they download the app – anything from NFL football to Premier League soccer or America’s Cup sailing.
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, Ryan Smith, Drew Paterson
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