SpeakOut Case Study Non-Profit Website Redesign to Increase Awareness and Engagement.
Project Scope
SpeakOut is a national non-profit organization that educates, inspires and empowers young people to become activists for social justice.
SpeakOut works with colleges, universities, schools, organizations, government agencies and the private sector, promoting critical analysis, creativity and innovative strategies for 21st century problem solving.
They are the nation’s only non-profit speakers agency, providing educational and cultural speakers, resources, and programs nationally.
On the volunteer site Catchafire, SpeakOut posted a design brief to redo their website, branding and communication with their audience. As a regular volunteer I took on the challenge.
My Role
I partnered with the Managing Director to improve the experience of the overall website and workflow for visitors. I gathered user feedback, help establish the website and branded direction. Lastly, I designed new functionalities for the experience of finding and booking speakers.
The Team
• Managing Director
• Business owners
• Volunteer Developer (Soon to be on-boarded to the project)
The Problem
Their website is outdated and not engaging, not intuitive, and overall the intention of the organization is unclear. Also simplify the process for inquiring or learning more about their speakers and programs.
This project will save SpeakOut $11,946, allowing them to subsidize costs for community organizations with limited funding to gain access to their network, programs, speakers, and other resources.
Personas
We referred to the previous UX research personas to guide us in creating the wireframes and the following UI designs of the website.
These were our guiding light moving forward.
User Journey
Sitemap
As one of the first deliverables, I created a sitemap of what I thought should be the website architecture. I reviewed this with the Managing Director (MD).
Wireframes
In our first homepage draft, I tried to keep the sections to a bare minimum.
After showing the MD this draft, we worked on some updates.
Featuring the speakers was more important than the talks. So we swapped sections.
The section blog posts were artifacts of the current website. And did not need to be carried over to the new one. We needed to add a section for selling merchandise. A key source of revenue for this organization. The newsletter sign up process could be quicker if we ask for only email address first.
These updates are reflected in the new wireframe for the homepage.
Moodboards
Before moving on to the UI design phase, the Managing Director gave me inspiration for the website. Provided were photographs that captured the colors she was envisioning. I took that inspiration, and made a series of color swatches to use in moodboards.
Design System
Layout
For the best experience, I chose an adaptive layout method for this project.
The content for pages like the speakers profile page were very extensive and needed to be treated in a different way than the Large format view.
The navigation becomes move streamlined with menu options in the medium widths. At small breakpoint, we remove 90% of menu options but keep the search and menu functions prominent.
Searching for a speaker is still the primary activity for a visitor. Search results will first present speakers followed by other sections of the site.
We exposed the key pages that visitors are interested in. These choices are influenced by analytics from the current site.
Current designs
I took the design back and experimented because I did not feel that the first draft captured the mission of the organization.
This draft feels more energetic. It brings out the color and diversity of the speakers.
Visit my site for links to more of my work.
My Dribbble account for visual designs.
Behance for longer form designs.
Other case studies:
