I worked closely with the brand team along with the app product designers to coordinate the rebrand for the Runtastic application. The project was broken down into the following categories:

‍

Colour

Colour was one of my core responsibilities during the brand alignment project. Alongside the brand design team we investigated alternatives to the existing primary brand colour of Blizzard Blue. To find the decide on the right colour we experimented with numerous colours and completed a few internal rounds of proposals and feedback. This then produced a short list of 3 different colour combinations. (pictured)

At this point user feedback was incorporated into the colour decision process by the form of a survey sent to existing users. The results from this survey were then balanced with the internal inputs from both the product and brand design teams to define the new brand colour.

‍

‍

During the final stages of selecting the primary brand colour my attention also was focused on defining an app colour palette that would both speak the visual language of adidas and be well suited to the primary brand colour. A priority during this phase was to define a palette that was more accessible as the existing palette failed to incorporate shades. Only having a single colour option to choose from the UI often failed the required WAG guidelines deserved by our users.

‍

TYPOGRAPHY & IConography

In the brand alignment phase, Typography and Iconography was another key area in which we could take a step closer to the styles of adidas. I alongside another designer was involved in creating numerous concepts, creating a more unique interface by transitioning away from system fonts, replacing these with adidas' own typefaces that are used across their physical and mobile experiences.

‍

Shapes and visual patterns

Historically the interface of the Runtastic application has been lively and friendly. Bright vibrant colours, coupled with soft, rounded edges across all components achieved this. In comparison the visual language of adidas' digital experiences is built from very harsh shapes, with perpendicular edges giving a modern but colder look in comparison.

This no doubt works for fashion and shopping experiences but after experimentation and consideration it was clear that applying the same principles would not work for the Runtastic application. This meant the rebrand was launched without many major changes to the geometry of the application.

‍

Design System

Before the rebrand the Runtastic Lego design system existed in Sketch & Abstract. Due to the changes affecting colour, typography and many other visual patterns it was clear that the existing design system would need an overhaul. During the course of the rebrand project the following was completed:

• Defined the key purpose for each component, to reduce duplication and to promote clear usage conventions
• Rebuilt entire design library in Figma, reducing the size and complexity of the existing system
• Migrated existing Sketch files and rebuilt primary screens within Figma

‍

Mitigating negative feelings

During the project it was important to be as user centric as possible when making changes to the Runtastic application. The main priority was to minimise any negative feelings existing users may have about the rebrand. Through investigations into the users it was clear the existing Runtastic brand sits close to many users hearts, especially in the DACH region. Additionally we observed feedback from users showing distrust around a larger corporation such as adidas owning the app, with users concern how their data may be used. It was clear there was some work needed to mitigate these potential negative feelings. We took the follow steps to reduce these concerns by:

• Communicate the benefits - Previously a proportion of revenue was generated through in-app advertisements. Having closer ties to the adidas brand meant we could remove 3rd party ads from the application leading to a more pleasurable experience for users.
• Create excitement - Collaboration with the brand, CRM and marketing teams created an opportunity to build a exciting story around the rebrand. In the weeks leading up to the rebrand going live a campaign drop hints about the future changes happening.
• Celebrate the rebrand - Coinciding with the rebrand launch was the 2019 Berlin Marathon. During the race weekend a series of events hosted by adidas Running took place, giving back to the running community and existing Runtastic users. This was coupled by a Virtual Challenge for our users to participate in app around the globe.

What was achieved

In September 2019, after 3 months of hard work, the new adidas Running branding went live, to a largely positive reception from both users and press. In this time we'd manage to completely define & transform the Runtastic app into its new identity, adidas Running. Here's a few achievements:

• In the months following brand alignment, the adidas Running reached a new record in monthly active users (MAU)
• The rebrand was a finalist in the Shorty Awards
• Since the alignment many other adidas related benefits can be enjoyed by users, such as Creators Club, a loyalty scheme allowing users to collect rewards for their fitness activities and purchases

What I Learnt

The Importance of team collaboration - With the rebranding involving so many different teams across the company I really learnt the power of good collaboration & communication and how this has ability to increase the velocity of projects.

Provide alternatives when removing functionality - The removal of any functionality is always a hard choice to make and often leads to genuine upset from users. During this project a decision was taken by management to fade out the Runtastic web functionality. Sadly users expected a greater amount of warning of this happening. I also believe some opportunities to reduce this friction by offering alternatives to meet their needs were missed. This has served as an important lesson when handling the removal of any functionality since.

‍