Hong Kong: Beyond Hollywood— UI Case Study

Tourism Campaign and Responsive Website

The Task Brief

The travel and tourism industry is one of the world’s largest and fastest growing industries with a global economic contribution of almost 7.6 trillion U.S. dollars in 2014. Countries recognize the exponential benefits in their economies by boosting their tourism efforts. At the same time, it also serves as a great platform for them to establish their own brand identity and place in the world. The digital era has only upped the ante on this competitive and high stakes industry. Today, designers have more at their arsenal in creating experiences and showcasing their country even before they step into the airport. The visual communication, impact and design of a website can either make or break that positive and strong first impression of your brand. Now more than ever, merging meaningful content with experiential design stand as one of the biggest challenges for designers.

Project Goals

1. Build an engaging and impactful brand campaign that promotes tourism on the country/area and target audience you selected.

2. Create a strong visual brand identity and a responsive website creating engaging, impactful and well designed experience for the users and optimized to meet business goals.

3. Establish a consistent visual identity that carries through different marketing and promotional materials.

4. Create a logo for the campaign that captures the direction, mood, tone and audience you will be capturing.

Project duration: 3 weeks (individual project)

Key Deliverables:

• Create 2 art directions, and pursue only one of them

• Style Guide, including 1 logo

• Social media and display ads

• Merchandise to show application of visual brand identity

• Key web design pages mocked up for mobile and desktop

The Opportunity: Hong Kong

The opportunity is to create an extraordinary tourism campaign for the city of Hong Kong. I chose Hong Kong as it is one of the cities I am most familiar with. I have lived there for over 10 years and it is a city that has so much to offer and explore. It’s a vibrant city both day and night and it has a mix of both old and new, traditional and modern, and a mix of Chinese and Western culture. Hong Kong is known as an international financial centre in the world but it is also one of the most popular Hollywood film locations in the world. I wanted to harness this aspect of HK and bring out it’s potential as an exciting and new kind of campaign. My goal is to bring HK to an international level and bring the East to the West as opposed to doing an American city through American films. I want to create a tourism campaign and website that is far from a typical tourism website by showcasing Hong Kong through a different lens, that is, through the lens of different major Hollywood blockbusters.

I recorded, trimmed, merged, and edited clips selected from different movies that had scenes that were shot in Hong Kong. Movies I picked were famous and more recent Hollywood blockbusters that are familiar to my target audience, including Ghost in the Shell (2017), Transformers: Age of Extinction (2014), The Dark Knight (2008), Tomb Raider (2018), Pacific Rim (2013).

Target Audience

My target audience are movie buffs/fans /enthusiasts, frequent movie goers who are mostly Caucasians and Hispanics aged 25 to 39. They are both male and female and they watch about 4–7 movies a year. [data based on North American MPAA (US/Canada) statistics]

Design Process

The “Why”

The Western target audience I mentioned above is fascinated by the Oriental or Eastern culture and would find the idea of visiting movie locations an exciting experience. Walking in the footsteps of their favourite movie characters and reliving the fantasy in real life is a thrilling experience I want my website and tourism campaign to encompass. I want my audience to see HK behind the scenes as there is more to HK than meets the eye. Therefore, my “why” is:

“To see Hong Kong from a different angle and experience the fantasy in real life.”

Moodboards

This moodboard is one of two art directions I had in mind for my website and campaign. The mood of this one is more traditional, serene, colours are brighter and pastel, the atmosphere is light-hearted, charming, and mimics day time exploration of Hong Kong. The design is very light and minimal.

The second art direction above is more edgy, modern, sleek, cinematic and like a widescreen experience, it is scenic, picturesque, highly visual and impactful, epic, exciting & thrilling, action-packed, adventurous and immersive. This mood is more heavy with lots of cinematic footage and photos that have dark filter overlays to mimic the cinematic screen. It also feels like it is a night time exploration of Hong Kong and this city that never sleeps is known for it’s awesome night life. This is the art direction I have chosen to move forward with.

Visual Language

Colours: neon, sharp, high contrast, dark tones, black, white, red. I want to put the user in a mood where they feel like they’re inside a theatre and enjoying a good show. There needs to be high contrast of colours against a moving animation background as the design will be busy with movie footage playing in the background. Red would be used as an accent colour and the rest of the UI elements are predominantly white.

Shapes: I wanted my UI elements including CTA buttons and the typeface to be sharp, rectangular, thin, edgy and very modern, simple, minimal, clean and san serif.

Space: I wanted my space to imitate a cinema screen frame, have a widescreen view or look like a recording camera screen. The space would be heavy with imagery, photos, and footage and the images would span all across the page like a full width banner to create a more fully immersive and seamless experience. I wanted my space to be unconfined and free from any containment.

Movement: The movement would be exciting, dynamic, and have a natural shaky camera feel. It is definitely fast paced, glitchy and somewhat like found footage.

Interface design inspiration

I wanted my website interface to resemble that of a typical recording camera screen interface. In my final prototype, my navigation, buttons, and iconography was arranged vertically and horizontally on the sides of the screen to resemble the interface shown below.

Style Tile

Above is my initial style tile. I started off with four colours and two different typefaces for the header and body, Gotham and Titillium Web. I simplified the colour palette down to just two colours: red accent colour and classic white. I did this in order to keep the website clean and simple as the design is quite busy already. I picked high contrasting colours against a dark and moving background footage for easier readability. Red is a popular and classic colour in Chinese culture and symbolizes happiness, fortune, prosperity and luck.

In the end, I used one typeface which is Titillium Web, available on Google Fonts, for both the body text and headers as it is a very versatile and modernistic sans serif font. It is a clean, minimal yet very modern typeface that I felt best suited the aesthetic of my UI library.

Icons were taken from the Noun Project with some modifications I made. I used icons wherever I could replace words so as to minimize the number of text and clutter on the screens so that the usability would be more visual than text heavy. Iconography was carefully chosen as they are all thin outlines with no solid fill. There are only a few variations of the logo, one in black and white and ones without the text and slogan at the bottom.

Final Style Guide

Below is the final style guide that would act as a UI library to ensure consistency across all designs and applications of the Hong Kong: Beyond Hollywood brand. Ideally, every possible element needed for the app is present in the style or brand guide so passing this on to another designer should be a seamless process.