Getting the brand back together: a product manager’s perspective
In September 2019, Skyscanner refreshed its brand, the result of a huge company-wide effort; in this post Andrea Sipos tells the story of the refresh — and talks about the lessons she learnt along the way
In this blog-post, I would like to tell the story of Skyscanner’s brand refresh from the perspective of a product manager. I will summarise what we did, what happened, what we learned, and where luck played a role in what happened. My hope is that this post will help other project managers out there with their own challenges around rolling out a new identity at scale.
A system for prioritisation
Our brand refresh project started almost two years ago, when we commissioned our very first ‘brand perception’ studies, but things really started to speed up at the beginning of this year.
Originally we planned to release the new branding only on so-called ‘red routes’ inside our product; these routes included most of our apps and the main user flows on web. Teams who owned parts of the red routes allocated time to brand refresh work in their goal-planning processes at the beginning of the year. However, early on in the timeline we made our first pivot of the brand refresh: we abandoned the red route system and made the decision to launch the new branding everywhere — on every page and element in the app, on every site which we own, and on every user interface (UI).
We also introduced a different prioritisation system: all areas and elements marked as P0 had to be ready by a set launch date, while P1 areas could be handled later. This prioritisation was used mostly for making sure we were able to support all the teams responsible for P0 areas and make sure they had all the resources they needed.
On track for success
After we pivoted away from the ‘red route’ delivery model, we had to come up with a new framework for tracking our progress. So we developed three separate delivery tracks with clear goals:
- Track 1 – ensuring we could switch on the new brand across the whole product, using Skyscanner’s ‘Backpack’ design system wherever possible
- Track 2 — delivering our ability to ship the new logo everywhere at once
- Track 3 — making low risk/low cost improvements. Adding product and layout changes to showcase the new brand even more
Before we adopted this three-track system our design team were facing a tricky blocker: the task of defining what would be released was tied up with the way in which the new branding would be implemented. The three track model effectively dealt with this blocker because it helped us see that we would use Backpack (our design system) to switch on the new brand, and would need teams to work on maximising Backpack adoption internally; in the meantime, the design team could get on with doing what they do best: designing things.
Wait, what’s Backpack?
Backpack is Skyscanner’s design system, and it allows us to build consistent and coherent UIs using pre-built components and tokens. If we need to build a new page — for example a page with text, buttons and maybe a modal — we don’t need to write all these elements from scratch — instead we can import them from Backpack. Instead of dealing with visual decisions, we can focus on how that piece of UI will help our travellers.
Backpack has the capability to apply different themes to change the style of our components (this was originally added to support partner branding initiatives). This was exactly what we needed to release the new branding: the ability to change colours and typefaces by flicking a central switch. The Backpack squad worked on extending this ability to all the components we had, while teams across the business were enjoined to start using Backpack wherever possible in order to facilitate the refresh.
We measured the progress of these teams with a metric we called ‘Backpack coverage’, which reflected the extent to which the design system was being utilised across a range of product screens. Since we did not have the new branding finalised at this stage, we activated outrageous dummy brands (for internal eyes only) to record this metric. These dummy brand tests resulted in funny and incredibly useful versions of the product being saved for posterity:
At first, measuring ‘Backpack coverage’ was done manually. We had to go through all of our product screens, turn on the dummy theme and count how many elements were able to apply it. After we decided to refresh our brand everywhere at once we automated the process of measuring Backpack coverage in the web-based parts of our product, but in-app coverage continued to be measured ‘by eye’.
41 Teams and a big July for Backpack
Skyscanner team members worked really hard to wire our design system into our product. In July, Backpack coverage went up from 50% to 90% - a huge achievement. This was the result of hard work by no fewer than 41 teams!
When we started to think about how to coordinate and report on our progress, we looked at the work of the teams responsible for Skyscanner’s recent successful AWS migration for inspiration.
We set up a weekly meeting for representatives of all of the teams involved in the project to report on the status of their work and identify what, if anything, was blocking their progress. Once the meeting was over, we took the information and started tackling any blockers. Once a team had completed its implementation work, its representatives no longer had to attend the regular meetings.
An experimental call-to-action
By the end of July, we had almost done the enablement work needed to ‘switch on’ the new branding. We were able to turn on the new colours and typeface on all platforms. We were now given licence to run experiments with all of the elements of the new branding except the new logo (which would be revealed only on the day of the launch).
The goal of our experiments was to understand how and in what ways the new branding might affect the ways travellers interacted with our products. We ran 16 cross-platform experiments to figure out what we might expect on launch day and beyond — starting with the new call-to-action (CTA) style. We knew from experience that changing a call-to-action could make a big difference to the number of people taking action, which would obviously have a harmful business impact.
The very first CTA experiments we ran were encouraging; we did not detect any negative impact on critical business metrics. This was not in line with what we had hypothesised and so we re-ran experiments in some cases to see if we could replicate the outcomes of our initial experiments.
Next we launched experiments in which we tested the new brand colours and typography. None of these were seen to negatively impact our business-critical metrics and we were free to move forward.
Marked top secret: our new logo
As I mentioned above, our second project ‘track’ was dedicated to ensuring that we could simultaneously and instantly ‘ship’ our new logo everywhere it needed to go. We had to make sure we would be able to change the logo easily on launch day, as this part of the switch-over would be the most prominent aspect of our brand refresh. To understand the challenge in front of us, we carried out a logo audit with the help of teams across the business — and based on the information we gathered we came up with a plan to ensure we could unveil the new logo everywhere at once on launch day without leaking it ahead of time.
Project Sparkle
The launch date was finalised at the beginning of August: the new branding would appear on September 24.
By the end of July, we were almost completely ready for the switch-over. A meeting with our leadership team to review screens with the new branding confirmed it was time to focus on track three: making product and layout changes to showcase the new brand even more. We were challenged to add “more sparkle” to the refreshed product, and that gave rise to the codename for this stage of the work: ‘Project Sparkle’.
The goal of Project Sparkle, as I have said, was to find more ways to embed the new branding within the product — and within the project we looked separately at how best to do this in our apps versus on the web.
For various reasons we had more scope to make changes inside our apps. The Skyscanner design team planned a bolder, more consistent, more clear look for iOS and Android, and the differences between what was current at that time and what was proposed were quite pronounced!
The changes were implemented, in a two-week period, by a single large and hardworking Skyscanner squad; this had a very positive effect on the process and also on the result. Crucial decisions were made within a single team, whose members coordinated the work among themselves and were able to give feedback or ask questions directly to the design team without having to go through intermediaries.
Although our plans for the web-based parts of our product were less bold, our goal was the same: to improve the overall experience, make it more consistent, deliver ‘delightful moments’, and showcase the new brand as much as possible. There were components that we knew we wanted to see across all our verticals: the flare, the new imagery in the search controls, the new confidence panel illustrations and text, the new inspiration shelf style and/or our new tagline.
The main question with all of these improvements was whether or not — and how much — they would affect our travellers’ interactions with Skyscanner. The approach we took was to pick the changes which we intuited were riskier, run experiments where we implemented the upgrades solely within our Flights product — and implement them across all of our verticals if those experiments were successful.
We get it, change is hard
Our own experience and widely documented industry case studies told us that users can be repulsed by a redesign. Not all people like change, and this is completely natural. We wanted to mitigate this effect as much as possible, so we built an in-product messaging component for web and apps, which highlighted the changes and offered interested travellers the chance to read more about our new identity on a dedicated page of our website.
Not as simple as pushing a button
Despite all our hard work, unveiling the new brand everywhere at once could still not be achieved simply by flipping a switch on launch day. Some parts of our product could not accommodate Backpack integration, for example.
We created a high-level release strategy by grouping the different elements of our product. We looked at dependencies, worked out what needed to be updated first, what could wait, and what could be done in parallel. Once this plan was finalised and agreed with all our team members, we had to map out which technical solutions would be used to update each part of our product — which switches would we need to flip exactly?
We asked teams to let us know if their parts of the product needed to be updated manually and we collected all the ‘config values’ we would need into a single document. In the days before the launch, we set up our A/B testing tool, Dr Jekyll, to enable it to implement the new branding on the majority of our web product.
The app roll-out was even trickier. The style of the app could be controlled via a configuration service, but assets like our app icons and splash screens had to be manually changed in the build and released on the day of the launch. The app release schedule was defined weeks before the brand launch, as it is a much longer process than on web. The last code freeze for the builds we rolled out were September 10 and September 16.
A few days before the launch the release candidate with all the new brand assets was submitted to the App Store. We asked for expedited review from Apple, a special procedure which would guarantee that the build with the new branding could be released on September 24. We weren’t able to do the same on Android, as we have a beta program whose members get access to all our builds prior to market release.
The big day
We had a ‘Green Light’ meeting with our leadership team on the Friday before the launch day and we confirmed exactly what would be released.
On launch day, September 24, we were at our desks by 7am and getting to work. We enabled the new brand across the product, tested and monitored events through Mixpanel, Google Analytics and social media and executed on our launch plan.
As expected, once the new brand was out ‘in the wild’ and available for general consumption, reports of issues started to come in. We set up Slack channels in advance where we could easily track reports. These reports (of problems) went through a triage process and we used a comprehensive JIRA dashboard to co-ordinate our responses during the long day that followed.
Risky business
During the brand refresh, we planned for the worst in all cases. We had ‘disaster meetings’, in which we tried to come up with awful scenarios and prepare for them in advance. We asked people to fill out pages with “their worst nightmares”. What happens if the logo leaks in advance? What happens if experiments show a huge drop in revenue? What happens if translations don’t arrive on time? How would we react if a huge news event dropped on the same day? It was an incredibly useful exercise, as once we talked about these questions, we were able to come up with ideas for fixes and mitigations.
What would I do differently now?
Everything we did was based on the best information we had available to us at the time, and yet, we learned a lot during the journey. With all that experience, I’d do a second brand refresh a little bit differently.
During the experimentation phase of the work I could see that we had not really given ourselves enough time to diagnose and fix any significant problems that the experiments might reveal. We also had a tough time fitting in the project experiments with our business’ ongoing weekly experimentation schedule. It felt like we were relying on too many things going right to achieve our objectives of being totally ready by the launch date and releasing the new branding in a responsible manner. So one learning was to start experimentation and map dependencies even earlier.
Additionally, our co-ordination for Project Sparkle was far from flawless, and that meant that we sometimes approached teams with redesign requests which were difficult for them to implement alongside their other goals; fortunately these teams were patient with us and worked incredibly hard to accommodate our requests.
What’s next?
Following the day of the launch we continued to monitor the impact of the new branding and this is something we will do so for some time to come. We have also been working hard on making the changes unveiled on launch day permanent within and across our product (where they weren’t already).
Overall, the brand refresh was a big success and we’ve had a huge positive reaction from travellers — and we couldn’t have achieved what we have done without the more than 41 teams within Skyscanner who worked so hard to bring our new branding to life. Thank you!
Further reading/useful links
- The GitHub page for Skyscanner’s Backpack design system
- Look at your product from a new perspective, a previous article by Andrea Sipos, published on Hacker Noon
- How we scaled our design system to unleash Skyscanner’s new brand, a technical look at our Backpack Design System by Shaun Donnelly of Skyscanner’s Backpack squad
Join the Skyscanner product management team
While the Skyscanner team may have grown to include more than 1200 amazing people, we’ve stayed true to our startup roots: we have worked hard to stay fast, agile, and when we fail, we fail forwards. Sixteen years after we were founded we’re still growing — if you’d like to help us soar even higher as we enter the next Skyscanner era, take a look at our open roles and get in touch. Entrepreneurial mindsets a must!
About the author: Andrea Sipos
My name is Andrea Sipos and I work as a Principal Product Manager at Skyscanner. I love to do research, dig into the details, discover hidden patterns and come up with solutions which make peoples’ lives easier. Currently I’m working on Skyscanner’s Design System called Backpack, previously I worked on the flight search experience in our apps. Outside of my work at Skyscanner, I love playing board and card games, reading or discovering places.
