Privacy Policy
unsplash-image
dashed-vertical-line

Sportschau Next

The Sportschau is one of the most famous sports websites and TV shows in Germany. For the year 2021, ARD, as a broadcaster, has acquired extensive and exclusive broadcasting rights for sports events such as the Bundesliga, European championships, Olympics and Tour de France. So it was time to modernize the design and add up-to-date functionality.

dashed-vertical-line

One app for everyone

The discovery phase

In August 2020, I was asked from ARD Sportschau to lead the design process of the new Sportschau app in cooperation with the agency Codevise.

Our goal: the all-in-one app for sports fans
Relevance, quick findability of results and events and the possibility of personalization are central elements of the app. In addition, the content must be accessible to everyone, as ARD is a public service provider. So this was our chance to clearly differentiate the Sportschau from competitors such as kicker, Eurosport, Sky, DAZN.

The app team consists of the Sportschau management (stakeholder), the editors (product owner) and a team of app developers, project managers, data suppliers and designers, whereby I have taken on the role of lead designer.

My role: UX Designer, Design consultant

unsplash-image

Ideation phase

Balance between flexibility and consistency

Since you hardly have any control over the quality of the content, especially the images, with an editorial app that is fed by a wide variety of data sources, it is extremely important to create a framework that makes the app look aesthetic and clear at all times. The complexity of the content requires a good balance between flexibility and consistency. The design should therefore be restrained on the one hand, but still clearly structured and aesthetic.
And to implement this efficiently, we decided to use React Native as the framework.

react-native
teaser-cards
process-1
process-2
lo-fi-prototype-small
process-4
process-5
process-6
process-7

From Lo-Fi to Hi-Fi

First I developed the wireframes and user flows that show the functionality and interaction options of the app. In the next step I created style tiles to define the visual direction. Only then did the first screen designs follow and, after their approval, a complete design system, which I built according to the principles of Atomic Design [by Brad Frost]. Each individual component was created in three stages of enlargement in order to meet the accessibility requirements.
Another big challenge was to design the components in such a way that they can be used for all sports. Because a soccer match provides different data than a tennis match, a race or a boxing match.

Role: Ux Design, UI Design
Tools: Sketch, Principle, Overflow, Invision

phone-mockup-1

The Sportschau Design

phone-mockup-3

The color palette is greatly reduced because the content has to deal with a large number of different images. Orange is used as an active color. For texts and icons, I used gunmetal gray instead of pure black in order to achieve better legibility, as well as white and light gray as background colors for optimal contrast.

phone-mockup-4-1

For the dark mode though I used different shades of gray and slightly desaturated colors in order to achieve a high level of detail. Dark gray surfaces can express a wider range of colors, heights, and depths because shadows on gray are easier to see. Again orange is very strong as an accent color.

I designed all icons exclusively for the app. Each in a default and active state.

TheSans Regular and Extra Bold from Lucas Fonts are used as fonts. In order to achieve good scalability, I designed a typographic scale so that the rhythm and contrast of the font sizes appear harmonious. We carried out extensive tests for this until we found the optimal solution.

Role: Creative Direction, UI Design
Tools: Sketch, Illustrator, Photoshop, Principle, After Effects

dark-mode-1-1
dark-mode-2
dark-mode-3
icon
typografie
farben

Prototyping and testing phase

After initial internal tests with Lo-Fi prototypes, we presented a Hi-Fi prototype of the app to a selected user group for the first time in December. Most of the moderated tests (agency: eResult) were very positive. Above all, the design, the clarity and user-friendliness as well as the new features were received very positively.

Hand-off
Since the time to the launch of the app is very short, we worked in parallel in many areas. I made all released components and designs available in a style guide in Zeplin, so that the developers were able to develop the first app builds while the design and editing team was working on other features and sections of the app.

Conclusion: this was and still is a really fun job. And the client liked it so much that the design is currently being adapted for the website sportschau.de, which will be launched later this year.
Launch date for the app will be May, 2021.


Role: UI design, UX design
Tools: Sketch, Overflow, Zeplin

🐙

sketch-logo
icon-arrow-down
overflow-logo
icon-arrow-down
zeplin-logo
Instagram
Dribbble
Behance
Linkedin

©2022 Dino Franke