OVERVIEW
In this case study I will go through my design process of creating a responsive landing page for Tourism Nova Scotia using rebranded assets, a new layout, and you will see how I turned this project around in only 2 days, from the first iteration to the final product and the published site that is currently live.
PROJECT DURATION
2 days
PRODUCT
Responsive Landing Page for Tourism Nova Scotia
ROLE
IA & Wireframing
Prototyping
UI Design
Client Presentation
THE TASK AT HAND
THE CHALLENGE
The DDB team was in the midst of developing a new novascotia.com site, but the DoMore Campaign wasn't quite ready, as it wouldn't be launched for another couple of months. Because of this, I was tasked with creating an alternative place for consumers to land until it was ready to launch.
THE GOAL
The main goal was to create a one-page responsive landing page for the 2019 "Do More" campaign. The landing page needed to emulate the campaign by showcasing a breadth of things to do while visiting Nova Scotia to inspire consumers to want to explore more.
DELIVERABLES
I needed to create a mobile and desktop friendly landing page for North America in English and French, include content from Top 25 attractions, Must Do Experiences, Good Cheer Trail, Top Places to Wake Up By the Ocean. Instagram photos from CrowdRiff, and to feature a DDB campaign video to present to the clients the following day.
FIRST STEPS
PUTTING THE PIECES IN PLACE
Once the project brief meeting was completed and I understood the requirements, I immediately retrieved all assets I could use from my colleague to get this project going quickly. I opened all the sketch files to get an overview of what assets I had to work with, then I went to the original site to see what links went to where and to make sure I was building this new page with the proper information.
Once I had a thorough understanding of all the elements, the asks, and the informational material that was required, I began to lay the page out for the Desktop version. Normally I would have built the mobile version first, but in this case I built the desktop version first for a couple reasons. First I needed to present a desktop version to the clients the following day and second, desktop usership of this website is much higher than on mobile, so it's more important that this version is perfected. (People tend to research and book trips using their computers more than their phones. I found this information out through assisting in user testing for an information architecture project for Tourism Nova Scotia)
I quickly started placing all of the pieces together to build this landing page. I started with the most valuable sections that would be the most important and eye-catching to the users and built it from the top down. This version is the first iteration of the Do More landing page.
FIRST CLIENT REVIEW
After asking for feedback from colleagues and getting approval from my leader I prepared to present my design to the clients over a remote skype session. The Client was happy with the overall look and feel of the first iteration but they also gave me some additional asks once the presentation was complete.
The additional requests were:
-
a Tourism Nova Scotia Logo in the hero portion of the page and to have the promo video that automatically plays upon entry to the site beside it
-
3 more specific attraction links the Top 25 Attractions section, and to implement a list of images that specifically pertained to each attraction (They sent me their image list and I downloaded the images from their cloud and applied them into the corresponding cards)
-
a section highlighting the Good Cheer Trail
I addressed all the asks and worked with a copywriter to get the proper wording down for each section. I completed the desktop version and then began to build the mobile version. Here are the links to the completed landing pages for desktop and mobile.
FINAL CLIENT REVIEW
After addressing all the client asks and building the mobile version I prepared for the second round of client reviews. The clients were really happy with the look and feel of both the desktop and mobile version. They sent me a small logo they wanted to add to the footer, which I implemented and took the design the the developer. I walked him through the design and what I did, what the client was also asking for and let him do his thing. Click on the link below to connect to the live site.
THANKS
Thank you for reading about how I created the Do More landing page campaign for Tourism Nova Scotia. I hope you enjoyed the read and learning about my process in building this and publishing it within a quick turnaround time. Maybe you'll even be inspired to take your next trip out to the beautiful east coast of Canada!