How might we encourage users to explore Ontario's provincial parks?
Team
Me - UI Designer
Erin Essex - Mentor
Timeline
10 weeks
Responsibilities
Wireframing, Protoyping, UI Design, Logo Design
Tools
Figma, Illustrator
Project Overview
​
Ontario is home to dozens of amazing provincial parks. Whether you're looking for a day trip out in nature with the family, or planning a backwoods camping adventure, there is so much to explore and do. I personally love hiking the trails around southern Ontario in the fall when the trees start to turn gorgeous shades of yellow and red. For this project I wanted to design an attractive and functional website to showcase the beautiful scenery of Ontario.
Problem Space
Park visitors want an easy way to find information on provincial parks near where they live so that they can be inspired to spend more time in nature.
At the time of this project, I found the existing website difficult to navigate. You can see below that the homepage lacks a clear CTA and the search page is overwhelming with a crowded map and a never-ending list of filters. It leaves a lot to be desired in both usability and aesthetics. I wanted my new design to encourage exploration so that users can discover parks that are nearby and provide an easy way to book campsites and activities.
In my design planning, I took inspiration from travel booking sites like Airbnb and TripAdvisor. These websites have made it very easy for the user to search and explore virtually any location for things to do and places to stay. The simple and friendly UI/UX has set the bar for websites that have booking and map search functionalities. My goal was to make the Ontario Parks website the go-to resource for planning travel to provincial parks.
I liked the idea of having an "Explore Nearby" section on the homepage like the Airbnb example above. I thought this would be a great one-click option for users to see what parks are closest to where they live.
I thought this page on TripAdvisor was effective due to the prominent imagery and the secondary navigation tabs along the top. The page is highly informative while also being clean and uncluttered.
Sketches
​
Before starting my design in Figma, I laid out my ideas on paper. As you can see below, I made several versions of the Find A Park page. I wanted to explore different ways of combining filter buttons, a park list, and a map view.
Wireframes
​
Homepage
For the hero section, I added an impactful headline and search bar, to be laid overtop a beautiful nature photo. Below the fold, I added the "Explore Nearby" section for a one-click shortcut to the nearest parks. Next is a row of content blocks for various activities such as hiking and paddling. Lastly, I added a "Latest News" section which is similar to what is on the existing homepage.
​
Find a Park page
I opted for placing the filters along the top, list view on the left and map view on the right. I felt it would be more visually helpful to show both the list and the map at the same time.
​
Park Page
This page starts off with a large photo, and the body content is organized into tabs below like a notebook. The main container on the left houses all the park information, and a separate box on the right contains the fields for booking a campsite or day pass and a large CTA button. In the hi-fidelity stage I tweaked the hero section a bit by enlarging the hero image even more and moving the Park Map and Gallery blocks further down the page.
Moodboard
​
My vision was to create a beautiful UI that was tranquil and naturalistic like the great outdoors. I also aimed for an invigorating quality that inspires a sense of wonder and adventure. Last but not least, I wanted an elegant look & feel that befits a government website.
​
During this process I started to establish a colour palette that evokes the Ontario Wilderness: cool-toned greens like pine trees and lake water, and burnt orange like campfires and sunsets.
Logo Design
​
As part of my UI redesign, I wanted to update the logo to compliment the new look and feel that I established with my moodboard. In my sketches I played around with trillium shapes (this is the official flower of Ontario) but I ended up choosing a loon for its ubiquitous presence on Ontario lakes and because it will differentiate itself from other government logos that already use the trillium motif.
​
For the loon design, I referenced one of my favourite Canadian artists, Ted Harrison, whose paintings depict Canadian scenes with bold linework and flat colours. I drew inspiration from retro-looking park badges for the shape of the shield container, and I paired the shield with a chunky serif typeface for a classic look.
UI Library
​
My UI library consists of components that follow the established colour palette of burnt orange and pine green. I also added a range of neutrals from a warm off-white to a deep charcoal for text and backgrounds. For typography, I chose a combination of serif and sans-serif typefaces: the serif headlines convey trustworthiness, and the sans-serif body type brings a friendly and contemporary look to the design.
Learning Outcomes
​
-
As my first foray into Figma and UI Design, I found that prototyping had the steepest learning curve for me, but it was so satisfying to see my design come to life in a workable prototype. I went a little hog-wild on the hover effects on the map screen, but no regrets! Prototyping is my jam.
-
I learned that sketching is important for honing and visualizing your ideas before jumping into digital tools.
-
My main challenge was narrowing down the scope of my project. There were so many possibilities, and since the site has so much content, I had to limit my focus to one user flow: searching for a park.
-
If I were to continue this project, I’d like to work on its responsiveness by creating a mobile version. I could also work on the user flow for booking a campsite.
-
I completed this project before I continued on with my UX training, so I am curious whether my end result would be different if I had incorporated user research and usability testing into my process.