top of page
1_kHhKxzuh8sB6tUKmcbYYlQ.png

Project Overview

BC parks foundation is a non-profit organization whose mission is: ‘to enhance and pass on the legacy of British Columbia’s world-class provincial parks by catalyzing support and resources so that they flourish forever.’

 

They also wish to inspire British Columbians and guests to discover, experience and care for nature. Their target audience are British Columbian families and visitors to the province.

Currently, there is no easy way for people to find local events to participate in or trails to explore. This app will provide a platform for organizers to market their outdoor events to people looking for activities in nature while supporting BC Parks Foundation and ensuring the protection and enhancement of BC parks.

Client

Dan Tatton | BC Parks Foundation

Project Length

3 Weeks

My Role

UX Designer, Researcher, Point of Contact

Team Members

UX: Ronald Suh, Le An Do, Josephine Chen

UI: Eda Huang, Jenny Ho, Michelle Falgate

Software

Sketch, Invision

Outcome

We were tasked to design a mobile app that gives British Columbians and tourists access to a variety of experiences while supporting the BC Parks Foundation and the parks in BC.

The UI designers followed the brand guideline to provide a consistent look for their app. Using large photos for events and hiking trails with specific colors were essential.

 

Through research, we designed the wireframes to increase engagement and exposure to family-friendly activities, implement options for self-guided hiking tours with optional audio guides, and support the conservation of parks in BC through donations.

Design Process

Research

Domain Research

Competitive Analysis

Surveys & Interviews

Site Audit

Planning

Affinity Diagram

Persona

Design

Low-Fi Sketching

Mid-Fi Wireframes

Testing

Usability Testing

A/B Testing

User Journey Map

Information Architecture

My Contribution

I conducted a competitive analysis of similar apps related to outdoor activities, travel, event-booking, and donations. During the planning phase, I created the user persona after compiling our survey data. I was also the point of contact which involved exchanging emails, phone calls, and setting up meetings.

In the design phase, I was responsible for the home page, event information, search page, sort function, and restructuring the second iteration for our mid-fi wireframes. 

 

As a team, we conducted surveys and interviews, daily meetings, created an affinity diagram and feature list, researched similar products and services, and sketched multiple iterations of our paper prototype. We extensively tested our low-fi and mid-fi wireframes which shaped the layout of our final design.

UX Process

Domain Research

We looked into popular event-booking apps, outdoors-related websites, and donation apps. Researching the current market provided insight to some of the key features for our app, which includes exploration pages, hiking and outdoor activities, and making donations.

1_n8ztCJTL7A_uqrso8jrkIQ.png

Competitive Analysis

A Competitive Analysis is a method to compare the function and features on similar apps. We discovered commonalities and differences for each app. For example, the search engine, home page, tickets, and reviews all had similar functions. The main differences were the placements and scales of buttons to perform tasks such as viewing/writing a review or booking a ticket. 

1_jKCOg23XYe0iy8dsehPh6g.png

Affinity Diagram

To organize our research data and potential design ideas, we categorized our survey data of 213 responses to visual blocks. The light boxes highlight the target audience's and the majority of the respondents' answers which became a guide for our final design. 

Discover_Affinity Diagram.png

Mid-fi Wireframes

This is a part of our first iteration related to browsing, searching, booking, and viewing specific events. We revisited the wireframes after rounds of testing before creating our second iteration.

1_juLqjngrIpV0kpw4Mi9PKw.png

Main Features

After identifying the users' needs, we designed the layouts to improve accessibility to events and important information.

  • The audio files are easily downloadable as the icons are displayed when browsing events. The audio can be played at any time whether it’s streamed or downloaded.

  • Events can be easily booked when viewing under the events tab in the saved section.

  • The host's info is a part of the event's information page. The foundation's vetting process ensures that the hosts are legitimate and reliable.

  • The hovering bar floats as the user scrolls for immediate access to booking on the event page.

  • The donation button is located in the collapsible menu on the home page, making it accessible on many pages.

Mid-fi closeup.png

Key Changes

After testing our first iteration, we restructured the layout to a horizontal format for our second version. We decided to enlarge the backgrounds to bring focus to the photos and rearranged the information to reduce clutter.

  • To increase readability, we used boxes around important information: such as the location, distance, and time.

  • Changing the hierarchy of the text with added spacing gave enough room to comfortably view different events.

We realized that our information was vertically stacked in a horizontal layout. As a result, our first iteration lacked separation and caused unnecessary clutter when scrolling through events. 

Home Screen

Mid-fi Home.png
Mid-fi Self Guided.png
Mid-Fi Upcoming.png

Version 1

Version 2

Mid-fi My Tickets.png
Mid-fi Event Info.png

Comparing the two versions in high fidelity, the changes received positive feedback after testing our new prototype. The app is now branded closer to the BC Parks Foundation's guideline with large images and bold buttons. 

Version 1

Comparison.png

Version 2

Comparison.png

Design Outcome

Lastly, here is the final design after working closely with the UI team! The UI designers worked with the brand guideline provided by the BC Parks Foundation, which was incorporating lots of photos and working with navy blue and orange. 

The new logo represents the willingness to explore outside with a compass in hand. The shape of the needle is a graphic representation of British Columbia highlighted in bright orange. 

1_kHhKxzuh8sB6tUKmcbYYlQ.png
Icons.png
Hi-fi Home.png
Hi-fi Event Scroll.png
Hi-fi Menu.png
Hi-fi Donate.png
Hi-fi audio tour.png
Hi-fi audio info.png
Hi-fi family.png
Hi-fi search.png

Conclusion

This project was a great opportunity to understand how users interact with event-related apps. Catering to mostly young families and frequent hikers was an exciting challenge to make family-friendly and outdoor events more accessible in BC.

 

Some challenges were reiterating our designs to improve usability while considering the brand guideline for the UI team. Although referencing/studying similar apps were essential, using our data to design a BC-specific event-booking app was another challenge, as we went from a wide demographic of popular booking apps to a smaller/local target audience in BC. 

After finishing our project, we worked closely with the app development team as it was chosen for development. This meant revisiting our prototype and explaining/fixing the walkthrough of various flows such as searching, booking an event, and creating an account. 


I am thankful for working with excellent teammates and having the opportunity to work for BC Parks Foundations. The app is currently in development and I am excited to see our designs being used for a great cause!

bottom of page