Contentainment – dufry
year // 2018
role // Lead Product Digital Designer / UX Designer / Brand Designer
client // Dufry
duration // 6 months
Sketch / InVision / Illustrator / Animate CC / After Effect / Premiere Pro
/ Website Overview
Discover / Brief
Contentainment is a Dufry company that create and manage the experiences inside Dufry’s retail spaces in the airports. They needed to have a showcase website for their high-end clients to work as a pre-login of their portal. This website had to express their values and to advertise all their services and their work to new and existing clients.
On top of this they needed complete rebranding.
Discover / Research
Contentainment is a dynamic company like the experience that they create are. The first step to create a proper expression of this company on their website (and to create their branding too) was to understand and embrace this culture of dynamism to create catching and memorable experience for a variety of users from big brands. I reviewed media material from their best and latest work for each service they provided (photo and video) and I also manage to experience one of the latest interactive attractions in person. With a better understanding in mind, I was able to interview people from their small team to both get further understanding and validate my vision.
When company understanding was clear and validated I was able to create a simple and clear user journey and to research and match the latest website interactive technologies to our message to users. During this process and with this research I was able to understand the core value of the company and reflect them into their branding.
Create an interactive, simple to use and highly attractive pre-login webpage also with a simple CMS and structure manageable by the client.
/ Landing page
Define / Strategy
To deliver an outstanding product to our client and a catching experience to their users I had decided to first set the moods and themes to use throughout the whole creation. I planned to do this by creating a series of mood boards and video presentations to express my vision and, by simply adjusting them to client’s feedback, get the client on board with the general idea before showing any mockup.
As since the beginning the main clear theme was interactivity, I used a selection of existing website and custom made interactive animation to get feedback and reactions from client and users and so easily narrow down the right elements to use.
After this, throughout a series of animated and interactive prototypes, I was able to get a quick sign off to start development.
Define / Concept
Because this product was going to be used mainly as a pre-login website by the users I knew it was imperative to be an attractive, catching and simple to navigate one-page website. Studied the old, unused website and understood the client requirements the website naturally divided itself into 5 sections: intro, what, where, when and contact, all of them with animated interactive elements to amplify the whole “WOW” effect.
/ What page
Design / Solution
Thanks to a proper understanding of Contentainment’s culture and values, I deliver their message to new and existing clients through their new website and new brand identity.
/ When page
Design / Solution – Website
To embrace and reflect this dynamism into the online presentation to new and existing clients, I focused this website on the simplicity of functions with strong use of animations to express the company effort to design experiences. The website does improve and simplify the old website’s content structure by reducing information and placing them on a single page, to encourage even more the user to navigate the content before logging into the portal.
It is composed by an intro section that hosts a playable background video presentation, followed by a section with various services provided by the company, a calendar with the best date to book a space and at last an about section with the team.
/ Contact Page
Design / Solution –
I designed the new Contentainment logo starting from an idea of interaction and interactivity that expands its boundaries to create a unifying experience compared to an explosion in strength, boldness, and colours ( like a colourful firework explosion) that resemble the aimed outcome of the whole variety of services provided by the company.
This new logo it’s a geometric shape composed by the connection of dots, that does mimic the explosion (and expansion) from the center to the outside, and so dynamism e movement, this dots represent all the many aspects (and services) that the company can manage and also it does mimic brain connection so life, vitality, and focus.
This pictogram can be used by itself or together with the logotype (also usable by itself), the last one has two variations,
an extended horizontal one, and a vertical more compact version, this allows easier use of the logo together with the long name of the company and extra balance and stability to the pictogram. This pictogram and logotype can be either used in black and white or with a defined palette of flat bold colours or also as a mask for images.
Local Government and Social Care Ombudsman
A 7 phases project to simplify the citizen’s experience in complaining about a public authority.
A new live portal and tool for NBC Sports International to share and promote their titles and create instantly a custom PDF presentation.
A new website for Bull’s Eye for it’s arrival into the European Market.