Commute Challenge (CC) is an annual week-long event across Canada where people log their sustainable commute and win prizes. Behind CC is Better Environmentally Sound Transportation (B.E.S.T.), a non-profit BC-based organization, which has coordinated the BC chapter of CC for 20 years.
B.E.S.T wanted an overhaul of the Commute Challenge BC site as they got feedback the site was “confusing and difficult to use”.
- People got confused about the event “Commute Challenge” and concept “multi-modal commute” (Is it the Bike to Work Week? Is it for Vancouver only?)
- As signup and commute tracking take place on the Commute Challenge Canada site, people wondered why there were two sites and got confused when they were transitioned to the CC Canada site.
We were tasked with redesigning the Commute Challenge BC site to make it easier to use, and better at attracting participants and sponsors.
Our client B.E.S.T. was quite open-minded. Yet a couple of restrictions were clear at the very beginning: As the signup and tracking take places on the CC Canada site, we could do nothing about this part of the process. So what we are able and should achieve is to:
- make the transition to the CC Canada site as smooth and straightforward as possible.
- highlight the unique value of the BC site, i.e., the information that is only provided on the BC site, so that users are motivated to use the BC site.
The RED Design Team
Our design team consisted of three UX designers–Hugo, Lara, and Ying (myself) and two UI designers–Daryna and Wendy. UX designers focused on the flows and functions of the design, while UI designers created the branding and elevated the look and feel of the design.
In the research phase, we conducted user research, a content audit of the old CC BC site, and comparative/competitive analysis, as well as mapped the existing user journey.
The User Interviews
Commute Challenge website has two group of users: the primary group of workplace coordinators who organize the event at their workplaces, and the secondary group of individual participants. We focused on the primary user group due to the scope of this project. We conducted six user interviews with workplace coordinators. Two of the participants have organized CC events at their workplaces. The rest four participants have experience hosting other social events at their workplaces.
During the interviews, we concentrated on understanding: what motivated workplaces to participate events such as Commute Challenge, their criteria of choosing an event to attend, what factors they thought to contribute to a successful event, and the challenges they faced when organizing such events.
User Interview Key Themes
- Personal connection is a major factor to the success of an event. People are much more likely to get involved and engaged when they can relate to the event.
“It boils down to — do you have a personal connection and how do you create that personal connection as a shared experience.”
- Seeing the impact of their behavior is a big motivation for participants.
“Seeing data visualization aspect of the numbers that are different than you might have expected is very surprising and encouraging and makes you want to make the number go higher.”
- Too much work, unclear information, and not feeling supported (by the event organizer) are the major frustrations of workplace coordinators.
“Yes, it was a pain point in myself not knowing how long things would take. It would make me feel inadequate. …So much more work than I anticipated and I didn’t have a lot of support…”
Note: To reach out to more target audience, we also designed a Survey adapted from our interview questions. However, due to the very tight timeline (to be able to use the survey data, we needed the survey results within the same week as we sent them out), we were unable to get adequate responses to make use of the data.
Mapping Existing User Journeys
We also mapped the existing user journey to further develop our empathy for users. We followed the users as they started searching for a suitable event until they signed up their workplaces for the Commute Challenge.
We pinpointed their major frustration and confusion: lack of clear instructions on how to sign up, confusion caused by the two sign-up options (teams and individuals), and being directed to anther site without any heads-up once they click Sign Up.
Content Audit of the Old CC BC Site
Meanwhile, we conducted a content audit of the current Commute Challenge BC site to gain a more concrete understanding of why the site was “confusing and difficult to use”. As we found out:
- Lack of information architecture is a problem at both site and page levels, making it frustrating to navigate the website. An outstanding example is the Resource pages, as shown below.
- At page level, content is text-heavy and lacks visual hierarchy, making the information difficult to use, with the Prizes page as an example (see below left).
- The Home page (see below right), which plays a vital role in engaging and converting audience, doesn’t include any key call-to-actions — e.g., sign up the team. The copywriting is not engaging.
We wanted to address these problems in our redesign.
Comparative & Competitive Analysis
Designing a campaign website for a non-profit was a new experience for all of us. We conducted an extensive comparative/competitive analysis to better understand what were important when designing a campaign website.
Our analysis showed they share a few things in common:
- Clear Message. They are clear and succinct about what the campaign is about and how to get involved.
- Storytelling, evocative. These websites do a good job at developing an engaging narrative with text and visuals.
- Strategic use of Call to Action (CTA) buttons. They make sure CTA buttons stand out and are accessible in every appropriate context, while are cautious about not overloading them.
- A smart balance of user need and business need. For example, they make sure to give sponsors sufficient exposure while not doing this at the cost of user experience.
- Clean design, highly visual. This quality applies to well-designed websites in general. We observed a few good practices that inspired our design, e.g., the use of iconography to guide audience’s eyes and break down information into more digestible bites (e.g., the car2go How It Works page).
Focus + Direction
The insights from the research informed the focus and direction of our design.
Based on user research findings, we developed a persona named Samantha for the primary user group–workplace coordinators.
The Streamlined Pathway
At this point, we have gained a good understanding of Samantha’s needs and frustrations, as well as a fairly clear idea of the problems with the old CC BC site. Based on these, we drew out a user flow to explore what a streamlined, step-by-step process could be like for Samantha.
We recognized the three stages of Samantha’s experience with the BC site:
- Decision Making: Checking out the event and assessing if it is a good fit for her workplace.
- Sign Up: Registering her workplace (being directed to the CC Canada site).
- Organize and Participate: Promoting the event at her workplace before the event, as well as coordinating the event and engaging employees during the event.
For each stage, we identified the essential information she needs, mapped the information to individual screens, and determined the goals each screen should achieve. Through this anatomy of Samantha’s experience, what was missing from the current site became even more apparent.
What was missing
- A guide on the getting involved process to inform Samantha of the work involved as a coordinator and how to do it.
- A redirect confirmation message to inform and reassure her when she is redirected to the Canada site to sign up.
- Engaging content. We wanted the features and content to connect with users on a personal level and make them feel supported.
The New Site Map and MVP
We then drew the new sitemap and decided the Minimum Viable Product (MVP) screens and features through prioritizing our persona needs, business objectives, as well as considering time and effort.
Sketch and Design
It was time to sketch out screens. We used the Design Studio method to iterate and reach consensus quickly. We sketched a screen together on a white board in 5-min sprints. After 5 min, we compared our drawings and tried to merge design elements we all liked into the next iteration.
One big achievement of the design studio was we figured out what elements the Home page should include: a clear and engaging message about Commute Challenge, a visual way to show event impact, an inspiring image/story (kayaking to work), social media (Instagram) feed, as well as multiple call to actions.
We then moved to Sketch and created mid-fi wireframes. After a couple of iterations, we handed over the design to our UI teammates to create hi-fi screens.
Testing and Iterations
A couple of highlights are discussed below.
Making Results Visual and Relatable
From our testing, it was evident participants loved seeing impacts/results, which provided further support to our user research finding of being personally relatable. We have a dedicated Results/Impact page, and a section of Impact highlight on the Home page. Participants especially liked the visual presentation of impact on the Results page (see below).
Inspired by this feedback, we redesigned the Impact section on the Home page. We added a map of Canada with BC highlighted. Users can view the results of Commute Challenge at both BC and Canada levels, in a more visual way. (In the final implementation by our Web dev colleagues, different aspects of the impact–CO2, KM, and Kg will be played like an animated GIF.)
Copywriting for Emotional Connection
Copywriting turned out to be a big part of this project. We first aimed at accuracy and clarity. Then we felt something was still missing–fun and emotional connection. The messages sounded somehow bland. We tweaked our tone of voice and injected some humor into the messages. An example is the Redirect message (see above).
Experience the prototype following the link below. It shows the user experience we designed for Samantha, which starts with her visiting the CC BC site for the first time to see if Commute Challenge is a good fit for her workplace, to signing up her team, and to getting resources she needs when organizing the event.
Mobile version: https://invis.io/QN9GCMX57#/207450186_M-Homepage
So we redesigned Commute Challenge BC site with the goal of making it easier to use and increasing conversion. The redesign delivered the following:
- A streamlined experience for workplace coordinators, including a getting involved guide with easy-to-follow steps and a redirect confirmation screen.
- Redesigned site map and web pages to improve navigation, readability, and information quality.
- New and reworked content (text and visuals) to better connect with and engage users.
- Further test prototype and information architecture.
- Improve the experience of secondary user group–individual participants.
- Explore leveraging social media to connect and engage users.
Thanks for reading! You are more than welcome to leave a comment and let me know what you think. :-)