102 Followers
·
Follow

Case Study — SpeakOut.org Redesign

SpeakOut Case Study Non-Profit Website Redesign to Increase Awareness and Engagement.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

User Journey

Image for post
Image for post

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).

Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post

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.

Image for post
Image for post

Design System

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.

Image for post
Image for post

We exposed the key pages that visitors are interested in. These choices are influenced by analytics from the current site.

Image for post
Image for post
Image for post
Image for post

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.

Image for post
Image for post

Visit my site for links to more of my work.

My Dribbble account for visual designs.

Behance for longer form designs.

Other case studies:

Written by

Just a UX designer trying to create cool products and work on his writing.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store