Scandic Hotels. Connecting Teams and Branding Across Platforms

Scandic’s design system was a giant — and not always in a good way. It had grown over several years without a solid foundation, and as a result, inconsistency piled up fast.

Art Director, UX Design
Scandic Hotels
Android, E-Commerce, iOS, TV, WiFi
Brand, Design System, Product Design


When I joined Scandic Hotels, both UI designers had just left, and I found myself alone. It was daunting — but also a rare opportunity. I had a clean slate, and I decided to rebuild the system from the ground up.

One of the hardest projects start, was definitely Scandic Hotels.


Problem:

The design was in mess. There were two style guides for the web under two links made by two different persons. The app was disconnected from the web. Before me Scandic had 2 UI and 2 UX designers. 1 UI and 1 UX for each platform. Everyone was focused on their work so shared features and the brand implementation was suffering.

At that time Scandic was making designs with Sketch app that was making things even harder to collaborate.


Approach

Needed to understand where the problem was and why the app looks so much different even on iOS and Android. There was no 1 source of truth. Since I was the only UI designer at that time I decided to bridge design with tools that devs know. We were all working in Jira so that was the most logical place and tool to work with.

Besides that, I have printed all app pages and template pages for the web and put them on one large wall in the developer’s area. That brought me and everyone else closer to the team.

First I have started pointing problems to the project owners and design leads what are inconsistencies, low-hanging fruits, and what can help us make the brand more coherent. After some time I started sawing conversations even without me where developers bringing each other to the wall and start pointing what is done one and platform and can be done on another. In the end, developers started calling me to come to the wall as they figured out what can be done more.

App Color Pallete when I got the project
Travelnews.se – Sweden’s best hotel site award 2021


Colors Cleanup Process

What we want to achieve:

  • Less resources spent on designing for 3rd parties
  • Easier to onboard new team members
  • Faster to use
  • Alignment with the brand
  • Introduce a scalable naming convention
  • Easier tracking accessibility
  • Better performance using less code
  • Less money spent on optimisation


Creating Design System.
For teams not just for me.

One of the best games for involving an entire team that I have learned on one of the InVision Workshops was print and slice.

Needed to investigate first how the entire team sees the design system and what was their logic what is element, component, template and where do they think that fits.

  1. The first thing you need to do is to print all the template pages.
  2. Split team into groups of 4-5 people
  3. Tell them to slice elements with scissors
  4. The group under four categories that they need to name by themself


Connect designers & developers.

One of the biggest challenges was the disconnect between designers and developers — they sat in separate rooms and barely spoke. Designers were often hesitant to approach developers, especially without coding knowledge.

To break that barrier, I printed every screen from the app and website and pinned them to a shared wall. Then I invited both teams to walk through the work together. That wall quickly became a bridge — sparking casual conversations and real collaboration.

After all, a design system isn’t something customers ever see directly. What they experience is the final product — the code, not the Figma files. That’s why connecting design and development was critical to making the system real.


After Each update be sure to test it, and test it well.

Once we made any components update we needed to validate it that we have done a good job. The best way is to create user testings and check it if there is something new that popups up as a problem.

If everything goes smooth you are ready for release.

The easies way is to create prototypes in figma or principle app and plug it to the phone.


If you don’t talk about it, nobody will know.

Presenting meetings-room project

The most important part of any design system isn’t just building it — it’s advocating for it. You have to share, explain, and keep it visible so others can understand its value and use it with confidence.

  • What is it
  • Value that it has
  • Changes/updates you have done
  • What is the next step and why


Enjoying the fruits of your hard work. Rewards.

It takes time to build a solid foundation — but once it’s in place, the results start to show.

🏆 Scandic Web von 2 years in a row.
Travelnews.se – Sweden’s best hotel site award

Travelnews.se – Sweden’s best hotel site award 2020
Travelnews.se – Sweden’s best hotel site award 2021


🏆 Scandic App rised rating on App store

Before I have joined Scandic team
Today