Adventure Awaits case study banner of a mobile screens of the site pages

Adventure Awaits

Adventure Awaits is a camping blog that provides family campers information to get their camping journey started. We created a microsite for BC campsites so that beginner family campers are able to easily find information and determine which campsite would suit their needs best, as the current site lacks organization and readability.

ROLE

UI designer

UX research

Art Direction

TEAM

Michelle Wang

Leanne Ngong

Jenise Cheung

Calvin Alexan

Jaival Shah

TOOLS

Figma

Webflow

TIMELINE

July 2022-August 2022

Overview

The Adventure Awaits mictrosite was a project for an academic course at Simon Fraser University, with the goal of creating a microsite that would benefit a specific user group.

THE PROBLEM

Beginner family campers struggle to choose a suitable campsite amidst overwhelming amounts of information.

Our team started off with the online blog "Adventure Awaits". It is an eductional blog that aims to teach families the basics of camping. As a blog, it presents a lot of information that may be difficult to nagivate through as a beginner family camper.

Breakdown of the current site

image that points out the issues of the current mobile content page.
image that points out the issues of the current desktop landing page.

RESEARCH

Understanding our user group

In order to have a grasp on who our target audience is, we created a user persona of a beginner family camper. I identified the key user motivations and frustrations that would help us guide our design decisions.

image of user persona

RESEARCH

How might we design a microsite for beginner family campers to easily identify their ideal campsite?

Project Goals

Easy to Read

Restructure content so that important information is easy view and understand quickly

Reduce Irrelevant Content

Only keep the information that has a purpose in helping users find the right campsite for them.

Families are Welcome

Convey that families with kids of all ages are welcome through visual direction and content presentation.

DESIGN PROCESS

Initial Wireframes and Concept

The team started our design process with basic wireframing of the content. I worked on the home page and campsite page, where I ensured that we made use of content hierarchy by extracting content into icons or headers, especially on the campsite page. This would help us communicate information in a less clutered way.

low fidelity wireframes for Adventure Awaits home page, campsite page, and contact page.
moodboard for Adventure Awaits with a collage of playful and colourful artifacts.

DESIGN PROCESS

Feedback

We received feedback from our Professor and Teaching Assistants that our wireframes had good structure, but there were a couple points that could use some revisions:

REVISIONS

Re-evaluating the contact page

Initially, we added a contact page for user questions about camping. However, its purpose wasn't clear, which could lead to unintended inquiries. Therefore, we replaced it with a clear FAQ section for basic information.

image of part of the faq section

Removing one of the pages, I helped to create an updated site map to ensure the team was on the same page.

updated sitemap for Adventure Awaits that includes the home page, campsite page, essentials page, and faq section.

THE OUTCOME

A microsite streamlining essential information for beginner family campers choosing a campsite

The content is currated to only include things that beginner family campers may need. We removed unnecessary sections like the contact page. All content on the site directly meets user's goals and has a clear purpose.

gif of Adventure Awaits site on desktop navigation through site pages gif of Adventure Awaits site on mobile navigation through site pages

View the final website↗︎.

FEATURES

Important information stands out

Key pieces of information are separated from text blocks. Main activities for each campsite are simplified through icons, prices are enlarged for quick scanning, and the booking link is presented as a distinct button for clarity.

preview of Hick's lake in the campsite page.

FEATURES

Relevant Content

Only essential content is shown in the campsite page. Each piece of content has a clear purpose to the user. This includes including an FAQ section rather than a contact page, and narrowing down the scope of the navigation bar.

faq section shown on both mobile and desktop

AFTER THOUGHTS

Reflection

Through this project, I further saw the importance of identifying target users. It was through our user group that was a main driver of our design decisions, and without it, the team would veer more on the generic side that would appeal less to who we would want to reach.

Another element that came to light was how the feedback from our peers and teaching team was crucial to our iterations and evaluating designs. Without outside feedback, it would be more difficult for the team to identify if we are meeting user needs or if the site was visually appealing and aligned with the art direction and user group.

What I would do differently next time would be to explore more possibilities of interactions. We were limited to just button state colours due to the time constraint; however, if we had more time, I would have like to experiment with hovering over site elements as another way to convey information to the users.