At DockYard, we stress personal and professional growth — it’s not just something we say; we have a day each week dedicated to professional growth. Every Friday, we have DockYard Fridays. These are full days set aside to help employees become better at their craft. So whether you want to learn a new coding language, sharpen your understanding of accessibility, work on a few-Dribbble worthy illustrations, or focus on anything else that will help you and/or your company become better, you’re welcome to do it for an entire day (minus a few meetings) each week.
As a designer at DockYard, a fully distributed firm, I wanted to leverage my Fridays to hone my facilitation of remote workshops and problem solving skills.
Strategic Project
I thought the best way for me to sharpen these skills was to apply them to a real situation, so I decided to search for an organization in need of this type of expertise. I looked for companies through Catchafire, a site dedicated to matching non-profits and individuals with specialized skills to complete a small project. On the site, I came across 350 Colorado, an organization that focuses locally on climate change and building a sustainable future. They were looking for feedback on their current website that would be a list of changes they could then have a digital designer implement. During an introductory call with their Communications Coordinator, she mentioned that their analytics data was showing high drop off rates and that they felt as if they were trying to accomplish too much with the site. With these needs in mind, I thought I could go beyond providing basic feedback on the site’s visual design and functionality. I hoped we could uncover the root of what 350 wanted to accomplish, why people are going to the website at all, and what they expect to get from visiting it.
Kick Off
I put a plan together based on the issues outlined in our screening call to get the 350 staff aligned on a common goal, identify who they wanted to target, and highlight some design principles for achieving the goal. By defining these first, areas for improving the site would become clearer, removing some subjectivity from the site design feedback and placing the focus on serving the goal.
After reviewing the plan, our next step was a follow-up meeting with the 350 team so we could all participate in the workshops. In the meantime, I wanted to create a sitemap of the existing site to visually see their site structure and have that assist us in analyzing possible changes. I also wanted to go over the analytics to see where their highest traffic and drop-off rates are.
The Workshops
We scheduled a two-hour video call for the next DockYard Friday with the Communications Coordinator, the Executive Director/Co-Founder, the Campaign Coordinator, and Volunteer Coordinator. This was going to be ambitious as we had a lot to cover, but with just five of us I thought we had a chance of getting through all three exercises outlined in the plan. To give us the best chance for success in this meeting, much like planning any client web app development project, I had to continue the theme of setting expectations and sent everyone an agenda, letting them know everyone would need their own computer, a Google account, and the ability to join and contribute on a video call.
After a quick introduction, I walked the 350 team through the design process as a whole so they could see the bigger picture of what we were going to be doing. For all three workshops I wanted to take the team through a dot voting exercise, in which every vote is treated equally and everyone on the team can debate ideas and help make hard decisions.
Defining the Audience
Our first dot voting exercise was to define the core audience. We needed to define the most important group of people the site should be serving. The group needed to collectively decide on this and tell me who it was. After making it clear to them that they are not the audience, I asked them to begin the exercise.
They decided the audience is people in Colorado who are looking to get involved with issues facing climate change. We didn’t want to break this group into specific demographics.
Defining the Goals
For the second exercise, the group focused on the most important goals they thought the site should deliver to people in Colorado who are looking to get involved in climate change. Determining a clear goal helps to prioritize what design changes to make. At the end of the exercise the main goal was to get people who are already concerned with climate change to take action with 350 Colorado through volunteering or donating. By combining this with the analytics review I had done, I was able to sum up the audience and goal in a problem statement:
Our website was designed to increase engagement with climate change campaigns, allow volunteers to join a local team or campaign, and collect donations. We have observed that our site is only converting 0.37% of site visitors and isn’t meeting the average of converting 1.95% of site visitors to take action, which is causing our business to have less resources for events and less visibility in Colorado.
How might we improve the 350 Colorado website so that people in Colorado looking to get involved in climate change are successfully able to based on the number of volunteers that join a campaign, the number of people joining a 350 team, and the number of people taking direct action in campaigns.
Defining the Design Principles
I asked the group to define some design principles to guide us as we thought about what the new site could be. I gave them some examples, but urged them to think of their own. We ended the principles workshop with six main principles:
-
Motivating: We don’t focus on the negative. We focus on the positives that change can make and inspire urgency.
-
Visually Appealing: The world and Colorado are beautiful. We connect to people through that beauty and our site should reflect it.
-
Action Based: Our organization is about taking action and building on that momentum.
-
Story Telling: The site should tell a story and emotionally appeal to visitors.
-
Engaging: The site being clickable and enticing to navigate is key for discovering information.
-
Easy To Understand: Not as in simple, but providing in-depth information that is organized, focused, and transitions smoothly.
 
After wrapping up three successful exercises, I wanted to gain more insight into what motivates people to volunteer their time or donate to causes so that we can tie these motivations into the website. To dig into that, I asked 350 if we could set up interviews with a few of their volunteers, along with interviews of my coworkers, to see what types of causes they support, how they support them, and why. Read about the interviews and the final results of the audit in part two.
DockYard is a digital product agency offering custom software, mobile, and web application development consulting. We provide exceptional professional services in strategy, user experience, design, and full stack engineering using Ember.js and Elixir. With staff nationwide, we have consultants in key markets across the U.S., including Portland, Los Angeles, Salt Lake City, Minneapolis, Dallas, Miami, Washington D.C., and Boston.
