Embracing the Wild Side of Vancouver
“To connect with others, find oneself through nature and the positive promotion of the outdoors.” — Dr. Hartley Banack, WAV Chair
The Brief
Wild About Vancouver is an organization aimed towards breaking people out of their sedentary lifestyle and embracing the wonders and benefits of getting outdoors. When asked what the mission of WAV is, Dr. Banack answered, “To connect with others, find oneself through nature and the positive promotion of the outdoors.” Through their website, outreach programs and annual festival, WAV tries to get people of all outdoor-comfort levels to open their doors and step outside.
The main selling point of their current website is a calendar of events and outdoor lessons to attend, and the ability to submit an event to said calendar. Unfortunately, the sites layout made it very difficult for users to use the site, find information of events and lessons, and submit event and volunteer applications. Because of this, the events calendar was mostly empty as users were not submitting their events on the site. My team and I were tasked with fixing the usability issues and revamping the site to reflect WAV’s goal and motivate users to, “get involved and get outdoors.”
The Team
On the UI side of the team, we had Lochlan and Sayaka, two very talented UI artists. On the UX side, we had Flo, Minseung, and myself. Together, we had to find the best way to reorganize the current website so that it was intuitive and engaging to users.
Research
Surveys
We put out two surveys: one for potential users (outdoor enthusiasts, teachers, and everyday Vancouverites), and one to the WAV committee. We also interviewed parents with young children, and outdoor enthusiasts. To better understand what aspects of the site we needed to highlight, we asked our potential users what got them outdoors. We found that most of the reasons were personal (i.e. they just love being outdoors, they love nature, they love wildlife, etc.). Health reasons came in not too far behind. Third were emotional reasons (being outdoors makes them happy), and fourth was social interactions with family and friends, and meeting new people. We decided to keep the personal and emotional reasons separate to ensure we met the most important and prominent needs of our users.
When we asked how frequently people went outdoors, we were surprised to find that majority of people try to go out once a week.
This illustrated that the need for the event calendar of the website. With majority of users going out once a week, a site with lists of upcoming outdoor events and activities would prove useful if done correctly.
Current Site Analysis
We asked users and committee members what their frustrations with the current site are. Most users agreed that the navigation of the site was the first thing that needed to be improved upon. Next was the user flow of submitting an event. Ease of use and finding information were the next most important aspects of the site that needed some work.
Competitive Analysis
In the general survey, we asked whether people had used event websites such as Event Brite, Georgia Straight, Tourism Vancouver or Daily Hive. If they had, we asked about their experiences with these sites. We found that users were left feeling frustrated by cluttered content and overwhelmed by the sheer number of events on the sites. These sites were also rated difficult to use and to find information on.
Planning
User Personas, Scenarios, & Stories
Using an Affinity Diagram, we visually mapped out our users motivations, values when looking for events and frustrations. To ensure we were alleviating all of our users’ pain points, we created two personas:
Jasper’s User Stories:
- I want to find local events so I can surround myself with other people passionate about being outdoors.
- I want to post my upcoming outdoor activities so that other outdoor enthusiasts can join me.
Heather’s User Stories:
- I want to find outdoor activities to do with my family so that my son develops a passion for being outdoors.
- I want to be able to share upcoming events on my social media accounts so that my friends and family can join me.
Solutions:
In summary, the main pain points of our users are as follows:
- Website layouts are confusing and difficult to navigate
- Users feel overwhelmed by the large number of events that they are not interested in attending
- Submitting events come with long forms that users do not want to fill out for a casual hike with other outdoor enthusiasts
- Users want to browse seasonal activities to do
To address the first of these pain points, we needed the site’s flow to be intuitive. Through testing, we would find whether our designs proved to alleviate this pain point and how we could improve upon them. Secondly, we needed to provide a search function for our event listings so that users can filter out activities and events that they are not interested in. Next, we needed to ensure that our event submission and sign up forms were simple enough that users did not lose focus. Lastly, we thought the site could use a list of seasonal activities that users can plan to do on their own, or submit as an event so that other users could join them.
Storyboard
We developed a storyboard to illustrate the use of our app:
Feature Prioritization
Before we started building, we needed to know what features were absolutely necessary and what features could be developed if we had extra time. We decided to focus on reworking the websites current features while only adding a few key elements before working on new features like the list of outdoor activity ideas.
Site Map
The last step before we started wire-framing was knowing how each page connected to one another. To see this visually, we made a sitemap for our app. Here is a site map of the previous version of the site for reference:
We took out a lot of CTA’s (Call to Action) that cluttered the homepage and about pages, and overwhelmed users. We also reworked the About Us page so that all the information was on the same page, giving the users the ability to scroll through all the information and navigate to each section of the page via a secondary header. This decreases loading time and keeps the user engaged. We moved information on previous years’ festivals, and information on WAV’s school outreach program into the About page as well. We added a list of local outdoor activities users can get excited about. We also added a section called, “Get Involved,” where we put our volunteer application and our donation redirect. Since a big part of WAV is their blog, we left if on itsThrough card sorting and user testing, we were able to see that users responded well to this information architecture.
User Flow
Following the site map, we made a few user flows to solidify the flow of the site. Below are the flow diagrams for finding an event and sharing it on social media, and finding an outdoor activity and submitting it as an event to the calendar.
Design
With all of our planning done, we moved onto wire-framing. We used the Design Studio method of brainstorming ideas for each page, and then further refined our ideas through discussion and user testing.
Usability Testing
We tested our low-fidelity paper wireframes, and our mid-fidelity digital wireframes.
We asked our users to complete the following tasks:
- Navigate to the monthly view of the event calendar (monthly view)
- Find a seasonal outdoor activity to do and submit that activity as an event so that others can join you
- Find additional information about the annual WAV festival
- Submit a volunteer application
Findings:
The biggest pain point for our users was navigation, and so most of our testing was to ensure that our header menu was intuitive and easy to use.
Initially, we created the top iteration. “Get Inspired,” housed the site’s blog and the list of seasonal activity ideas, but the wording was confusing to users, and most of them had to click through the submenus to find what they were looking for. We separated the blog and activities, giving the blog its own tab and changed the name of, “Activity Ideas,” to, “Get Outdoors,” in an attempt to motivate the users. Using AB Testing, we found that the title proved to be more confusing for users, and so we changed it to simply, “Activity Ideas.” We also switched the order so that it came before the Volunteer and Donate pages as this was now one of the key features of the website. Finally, we deleted the, “Home,” section of the menu as users clicked on the site’s name or logo to navigate back to the homepage, proving it redundant.
In the Events submenu, we had kept the original name of, “Event Calendar,” for the event listings page. Through testing, we found users preferred the title, “All Events,” as it is more intuitive.
While testing, we found that users would often look for a submit button while on an activity’s information page. Adding this button would save the users from having to click on the header’s navigation menu, and then click on the Events submenu in order to submit an activity as an event.
The last key insight of our user testing was about the monthly view of the event calendar. Originally, when users selected a date, a list of events occurring on that date would populate underneath the calendar. Unfortunately, users could not see that the list was there without scrolling down, and most users assumed the link was broken. To fix this, we had the events populate above the calendar so that users can see them right away.
Prototype
Click here for our digital desktop prototype.
Click here for our digital mobile prototype.
Summary
Future iterations of the website could include the following features:
- Contributors and Donors spotlight — highlight those who have helped WAV
- Weather — by putting the weather forecast on the event calendar, users can make informed choices and plan accordingly
- Blog comments and engagement — giving users the ability to post their thoughts on blog posts would help WAV better understand what their readers want to read
In three weeks, my team and I were able to narrow the scope of an overwhelming movement and produce an app the client fell in love with. Through research, planning, design and testing, we created an app for a community of authentic, experience-hungry people to create meaningful connections, interactions, and experiences.
