Scandic Hotels Cross Platforms

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

You need to understand that the Scandic system is a giant. And it was in place for several years. When the design system is not well organized in the root, the mess is just piling. When I came to the Scandic Hotels both of the UI designers left Scandic, and I left alone. That was scary and good at the same time. I had the opportunity to make a clean slate and I took it.

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.

Solution:

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.

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

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

After teams are done you will have a clear picture what is team's view of where items should be placed and how they should be named.

This Workshop will help you create a common language between your team.

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.

Prototypes

Nobody will know if you don't talk about it

The most important thing is to advocate it.

You need to constantly nurture it and inform company:

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

Rewards

After hard work effort was noticeable by others as well.

Scandic Web von 2 years in a row (Travelnews.se - Sweden's best hotel site award )

Scandic App rised rating on App store