South Okanagan-Similkameen National Park Network // UX Design

Client Brief

The S.O.S.N.P.N (South Okanagan-Similkameen National Park Network) came to us as a community partner project at RED Academy hoping to gain greater engagement with people seeking more information about the Park.

Weeks prior to the initial client brief the organization had received word that the park would be going forward. After 11 years as a proposal, their hard work was finally paying off.

This great news also came with slight confusion as to what kind of engagement was now necessary. Originally the site existed to gain support for the campaign and act as a guide to how land users could show the federal government that support. Now, it needed to act as a hub for National Park knowledge and how that might affect the land and the people that use it.

The Goal

With the newly shifted priorities of the SOSNPN they needed a website that reflected the role they now play in the delivery of information. A site that anyone would feel comfortable landing on to easily find the information they hoped to find, while also being encouraged to learn more about neighbouring topics.

Research

The first segment of research conducted was done to get a better idea of what they currently offered on the site and how it was laid out.

Information Architecture & Content Audit

The original website had a total of eight links in their main navigation, yet none of the titles were clear enough to indicate what you were truly going to find when clicking on one of the pages. In addition to that, the information was formatted in a way that seemed to favour advocates of the campaign while making it difficult for an opposer to find information that may apply to them.

Information Architecture was something that evolved throughout the rest of the project as small details were changed after each iteration of user testing, but the main alterations to the original site map looked something like this.

User Interviews & Surveys

With this being an environmental campaign, people get very passionate about wanting to speak on such a topic. Whether they’re for or against something that affects their lives, humans like to connect, debate, and feel heard. This fact made finding users to interview an easy task. Between my UX partner and I we managed to hold discussions with a number of different people ranging from National Park advocates, members of other environmental causes, and even people who’ve started their own campaigns.

Survey Insights

  • Users want personable information. i.e, How will a cause affect their life?
  • Users want SHORT and digestible articles
  • Articles that offer FACT backed information like new studies and reports
  • Photographs and infographics should be used frequently for support

Interview Insights

  • Progress reports are a huge motivator to continue supporting a cause
  • Knowledge & Feedback instead of a “For or Against” stance
  • CTA’s need to offer something for both advocates and the opposition
  • How does my action make a difference?

Primary & Secondary Personas

With the data gained from our research it seemed obvious that more than one persona was needed to make sure the new site operated in an appropriate manner for anyone that might land on it.

Primary Persona

Sally from the Valley became our primary persona as the SOSNPN is a pro-park website. From the results of our surveys some of her pain points and goals are;

Frustrations

  • Frustrated with navigating the current site
  • Doesn’t have time to read long content on a page

Goals

  • View supported park research and reports
  • Stay updated on the causes that she cares about

Secondary Persona

Hank the Tank comes from the other side of the debate when talking about the implementation of a National Park. A persona who utilizes the land itself for both work and play. Some of his pain points and goals are;

Frustrations

  • Feels like his voice is not being heard
  • Doesn’t know how the park will affect his use

Goals

  • Wants to better understand the rules and regulations surrounding the National Park
  • Wants his say in how the park is made

Design Studio

With the personas set and a strong handle on the direction of our project we sat down with all the members of our UX/UI team for a design studio session.

A Feature List was given as reference for what was required on the home page of the new design based on our research and we all drew our own iteration of what that might look like. 2 minute sketches, group critiques, re-iteration.

Paper Prototypes & User Testing

Results from our Design Studio lead us into the paper prototyping phase as we prepped for user testing of the new asset placement and information. While I completed the web version of the site, my UX partner finished the mobile view so that we could test both editions and keep the overall feel cohesive.

Feature List for Design Studio & Prototypes

  • E-mail sign-up
  • Recent updates moved to homepage
  • Feedback & Concerns form
  • Sort content into “Park Related” and “Human/Organization Related”

User Testing

The two of us then laid out a User Testing Protocol that gave each tester 7 different scenarios to navigate. The tasks ranged from simple functions like signing up for the e-mail newsletter to difficult ones like finding specific content deep within the site. Both of us utilizing the same protocols made the test results much easier to quantify and compare to one another’s findings.

Paper Prototype Testing Insights

  • Change “sign up” for email → subscribe
  • Website version — Make sure mid-nav links are discoverable
  • Have contact in BOTH navigation bar and on the bottom of the page
  • Mobile version — have a search icon on navigation bar
  • Learn More button → most people thought it would go to “About Us”

Mid-Fidelity Prototypes & User Testing

Only slight changes were needed when converting the paper protos into wire-frames and mid-fi prototypes.

Through the original Information Architecture exercise the main navigation links were cut down from eight to four while implementing a deep-linking sub-navigation on each page. By doing so it would allow the user to see exactly which information was accessible on that page the moment they arrived at it.

The final site map we used for reference to build the wire-frames looked something like this.

User Testing

For this round of testing we reverted back to the same 7 task User Testing Protocol sheet that we used during the paper phase. Once again it proved to make the data easier to navigate when comparing our findings from both mobile and web versions of the site.

Mid-Fidelity Testing Insights

  • Semantic problems mostly and users wanting more concise copy
  • Finding list of supporters confused a few people. However, through process of elimination, users were able to find it successfully
  • Users became comfortable with the layout very quickly
  • Began to utilize both scrolling and buttons to get around the page

The Finished Product

The UI team took over after the wire-framing stage and worked their magic on our mid-fi prototypes. They had been working hard behind the scenes while we completed our UX research to come up with a cohesive style guide they could apply when the time came.

Based on user testing the original site against the high-fidelity prototype, our team managed to create a website that was easier to navigate, increased the readability of the current content, and allowed for Calls to Action no matter if the user supported the park or not.

Because of those factors the project was a success in the eyes of our User Personas and client. Site visitors now had multiple ways to contact the organization and view information in an unbiased way so that everyone feels heard. We were able to implement features for any frustration they had and helped them achieve the goals they’d hope to complete when arriving at the SOSNPN website.

Web Version // OG > Mid-Fi > High-Fi
Mobile Version // OG > Mid-Fi > High-Fi
Like what you read? Give Nicholas Kupiak a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.