SPEC

Website
Branding, Web Design, Digital Strategy
Mockup of girl looking at desktop with SPEC's landing page
project overview
SPEC needed a new website that visually matched their new brand, gave SPEC employees more design control, and had a better financial value. This also meant updating old web content, finding a new way to manage contacts, and ensuring SPEC was set up with third-party services like MailChimp to suit their needs.
project brief
What: WordPress website built with Elementor, brand guidelines, and CRM service through Little Green Light
‍
Role: Web Designer and Digital Strategist
‍
Client: Society Promoting Environmental Conservation (SPEC)
View Live Website

table of contents

1. introduction
2. brand identity
3. web strategy and ux design
4. content updates
5. web building and visual design
6. CRM selection
7. conclusion

introduction

about SPEC

The (SPEC) is an organization based in Vancouver that educates and advocates for urban sustainability. I previously worked for SPEC as their Communications and Volunteer Coordinator, and now sit on SPEC’s Board of Directors. 

project scope

SPEC has had multiple challenges with its website and brand. In 2019, SPEC updated its logo to feel more modern and better reflect SPEC’s personality. But since then, SPEC has not had the capacity to update its website to match the brand reflected in SPEC’s new logo. Similarly, the web platform SPEC used, called Wild Apricot, had a number of limitations (especially in visual design) and was expensive.

SPEC's goals

  • Redesign SPEC’s website to match SPEC’s new brand identity
  • Work with SPEC’s teams to update old page content
  • Migrate SPEC’s content from Wild Apricot to WordPress
  • Find a new contact database (CRM) that works within SPEC’s budget

SPEC's old website landing page design:

SPEC's old website design
As someone close to SPEC and familiar with its programs and people, I was well-positioned to lead a complete rehaul of its website and digital strategy.

brand identity

SPEC's brand brief

brand guidelines

As a small non-profit organization, many SPEC employees, volunteers, and board members are a part of many projects. With so many leaders involved, this can lead away from brand cohesion, as many content contributors have different writing, photography, design, and organization styles.
‍
The first task for this project was to create a brand guidelines document so all SPEC staff and volunteers are clear on SPEC’s identity. This involved making sure SPEC’s brand colours were used systematically and that every web page, graphic, and social post feels a part of SPEC’s brand.

The brand brief was created to quickly convey to new volunteers and staff the most important aspects of SPEC's brand.

mood board

As part of the branding process, I created a mood board to demonstrate to SPEC’s team how colour, images, and typography come together to create an emotional response from the viewer. The mood board was a quick way to visually convey the importance of a cohesive brand.
SPEC brand mood board

proto-personas

As a multi-faceted organization, SPEC has many personas to represent the types of constituents involved. Due to time, I was unable to conduct interviews with each persona category. However I worked closely with SPEC’s team to make educated assumptions about the wants, needs, and pain points within each. These proto-personas help SPEC’s team understand the “WHO” when they are communicating their brand.
Fiona proto-persona

inspiration

Once SPEC’s brand was solidified, I worked to find inspiration from other websites that were able to convey similar brand feelings. This included clear, friendly, relevant, respectful, and educational.
I looked at inspiration for both website structure and for visual design. For web structure, I was concerned with how content is laid out, how navigation is presented, and how headings and images break up long text blocks.

ux inspiration

The Nature Conservancy inspiration
Earth Justice inspiration
Card navigation inspiration

ui inspiration

Card design inspiration
Card design inspiration
Page layout inspiration

web strategy and ux design

website brief and objectives

Once SPEC had a clear visual identity that had been approved by SPEC collaborators, I created a website brief and made sure everyone was aligned on objectives and the purpose of our website. By ensuring I knew the objectives, and ensuring SPEC’s team agreed on objectives, I could tailor my recommendations and tasks to best serve their needs.

google analytics audit

To understand the current successes and pitfalls of SPEC’s web presence, I conducted an audit. I began first by looking at Google Analytics to understand the most and least popular parts of SPEC’s website. The key metrics I looked for were # of Sessions, Session Duration, Traffic Source, and Bounce Rate.

There were two key outcomes from this Google Analytics Audit:

content audit

In order to find outdated, off-brand, or uncompelling content on SPEC’s current site, I evaluated the content of every web page by creating and completing an audit form.

This form included questions such as:
  • What is the purpose of this page?
  • Who is the primary audience of this page?
  • What is the main message of this page?
  • What is the primary CTA of this page?
By evaluating content on those questions, I could determine whether the written content was best serving SPEC’s goals and identify any confusing, conflicting, or unnecessary messages.
Screenshot of web content audit form

IA and navigation

From the audit, I catalogued all of SPEC’s existing pages and the current site hierarchy. From my evaluation, most of the site hierarchy seemed adequate, apart from a few pages. I conducted a quick card sort using a free online tool, to determine where pages would be best located under users’ existing mental models.
But the key issue with SPEC’s IA was navigation menus. SPEC works in 6 different areas (called Teams), and within each Team are a number of big and important projects. But to navigate to each project, the current SPEC site only had small navigation menus that did not give any contextual clues as to what those programs were or why they mattered. This insight informed an important design decision I made during wireframing, which was to create a visual menu on a Team page that operated more like a landing page.
Lofi design of the card navigation

wireframing

With a solid understanding of the site structure and brand identity, I drafted a few quick sketches of concepts then began wireframing the most promising ones. I drew on inspiration from websites identified during the branding deliverables. This meant building room for eye-catching images that entice the user to spend longer on the site. This also meant clearly organizing content, using visual markers to make content skimmable. When wireframing, I knew that content would be primarily built in WordPress, so I wireframed templates that could easily be replicated and copied throughout WordPress.
‍
I then presented the wireframes to SPEC collaborators for feedback. The team was pleased with the blueprints for the website and provided some suggestions for improvement. Below are the wireframes after feedback.
Desktop lo-fi wireframe of landing page
Desktop lofi wireframe of energy and transportation page
Desktop lofi design of a project template page
Desktop lofi design of the about us page

content updates

content writing

As someone familiar with SPEC’s programs, I recognized that many of SPEC’s web content was out of date. And after conducting the content audit, I knew that content updates would be a major portion of this project.
This was a new challenge for me, as I had to sort out how to work collaboratively with numerous SPEC members on content updates in a way that was not disruptive to our workflows. So I began by placing all existing content in separate Google Docs, conducting the first rounds of edits myself, and then sending the documents off to the corresponding collaborator for further edits.
This process in the end worked rather well, as multiple team members could contribute and weigh in on the process. This was also less disruptive to my workflow, as I could contribute my content and communications skills without personally writing all the content for the website, which would have taken ages. 
The other bonus of this system was it allowed us to work within an agile framework, where I could update web content at any time during my process, even after the website was launched. Rather than going back and forth to the website with little tweaks, SPEC’s collaborators can make direct edits to the Google Doc and inform me when web updates need to be made.

web building and visual design

wordpress site setup

I chose WordPress as the web builder for SPEC as it offered the most versatility in design options and integrations. In addition, WordPress is a low cost option, which offers major value. While WordPress isn’t the most user-friendly for the average client to operate, I created templates and tutorials for SPEC’s team to better understand the WordPress dashboard and how to make simple edits.

wordpress site creation

Creating a site on WordPress was probably the largest learning curve for me on this project. I had used WordPress before, but never built a site on WordPress. So this involved hours of Youtube tutorials to get me up to speed on working with the program. In the end, I built everything using Elementor, the free, web-building plugin which offers real-time design edits. Using Elementor, I was able to customize many features of a website and ensure content was responsive across all viewports.
View Live Website

images

Images are a major part of SPEC’s website. This is for three reasons:
  • The right images capture the essence of SPEC better than words could
  • Our pages are content heavy, and our users on average don’t spend long reading. Images allow us to convey information in a fraction of time.
  • Other websites frequently use striking images, representing a standard in web design.
Many of the images were sourced from a volunteer photographer who took stock photography photos for us a few years back. Many of these images are close-ups of environment-related things or scenes, which worked perfectly on the website. Close-ups allow us to convey the THEME of sustainability, which sets the mood without being distracting. Photos that are busier or landscapes are used sparingly and only when it is demonstrating the project at hand.

colour application

I applied SPEC’s brand green very strategically, using it to signify interactions such as buttons, links, and drop-down menus. Since images are a huge part of this site, I left colours fairly neutral so they did not conflict with the colours in the images.
‍
I used a light grey to section out content areas as a visual cue to help the audience understand long content.
‍
And I used SPEC’s secondary colour, a bright lime green, very sparingly to draw attention to important areas that might otherwise be skipped, such as our social media icons.
Desktop design of SPEC homepage

buttons

I used three types of buttons across SPEC’s website, depending on the importance of where it leads.
The buttons used for important pages were solid green buttons with white text. The solid green contrasts heavily with the neutral white theme of the page, meaning they are more likely to grab attention.
The second button was a white button with a green outline and green text. This has less colour, and therefore grabs less attention and indicates secondary actions.
The final button is purely green text links, which are the least attention grabbing buttons but still stand out compared to surrounding text.

CRM selection

SPEC’s old website host, Wild Apricot, included contact management services. However, for the price that Wild Apricot was changing, SPEC was not taking advantage of the content management services they offered.

CRM research

I worked with SPEC’s executive team to strategize what types of needs SPEC has from their contact list and then conducted research of all available CRMs. I primarily focused on non-profit specific CRMs, as sales CRMs had many features that were unnecessary, and non-profit CRMs had additional features that were highly valuable (such as donation reporting and volunteer tracking). 
‍
I prepared a highly detailed spreadsheet breakdown of my research, including features, prices, and recommendations. I also included average savings over 1, 5, and 20 year periods across the top contenders for CRM services.
‍
The final decision resulted in us using a service called Little Green Light, which provided the best value for the features offered.
‍
LGL has a steep learning curve, so to ensure SPEC’s team was properly set up with the new tool, I conducted a tutorial session on the basics for using LGL.

final product

final product

SPEC's website is now live at spec.bc.ca. Take a look online to get the full web experience, including how I designed responsive layouts.
View Live Website
Desktop design of About Us page
Mobile design of About Us page

conclusion

key learnings

This project was massive and pushed me outside of my comfort zone. I was responsible for executing a number of tasks that I was not familiar with, such as setting up WordPress, building a site on WordPress, learning about CRMs, and then migrating a site from one to another.

technical skills

soft skills

next steps

While the website is launched and live, there is always room to improve.

validate proto-personas

The next stage for SPEC's digital strategy is to validate the prepared proto-personas.

migrate contacts to LGL

Ensuring all of SPEC's contacts are recorded in Little Green Light.

integrate post-launch website feedback

Continuing to make tweaks and improvements to the web design.
Mockup of SPEC website on laptop
Back to Case Studies

Robin Hadac | Copyright 2022

I would like to acknowledge that I live and work on the traditional, unceded and ancestral territories of the Coast Salish People, which includes the Musqueam, Squamish, and Tsleil-Waututh Nations.