charging up...

Case Study: HITC Sport Live App

Description

Overview

This project was initiated based on the shift of Here Is The City’s (HITC) business strategy, informed by a market shift from ingesting news via websites to phone applications (with the rise of smartphones). Instead of the traditional web news model, HITC developed an iOS application focusing on their sports vertical to remain competitive in the news market, increase customer retention and brand stickiness, and provide a new revenue stream in the form of application adverts.

To address this issue, I took on the role of UI/UX Designer and Lead Developer to create a native iOS app. The goal was to provide a seamless and engaging mobile experience for our audience.

With the release of HITC Sport Live on iOS, the company noticed higher brand loyalty and an uptick in revenue from more lucrative application adverts, however, the dependency on a small development team to keep up with newer iOS operating systems informed the strategy to focus on redesigning the core website experience to service the application’s purpose. Upon leaving the company, HITC Sport Live was sunsetted in 2020.

HITC Sport Live

Defining The Problem

Our internal research, utilising Google Analytics data, uncovered a worrying trend: user engagement with our desktop news platform was sharply declining with the rise of smartphone usage, with mobile devices accounting for approximately 76% of page impressions. Furthermore, certain features, such as our fixture tables, reported inconsistent user engagement patterns. These features experienced traffic spikes at particular times but also suffered from high bounce rates and poor session performance, often serving as both an entry and exit point for users.

Most notably, these features were underutilised during and after actual football matches, when they could’ve provided additional value. To maintain our standing as a premier source of football news and to enhance both stickiness and session retention, we identified the need to meet users on their smartphones. Our objective was to create an innovative platform that would function as a football companion app, elevating the football-watching experience in a mobile-friendly format.

Project Goals

  1. Adapt to the shift towards mobile consumption of news and match information
  2. Improve user engagement across football content, especially during live matches
  3. Reduce bounce rates and increase session duration with infinite content tailored to user preferences
  4. Consolidate features into a cohesive, user-friendly mobile application to provide a more interactive and immersive football experience

Key Considerations

  1. For commercial viability, the application should exclusively deliver football content, accounting for approximately 95% of our total page impressions and the vast majority of our ad revenue
  2. The design should be intuitive and accessible, including navigation, iconography, imagery, and overall flow
  3. The design should be modular and reactive to user preferences, including favourite football leagues, teams, and players
  4. Due to resource restrictions, only one operating system will be implemented; the initial development process should focus on iOS devices, accounting for roughly 68% of mobile impressions

Users

The target audience for this sports news app was carefully defined to align with our existing website audience and the specific needs of sports enthusiasts.
The ideal customer persona included:

  • Demographics: Primarily male (90% of the audience), aged 25-40, based in the UK or Europe.
  • Economic Status: Individuals with disposable income, making them valuable for advertisers.
  • Interests: Passionate about football, particularly the Premier League, UEFA Championship, and Bundesliga.
  • Lifestyle: Tech-savvy individuals who rely on smartphones for news consumption.
  • Professional Status: Varied, but likely to include young professionals and sports enthusiasts.

Key characteristics of these users include:

  • Time-sensitive: They value quick access to the latest sports updates in the ever-changing football landscape.
  • Loyalty-oriented: They have a strong affinity for specific teams and leagues, and a strong distaste for opposing teams.
  • Mobile-first: They prefer consuming content on-the-go via smartphones.

Understanding these user characteristics was crucial in designing a sports news app that met their practical needs and aligned with their interests. The challenge was to create a product that felt both comprehensive and easily accessible, catering to their desire for timely sports information while respecting their preference for mobile-friendly content. By focusing on UK and European users interested in major football leagues, particularly the Premier League, UEFA Championship, and Bundesliga, we aimed to provide the most relevant content while maximising potential advertising revenue.

Process & Iterations

Research & Ideation

We began by conducting thorough research into existing sports news apps to identify best practices and user preferences:

  • Competitive Analysis: We analysed popular sports news apps like BBC Sport, Sky Sports, and The Guardian Sport App. We identified their strengths, weaknesses, and unique features.
  • User Research: We conducted internal and external surveys and interviews with our target audience and team of sports writers to understand their needs, preferences, and pain points.
  • Information Architecture: The CTO mapped out the app’s information architecture, defining the hierarchy of content and how users would navigate through the app.
  • Visual Style Workshop: We modified the existing visual style and tone of HITC Sport. This included colour palettes, typography, and branding.

Next, I created low-fidelity wireframes using Sketch to visualise the app’s basic structure and user flow.

At first, we focussed on the primary service of the application; to provide a seamless infinite scroll displaying live and pre/post-match content, along with news articles, videos, and podcast content. The intention was to ensure that anytime users opened the application, there was something relevant to draw them in. To facilitate this, I sketched some initial workflows to set the foundation for the next static design iteration.

Early stage mock-up (Infinite Scroll)

Keeping these features together, however, complicated this workflow. Due to the coinciding nature of football matches, and the abundance of matches scheduled at the start of a season, this workflow could potentially overwhelm the main content stream when matches were upcoming, pushing high-value content down and removing user choice of what content to consume.

In the next iteration, we separated the match feature from the news feed. Whenever the user opened the application, they would land on the news feed tab, with the option to navigate to the match and fixture feature.

News Feed and Match Tabs

This addressed content overload on the primary tab, however, after a few tests, it was clear that if left unprompted, some users would not utilise the match feature. This encouraged us to add an interactive banner that appeared throughout the app when a match was live, based on user preferences.

Interactive Live Match Banner

These wireframes served as a foundation for our design process, enabling us to quickly iterate on different layouts and features. This included paper prototypes, which allowed for rapid testing of the app’s navigation and core functionalities, providing a tangible representation of our ideas.

High-Fidelity Prototyping

We transformed our wireframes into high-fidelity mockups using Sketch, focusing on visual design and user experience. These detailed designs included the app’s core features, navigation structure, and content layout.

HITC Hi-Fi Mockups

HITC Sport Live Mockups

A key addition was the implementation of a dedicated Favourites page. Following an internal consultation with our team of 18 freelance football writers and editors, we identified the need for multiple categories. The initial design allowed users to favourite their preferred teams. Based on the consultation feedback, we added a second tab for specific competitions, enhancing the app’s personalisation capabilities.

InVision Prototype

To validate our design decisions and gather further insights, we used InVision to create interactive prototypes. These prototypes enabled us to test user flows, refine the favouriting system, and ensure the app’s navigation was intuitive and efficient. This iterative process allowed us to fine-tune the user experience before moving into development.

The Development Process

We utilised Swift as the primary programming language for iOS app development, benefiting from its performance and ease of maintenance compared to Objective-C. Our technology stack combined native iOS components with carefully selected third-party libraries, allowing us to balance custom functionality with efficient development time.

A major challenge was programming for a multi-threaded environment. There are a lot of transferable skills going from web development to app-oriented work, but background processing required a complete change in approach.

Despite our efforts, we faced significant challenges due to the rapidly evolving iOS ecosystem, particularly in maintaining app compatibility across different iOS versions and device models. While we tested regularly on multiple devices to ensure a consistent user experience, we struggled with the frequent updates required to keep the app functioning optimally.

Final Design Solution

The final design of our sports news app featured a sleek, user-friendly interface that provided quick access to the latest sports updates. The home screen showcased a customisable news feed with the latest headlines and match results, while a robust favouriting system allowed users to follow specific teams and competitions across multiple tabs.

We incorporated interactive elements like live match trackers and in-app notifications for breaking news, ensuring an engaging experience for sports enthusiasts. Looking back, I’m particularly proud of how we balanced information density with usability, creating a comprehensive platform that resonated with our audience. Although the app is no longer available, the insights gained from this project continue to shape our approach to digital sports content.

Results & Key Takeaways

We successfully launched the sports news app on the App Store, and the response from users was overwhelmingly positive. Many fans appreciated the convenience of accessing sports news on their mobile devices, leading to a noticeable increase in user engagement. The real-time updates, personalised content, and interactive features truly enhanced their experience, making it easier for them to stay connected to their favourite teams and leagues.

The app also played a significant role in boosting our brand visibility. By offering a tailored experience that resonated with our target audience, we managed to attract a wider user base and create a sense of community among sports enthusiasts. It was rewarding to see our efforts translate into such strong user connections.

However, despite this initial success, we faced challenges with the ongoing maintenance required for frequent iOS updates, which ultimately led to the app’s removal from the App Store. This experience taught me valuable lessons about the importance of long-term planning and resource allocation in mobile app development and that sustainable strategies are crucial for maintaining user engagement and satisfaction over time.


See the HITC Sport Live App (no longer available) here: https://iphone.apkpure.com/app/hitc-sport-live-soccer-news-transfers-live-match-alerts/com.hitc.hitcsportlive

Check out the review here: Salt Angel Blue

Details
  • UX Designer, Lead App Developer Sketch, inVision, iOS/Swift, XCode
  • Application Development Full Stack App Development, Staging/Live Testing, Updates & Bug Fixes, App Store Management
  • Rapid Prototyping User flows, Wireframes, High-fidelity Prototypes
  • Visual Design Branding, Marketing Materials, Graphical Assets
  • Date 18 September 2015
  • Release HITC Sport Live
Categories: CodeProductUIX