Commuter Challenge BC — B.E.S.T Organisation
UX & UI Team | Responsive Website
For the second community project as part of the UX RED Academy program, we were asked to refresh the Commuter Challenge BC as responsive website.
Team
Taking on this opportunity was a team of User Experience (UX) and User Interface Designers (UI) students.
As part of the UX team, my role was to create experience that balanced out the needs of the user and the business goals.
About B.E.S.T
Better Environmental Sound Transportation (B.E.S.T) is a non-profit organization with programs including The Bicycle Valet, Living Streets and STAR.
About Commuter Challenge BC
Commuter Challenge BC, the Provincial part of an annual national week long event, encourages sustainable commuting to or for work, supported by BEST for the last 20 years. Participants log their commute — type and distance, to see how much carbon, calories and fuel they saved.
The Problem / Opportunity
The opportunity with Commuter Challenge BC was to refresh the site focusing on the following goals:
The Commuter Challenge BC website acts as an information site for BC related event resources and sign up portal. To sign up and log data participants are directed to Commuter Challenge national site. Although not a new concept to sign up on a different site — because of poor communication and site structure, this was confusing.
Project Limitations
We were limited in designing the complete user flow due to the sign up process occurring on an external site, which we did not have access or ability to alter.
Research
As BEST has been running for over 25 years, they had established their target audience as workplace co-ordinators rather than individuals. Workplace co-ordinators were key influences in encouraging and organising others to participate. As BEST had collected survey data recently, we headed straight into the user interviews.
We interviewed people who had either coordinated the Commuter Challenge at their workplace before or who had organised a charity event at their workplace. We focused on what they thought makes a good workplace charity event and what breaks a workplace charity based campaign.
Content Analysis
To understand what content needed highlighting and what was unnecessary we conducted a content analysis of the CCBC site. To see exactly what we were working with, we recreate the current sitemap.
Although still a relatively small website, the content analysis revealed that the content was quite thin on pages and related content was spread across several pages. Although minimal content on each page, the page design had the effect of information overload, as confirmed with the user interviews. The common feedback we received was:
We mapped out the users emotional journey (user journey) to signing up for the event, to see if there was any pages we needed to keep or could leverage from.
As you can see from the user journey (see above) the level of excitement (orange) stays consistently low while frustration and confusion increase. As the user interviewers quickly gathered that it was a non-profit website, although they were very forgiving, all noted that it certainly wouldn’t entice them to sign up.
Armed with this knowledge we hopped on our bikes and headed off to see what the competitors were doing.
So who was doing this right?
We compared a wide range of non-profit event based websites as well as website that encouraged sustainability. When looking at competitors websites we asked the following question:
– Did it look simple?
– Did it explain the benefits? (fun, impact, cause)
– Did it explain how to participate?
The Great Climate race, made the event look simple with only limited options to choose from in the navigation. The use of images of participants enjoying the event made the social benefit of participating very clear.
We also found that explaining the benefits and the process using icons and short sentences (like the app site Changers) made it easier to skim and thus easier and quicker to make a decision.
Say hello to Samantha — Primary Persona
We consolidated our data and summarised the common themes to create our primary persona. Samantha represents a typical workplace coordinator, their goals, frustrations and motivations.
In her early 30s, Samantha works for a mid-sized tech company, commuting from her home in North Vancouver using a car and public transit. As she is green at heart, she is inclined by environmental initiatives but although she knows her colleagues care, is frustrated by uninspiring campaigns and lack of support.
To make signing up to this event a no-brainer for her workplace we designed the website with the goal in mind to win Samantha over and return as a coordinator year after year.
Planning
The first tool we used to inform our design was using a user flow to determine how Samantha could reach her goal.
The user flow informed us that there were three main stages:
- Making a decision
- Signing up
- Organising & participating in the event.
From this insight we planned to only include the minimal pages needed in each stage to move Samantha on to the next stage.
Using the flow we audited the content and organised the critical information into pages. Below is the sitemap before and after of the website after using the user flow and content audit.
To refine the content further to ensure that ONLY critical content was included and to work out what could be delivered in the timeframe (3 weeks) we used the priority matrix tool. This tool ensured we not only met the project goal but avoided feature bloat.
Design
The absolute minimum two pages that Samantha would need/go to to make a decision was the Home and the Get Involved- Workplace Coordinator. We used ‘Design Sprints’ to quickly reach consensus and due to its time box nature, ensured that only necessary content was included.
From the Design Sprints we jumped our designs into Sketch and conducted user tests using our mid-fidelity wire frames. We used progressive disclosure to show small amounts of information and only show relevant content when Samantha needed it (pre signup and when returning).
From our user tests the common feedback that we received was:
- Be consistent with language to help explain the relationship between the two different sites (use BC & Canada rather than BC and the national site)
- Use imagery and copy to make the data relatable and informative
Final designs
See our final wireframes after testing
Web high-fidelity
Mobile high-fidelity
Summary & Next Steps
The client was over the moon with the new user experience and the update the UI team had applied to the design. In summary, what worked really well with this site was making sure that we only included the critical pages needed for Samantha to sign up. This kept the site small yet flexible and manageable from year to year. From our user tests it showed that because we wanted to be concise with the copy, that the event would be even more successful with professional copywriting to help set the tone and make the message even clearer.
