we build black
Context:
We Build Black is an organization that focuses on providing a community and collaborative learning space for black designers and technologists. My designs were presented to the team. Due to resource constraints they went with a different design in the end.
Role: Web Design, UX Design, Visual Design, Research
Methods: Qualitative Research,
Team: Milan Gary,
OverView
The Project
​
The old website did not properly relay all that We Build Black has to offer. The mission was getting lost in the lack of information organization.
​
The End Goal
​
To create an updated website with more clarity around where information is.
The User
​
The target audience is black programmers and technologists of all ages.
Design Process
1
Analyze old website
2
Interview
+
synthesize
3
Sitemap
4
User flow
5
low -> high
Wireframes
Analyze old website
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.
Interviews
Mentor for recently incarcerated individuals
"
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.
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
Synthesis / Key Takeaways
Organize Information
Answer the 'How'
Too youth-centric
Too many buttons
Show don't tell
Sitemap
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.
NeW HOMEPAGE
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 instructor's background and the opportunity to reach out.
​
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 real estate on the page
The yellow acts as a higlhighter color
The three pillars which speak towards the mission of WBB, are 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.
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.
​
​
