Sandcastle

Sandcastle was the new Design System created in-house for Dnata brands in 2016.

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. It is a series of components that can be reused in different combinations.

It contains the brands' style guide, products layout, rules, modules and their code and helps all brands to be consistent.

The Design System is used by Designers, Developers and 3rd Parties to guide and support when using the Dnata Brands and to keep it consistent across products.

A design system plays a crucial role in bridging the gap between the UX (User Experience) and development teams in a traveling company that has websites and apps.

MY ROLE

Creating their first TR Styleguide - 2015/2016
Creating second TR Styleguide - 2017
Designing brand concepts
Creating Logo
Creating the UI for Design System Library

Creating the Artwork for Homepage
Creating the UI for internal newsletter
Assisting developers to built the mockups and the existing components
Providing support and design quality control

TOOLS

THE COMPANY

Travel Republic is one of the UK’s largest low cost online travel agents. They are part of the dnata Travel Group and the Emirates Group, providing holidays, hotels, flights, attractions and travel extras.

THE PROBLEM

THE SOLUTION

SOLUTION

Design Process

Discovery

FIRST STYLE-GUIDE - 2015/2016

As the first designer hired in the newly created UX Team, I noticed they didn't have a style guide or any spec to communicate Design vision, principles, rules or guidance to new designers and developers in the company.

Once I created and developed a new visual language and elements for their products, I expressed the importance to have a single source of truth and guidance for both design and developer teams, and 3rd parties.

I suggested creating their first Style guide as I already had experience creating design specs for other companies.

In this style guide I created and specified:

AA Colour palette
Typography rules and hierarchy
New iconography and rules
Form and input elements and states
Buttons colour, hierarchy, states, and measurements
Hero and images rules and spec
Modules spec
Grides and Margins

This was the ideal starting point to develop the brand even further, but unfortunately, developers were not using it as requested creating an inconsistency or designing their own elements.

Define

TEAMS NEEDS

Some key reasons why a design system would help the communication issue between the design and development team:

Overall, a design system serves as a crucial link between the UX and development teams, promoting collaboration, consistency, efficiency, and scalability. It ensures a seamless user experience across websites and apps, ultimately leading to improved customer satisfaction and business success for the traveling company.

Ideate

During the ideation, development team decided to name the new design system Sandcastle, as it related to travel and building.

CONCEPTS & BRANDING

My first task was to create a logo, with my flat illustration skills, I decided to create a sandcastle Flat outline Design logo.

Once we had the logo approved by the team, I moved forward creating a few concepts to define the colour palette and style.

I created 3 concepts with a small color palette variation between them to match with the logo style.

The team decided on the concept number 3.

Based on the colour palette and style chosen, I could use it as the starting point to design the Homepage and Newsletter E-mails.

Prototype

MOCK UPS

Using the chosen colour palette and style, I started creating the Illustrations for the hero of the Homepage.

I decided to add the mascot I created for onboard and error pages illustrations and animations on the TR App. The crab mascot illustrations and animations I created for onboard and error pages on the TR App was so well received by the whole office, that I decided to add it to the homepage.

The mock ups below are the website and the newsletter.

ANIMATION

Once the homepage was developed, we started animating a few bits as you can see in the video below.

THE DESIGN SYSTEM

After the deliverables above, the design system already had all basic content for developers to start populating the framework.

Conclusion

After all the content was added, we had as next steps, add the transitions to a few modules, and a research survey for our iconography, to discover if the users understand our icons semiotic.

The new Design System helped all Front End Developers and new Designers to build pages faster, containing reusable and consistent modules they could just copy and past in pages based on our Mock ups or prototypes.

It helped across-teams to communicate the brand clearly, and also an easy to use guideline to be shared with third-party companies.