Adapting a website into a native app to provide added value to the user.

Quick SUMMARY

The RTL Group has secured the rights to broadcast all NFL games starting from 2023. On this occasion, the Sport.de portal, which has only existed as a web offering until now, is set to receive an app. The challenge was to conceive an app in just 4 days that fully utilizes the advantages of a native application and provides users with added value compared to a pure web application, without generating excessive effort. Time is a bit tight. I created this app as part of the application process for RTL.

The Process

The Process

To systematically solve the problem, I utilized the Design Thinking Framework. Although I didn't have sufficient time to go through each step, it still assisted me in maintaining my focus.

research

• analyzing Sport.de as it is now
• researching competitive Brands
• gain understanding of what users want 

Define/IdeatE

• defining the requirements for Version 1
• understanding the information architecture
• defining the user flow through the app

Prototype

• creating low-fidelity, mid-fidelity, and high-fidelity wireframes of key frames
• ensuring that the requirements are met

Test

• user testing the main flows, particularly focusing on the happy path
• incorporating feedback from real users

Research

Patterns that I found useful

While examining other sports apps, I aimed to identify beneficial patterns and learn from the mistakes made by competitors. Here are some useful patterns I have discovered:

Sport1 Home

I really appreciate the idea of having two tabs at the top. To optimize the user experience for those using the app on the go, I suggest using the second tab exclusively for Live Events, as they tend to be of higher interest in such situations.

I like the Favourites option in the bottom navigation. It offers convenient access to preferred content.

Spotify Search

I love Spotify's prominent search feature in the bottom navigation and the helpful suggestions on the search page.

Sport1 Onboarding

I'm impressed by the excellent onboarding experience provided by Sport1. It's truly well executed. I've decided to adopt a similar approach for my app.

Research

People that would use my app

Given the brief description of the target user as male, young, and technically interested, I created two concise proto-personas to better understand their needs and preferences.

Alexander, 34, from Wuppertal, is a project manager and a father of two children. His wife is currently on parental leave. He has limited free time but desires to connect with his friends from university, with whom he shares an interest in sports. He wants to stay informed during his spare moments and is particularly interested in following the progress of his favourite teams. Recently, influenced by his friends, he has also become a fan of the NFL.

Sam, 19, from Cologne, is a sports student who is experiencing living alone for the first time. His love for sports, particularly the NBA, comes from his father. He enjoys discussing players and game results with his father, which helps them stay connected despite the distance between them. Sam typically stays informed about sports news while on the go using his mobile phone.

ResearcH Findings

Key findings and takeaways from research

Importance of Onboarding

A well-designed onboarding process can greatly enhance the user experience by helping users quickly understand and navigate the app.

Keeping depth of information

Users are extremely detail-oriented when it comes to their favourite sports. Even though the app is intended to be an initial version (V1), there can be no compromise on the depth of information.

Simplified Navigation

Streamlining the navigation, such as using tabs and bottom navigation, improves usability and allows for easy access to essential features.

Personalization with Favourites

Allowing users to customize their content through favourites or personalized news feeds enhances engagement and tailors the app to individual preferences.

Reducing content

Sport.de covers almost all sports – from horseback riding to Ninja Warrior. The information overload can be effectively reduced by excluding sports that are not of burning interest to our target audience.

Final User Interface Design

Styleguide and inspiration

I utilized the same font as the Sport.de website.

I based my design system on Material 3, making necessary adaptations to meet the specific requirements of the project. With a tight deadline of only one day to create the high-resolution screens, having a reliable design system like Material 3 was crucial in ensuring efficiency and consistency in the design process.

The finished Prototype

Onboarding

One of the key tools for helping users navigate the app quickly is the onboarding process. It allows for a personalized home screen experience, ensuring that each user gets the exact Information they need.

Home screen

I have designed both dark and light modes for the home screen, but after considering the mood board, I have decided to settle on the dark mode as it aligns better with the overall aesthetic and atmosphere.

I aimed to keep the navigation as simple as possible. I included "News" and "Now Live" options in the tab navigation on the homepage. This allows for quick navigation to live games.

In the bottom navigation, I made the discoverability of information an absolute priority. Whether through the "Search" or "Favourites" option is a matter of user preference, ensuring a personalized experience for each user.

Favourites

The Favourites section is always easily accessible, allowing the user to create their personalized news feed and quickly navigate to subtopics of interest.

Detail Pages

Detail pages such as tournaments, teams, or in this case, players, have their own sub-navigation. This allows users to navigate to specific areas of interest and delve deeper into the information structure as needed.

Learnings

I did not get the job

I invested a lot of time and effort in working on the case for the application process at RTL. However, I realized that I overlooked the fact that the brief specifically emphasized the need for speed in app development. While I attempted to narrow down the scope, it still exceeded the theoretical time frame provided in the briefing for creating the app. I wanted to fully leverage the added value that a native app can offer but forgot that stakeholders initially prioritize seeing quick results. Moving forward, I will refer more closely to the brief and make bolder decisions to deliver value quickly.

Lara Osborne 2023