BACKGROUND / CONCEPT

Role: UI/UX Designer 

Softwares: Adobe XD, Photoshop, Illustrator

Goal: To create an engaging brand campaign that promotes tourism in Hawaii to more niche audience.

Tourism and vacationing have always been a huge commodity in Hawaii, because of its unique culture and breathtaking beaches and oceans. However, thrill seekers and adventurers have come to realize that there are many wonders to be explored on the various islands that are more beautiful than a packed beach. The opportunity with this campaign was to design a simple site that helped showcase some of these unknown areas such as hikes, viewpoints, lakes/caves and waterfalls.

PROCESS

Audience

Today’s youth seem to have a larger desire to go and experience the worlds beautiful locations. With that, social media, photography and traveling in general have increased significantly in popularity and beautiful destinations like these become “bucket list” locations to visit. Since there aren’t any specific resources on the story and exact directions to these places as they tend to be off the beaten path, this campaign will aim to cover that information. I started with writing out a user persona in early stages of brainstorming.

Persona

“The backpacker”

Jacob Reed
  • 24 years old
  • Adventure/thrill seeker
  • Well-travelled
  • Hobbyist hiker and photographer
  • Tends to avoid tours but still loves to hear about history and loves getting lost in his surroundings
  • Large vacations at fancy hotels and tours/expeditions are out of his price point but isn’t going to let that stop him from traveling

Because he is a traveller and photographer, we can anticipate his appreciation and love for storytelling. The simplicity of the site could be percieved as an app-like interface that flows like a book with each location as a chapter.

person

Wireframes & Interface Design

My vision for the navigation and design was to keep the interface very simple focusing on one element at a time and minimal scrolling and no unnecessary clicking. I wanted the site to be perceived as if it were an app because, while some may find the website on desktop, the purpose of reading the relevant information on each spot would most likely be searched for while on a mobile phone. The site is static, so to make it feel like a book/brochure I thought was unique. The wireframes I produced were focused on mobile since that is the primary platform the site would be viewed. I did design the web version to act like a slideshow in a way that is is different than mobile. The interface was crafted by carefully selcting fonts and images I felt best captivated the audience of ambitious and adventurous travellers. 

roam hawaii web wireframe

Decluttering

A popular UX goal today is removing visual clutter and prioritizing information by putting content first. Stripping away all the visual clutter I felt helped entice the user to be captivated by the photos.

Full Screen Experience

With new devices offering frameless design, and the focus of Roam Hawaii on having quality assets as background imagery help deepen user expectations and really accentuate the landscapes being displayed.

Moodboard & Typography

Before I got into any sort of wireframing and navigation and layout, I wanted to determine a theme and visual style for the campaign. The photos that helped paint a picture for me were adventurous, gorgeous landscapes and the to me, symbolized the thrill of getting lost.

For the typography, I chose Raleway as the word mark and body text as it is very easy to read and quite versatile. I varied the font weights and letter spacing as well. For the header text I chose Playfair Display as it gave the simplicity of the design some contrast. 

Roam Hawaii moodboard

FINAL

Reflecting on the final design, I was happy with the ease of use of the interface. Because of the uniqueness of the campaign, and deciding early on to make it react like a book or app, I hope the audience this is designed for would see this as a beneficial site to stumble upon. I just wish if I had more time, that I could test different layouts or images and expand the rest of the site offerings. 

Additionally, I created a short version prototype in Adobe XD to show a general display and functionality of how the site would be used on a mobile device and how it would be viewed on the different screen resolutions.