Image for post
Image for post

We’ve been asked to promote a city of our choice representing the brand and campaign in a logo and website, translating the branding and visual identity throughout different marketing collaterals.

On this project I was working on my own taking charge of both UX & UI tasks.

Image for post
Image for post
Design of postcard to promote the capital in few images

I decided to focus on the city of Paris because no place in France is more special than the capital.
Moreover, my passion for arts and culture was calling for its museums and architectural landmarks, with the Louvre in the top most visited art museums in the world.

Tools: Photoshop, Illustrator, Sketch, InVision, Principle

Image for post
Image for post
Brief for the Tourism Campaign

A number of deliverables where included in this project, here’s a quick breakdown:

  • Two initial art direction, pursuing one of them for final presentation
  • Logo Guidelines
  • Typography and colours
  • Imagery and photography
  • Social media and diplay Ads for the website
  • Affinity Diagram
  • Moodboard
  • Style Tiles
  • Style Guide
  • Low fidelity wireframes
  • High fidelity mock up
  • Prototype of design(s)
  • Final presentation
Image for post
Image for post

The research process started with inception design and two different art directions. I decided to bring forward the one that was giving more relevance to couples that wanted to spend a romantic weekend in Paris instead of going camping in the countryside with friends. On this art direction the main keywords for the mood were: special, romantic, unique, safe and guided.
Colours with a low saturation combined the French flag with the mood.
Movement is slow and fluid with rounded and protective shapes.

Image for post
Image for post

The final Moodboard translate the inception design in visual elements helping visualising a first shape for the website. The sense of protection and uniqueness are emphasised in a calm space.

Image for post
Image for post
Affinity diagram with key elements and additional info on the user persona

The ideal user persona is young and wants to surprise his/her partner with a visit to the capital.
Pain points are not knowing the language or locals places and having to deal with a restrictive budget.
Final goals are to book online an all-inclusive experience to enjoy with their partner for the weekend.

Image for post
Image for post
Red sections highlight the elements of the menu while the blues are elements from the affinity diagram that I wanted to include in an additional nav bar

Site map highlight element that I wanted to include in the website such as booking process and call to actions to increase engagement during the user journey.

Image for post
Image for post
Research of visual elements: iconography, imagery and typography

Alongside the UX research I was looking for the perfect typeface that would translate the sophistication and heritage of Paris in words. A Serif font was the best choice, and I opted for Garamond considered a major figure in French printing of the sixteenth century.

Here you can see different ideas that were explored from buttons to icons, accompanied with floral patterns and Eiffel view.

Image for post
Image for post
Different sketches for the Logo: I brought forward the circled one on the right

To grab the user interest and engagement a logo about Paris was needed: it should have been simple, immediate and eye catching.

From the beginning I wanted to combine the name of the city with its iconic building, the Eiffel Tower.

Sketching with pen and paper was a good exercise to explore different directions before realising the final logo: a sleek shape adaptable for multiple purposes with or without the name of the city.

Image for post
Image for post
Polished logo realised in Illustrator
Image for post
Image for post
Desktop and mobile wireframe with call to action highlights

On this occasion, I had to create my own low fidelity wireframes including an ideal user journey for desktop and mobile experiences.
Elements that changed during the process were the visual presentation of the menu, for a modern appearance, and the support section that was rethought as an addition in the menu.
Booking process is always accessible at the end of the desktop version while is visible at the top in the mobile for an on-the-go experience and to facilitate navigation in another page.
Filters are adapted on the mobile version for a core experience.

To create the visual brand identity I worked on how to recreate the presence of Paris on social media like Facebook, on gadgets for users while visitings malls with shopping bags, and on ads banner to implement in different cities (parks, tubes, walk-paths etc.) to increase audience awareness and promote the website.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Multiple ads were created in Photoshop and translated in animated gifs with Principle

Through a guide in the prototype, you can access the main areas that interest the user such as the landing page, plan your visit, accommodations, hotel page, book a room and payment accepted page.

From the image below you can see the mobile prototype while the desktop version is visible at this link: https://invis.io/FYR8RKNHP4E#/354795199_Landing_Page

Image for post
Image for post
Mobile and Desktop prototype on Invision

This project was the perfect occasion to refine my skills as a UI and UX designer working in a city that intrigues me under every aspect. During a second review I would love to develop the areas that I couldn’t focus on for time contraint and bring to the next level the overall project.

Written by

UX/UI designer in London

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store