We Build Black

We Build Black is an organization that focuses on providing a community and collaborative learning space for black designers and technologists.

"

Role: User Experience Research, Web design, UX design, UI Design, 

Tools: Sketch, Paper, Figma, Adobe Illustrator, Adobe Photoshop

Problem

RESEARCH

The navigation bar does not reveal to the visitor what it is that WBB provides.

Subcategories are needed underneath the main tabs.

The yellow is too overpowering and makes the white text harder to read.

Yellow should be used as a highlighter color.

Too much text. Need consistency with type layout, some are paragraphs are left aligned while others are central aligned.

After reading this, the visitor still does not get a sense of what WBB actually provides for black designers and technologists.

The information architecture does not seem organized.

Old 

New

Instead of having full bleed images that distort the resolution, they have been reformatted to a size that makes them clearer.

There is space so that each is given its own realestate on the page

The yellow acts as a higlhighter color

The three pillars which speak towards the mission of WBB, is given space so that it doesn't compete with other distracting design elements.

This calendar section was added so that those who wanted to get involved can see when and where the next meetup is.

Interviews

"

I thought it was only for youth.  If it is not, then show more images of adults learning and coding.

Video content would reduce the text.

Mentor for recently incarcerated individuals

Coder, Programmer

Mid - late 20’s

Education seems very general for a tab.

 

I would like to see a lesson plan or a video of a class in action. What sort of tech is taught?


I assumed it was for younger people

Is there a calendar?

"

Creative Technologist, Interior Designer
Mid - late 20’s

"

There are a lot of ‘book us’ buttons but you haven’t told us why we should book you

Are the people we are booking qualified? Who are they?

Too much clicking, too many buttons

Key Takeaways

Organize Information

Answer the 'How'

Too youth-centric

Too many buttons

Show don't tell

Info. Architecture

On the original website, these subcategories within the navbar did not exist. Having these subcategories allow users to further explore the specific community meetups and programs that We Build Black offers. It also eliminates the need to have a 'Learn More' button anywhere on the website, thus reducing the amount of clicking that happens on a website.

The primary navbar still maintains the integrity of the three pillars, but it's within the subcategories where the 'Empowerment' element of WBB's mission is visible.

User Flow

Wireframes

I am giving both images and text proper real-estate on the page. 

Images of a community of black technologists is key in relaying the mission of WBB and will be seen on every web page. 

This is the general layout of a 'community page'. Images at the top to convey the context of this community meetup.

Quotes from visitors and community members help to elevate the impact that WBB has on individuals.

Video content is always a good substitute for text and it allows us to SHOW more tell.

This is the general layout for a 'program page'. The amount of images is reduced on this page because there is more text content that needs to be shared.

Having the program syllabus and the end deliverables is a huge addition because it allows people to see what will be taught and expected.

The profiles of the instructors are added so that people can have a better understanding of the instructors background and the opportunity to reach out.

Style-Guide

Results/challenges

The website is not currently live, the WBB development team is working on it.

I learned that it's important for a client to have the content needed for a new website ahead of time. 

The WBB didn't have a designated designer so it was helpful to bounce off my ideas with friends who are in the industry.

It was challenging to create a calendar page that didn't look like your average calendar. I wanted it to be unique but also clear.

Copyright © 2019 Milan Gary

Developed and Designed by Milan Gary

milangarydesigns@gmail.com.