Web design:
El Segundo For Black Lives

Brief

Create a website for the non profit organization El Segundo For Black lives.

Requirements

Must allow organizers to have the ability to post announcements, accept donations, embed youtube videos, and have a blog. Must include Mailing list sign up and Volunteer sign up. Needs to look professional.

Timeframe

1 month

My Main Role

Web Design

Team

Jennifer Hwang
(Graphic Design)

Tools

Miro, Squarespace

Client

El Segundo for Black Lives

Process

The design is driven both by the purpose and goal the organizers would like the website to achieve, as well as the visitor's experience.

Stakeholder Interview

To start the design process, I met with the client to discuss requirements, and the goal of the website. My objective in these interviews were: 1) understand my clients goals, as well as the goals of their intended audience they they understand them; and 2) list what the requirements of the projects are.

Audience Specific Goals

General Audience
Create brand recognition (explaining who we are, what we do). Provide wider outreach to a more diverse audience using events and social media.
Donors
Collecting donations.
Volunteers
Engage more committed volunteers. Create excitement around events and projects. Provide volunteers an easy way to sign up through the website.
Press
Serve as a communication tool for current members & press. Publicize information and updates for both members and the press.

Requirements

Ease of update
Should provide an easy way for a volunteer to learn how to update an event, and create posts. The design interface should be easy to use so if updates in the images and the copy of the website is needed, it can be easily done by another person rather than the web designer.
Affordances needed
Organizers should be able to post announcements, accept donations, embed youtube videos, write blog posts, allow for mailing list sign up and volunteer sign up.
Look and Feel
The look of the website must convey a sense of trust, power, as well as professionalism.

After the interview, I compared several website building platforms including Wix, Squarespace, Webflow, and Wordpress.com, and finally recommended Squarespace due to the ease of update it provides for the organizers, as well as the professional and stable templates the platform offers.

Site Maps

Creating the sitemap helps getting stakeholders onboard on the organization of the website.

Iteration one of the sitemap is simple. The stakeholders were able to comment on it and use it as a reference in discussions.

This is the final iteration of the sitemap.

Wireframes

With the audience specific goals and the requirements in mind, I created wireframes and collected feedback on them from the stakeholders and collaborators. Before moving to designing on Squarespace to build the website. These wireframes also helped my collaborators to write the appropriate copy for the site.

Branding

I followed the branding style guide created by our graphic designer, Jennifer Hwang.

Iterations

Some more iterations of the site are created on Squarespace to fine tune the website.

Website Walkthrough

Reflection

Prototyping

Because it was a rather fast-paced project, and the client with overall happy with a Squarespace template, I did not protoype the website first in a prototyping software. In my future projects with a longer timeline and more specific requirements not satisfied by a template, I should try prototyping first in order to provide different versions and test their usability before using a website building platform.

Web Architecture

Even a simple website requires careful consideration on the architecture. I met with the stakeholders to really fine tune the organization of the site and placed the ease of use for visitors at the forefront. Outlining the intended audience, and each of their goals before creating the site map is a fast way to help keep the project user-centered.