Black Girls CODE
With a compelling mission to educate more young black girls and girls of color to learn how to code and be part of a community of women in the tech industry.
The current website
What is Black Girls CODE
Black Girls CODE is devoted to showing the world that black girls can code, and do so much more. By reaching out to the community through workshops and after school programs, Black Girls CODE introduces computer coding lessons to young girls from underrepresented communities in programming languages such as Scratch or Ruby on Rails
The current mobile site: Home page(left), hamburger menu (middle), upcoming programs page (right).
THE CHALLENGERedesign the website to recapture the essence of Black Girls CODE’s mission in 3 weeks
Our goal for the project was to truly capture the continuous work of Black Girls CODE has accomplished. The redesign will focus on a fun and more streamlined website that translates across various devices and platforms.
My Role
I led the redesign of the Black Girls CODE website between July 23, 2020 through August 8, 2020. The team consisted of two other designers in which we collaborated on the Donation page and the About us page.
The project was presented on August 8,2020 to a group of fellow designers and our instructor.
The Approach
I approach the redesign in three steps, while conducting research throughout:
Core Experience
Brand Identity
Visual Interface.
Core Experience: Learning about BCG
After speaking to users, we could separate two types of users, the Donors and the Parents.
Donors
Did not feel confident in donating to BGC due to the design of the website. They felt that if this is a organization with a goal to teach girls coding and technological advancements the website should portray a professional design.
Parents:
It was not clear as to how to participate in any of the programs. They also tried to get more information, but the website lacked any way of contacting the organization.
2. Brand Identity
After conducting a competitor analysis it seemed that the brand’s identity needed to be recognizable yet invisible at the same time. Girls who Code does this well with the continuation of micro interactions throughout the website, a consistent logo and the gradation in the background.
In comparison, Black Girls CODE’s brand identity is all but nonexistent. Multiple logos are used throughout the website, layout of each page changes.
“How might we make it easier for users to become educated about Black Girls CODE's work and sign-up to volunteer, donate, or enroll their kids?”
3. Visual Interface
Definition & Ideation
With the user research and the stakeholders feedback in mind, the team furthered their research by conducting a competitor analysis to figure out how to make the navigation simpler. The result after conducting several card sorting activities with our users is the following; Limiting the top navigation to four buttons with respective pages as drop-downs, also creating a hamburger menu for items that were secondary: Programs/Events, Parents/Volunteers, About us, Donate
Testing & Iterating (Low-fidelity,Mid-fidelity Prototype, Style Guide, High-fidelity Prototype)
Low-Fidelity Prototype
When asked all of our users mentioned that they loved the mission of Black Girls CODE. Keeping that in mind, the team decided to showcase an image of a girl learning to code and next to it Black Girls CODE’s mission statement.
Mid-Fidelity Prototype: A/B Testing & Usability Testing
The team conducted a usability test with participants between the ages of 18-30. Overall, users like the use of bright colors, animations, and the homepage layout. But they thought overall the website did not feel like one whole site but three different sites.
Prototype A included a drop-down search bar and a donation pop-up.
Prototype B included an embedded search bar in the top navigation
Style Guide
High-Fidelity Prototype (Versions 1,2)
With our users in mind, we started developing the high-fidelity prototype, however, with three designers designing different pages it did not seem cohesive.
So, we tested with three users to get their thoughts. Overall, users thought it lacked depth, layout & color choices on subsidiary pages, etc. were confusing.
Home Page: Left: V.1 Right V.2(Final)
About Us Page: Left: V.1 Right V.2(Final)
Parents Page: Went through 4 versions
High-Fidelity Prototype
High-Fidelity Prototype: Home(1),Donation Page(2),Parents Page(3),About Us Page(4)
Reflections & future thoughts
Due to the time constraints we were not able to build out all functions of the site, such as the chapter map on the homepage.
Throughout the project, I learned that iterating is key to any good design and in a team, there has to be a leader to figure out the strengths of each team member and to assign jobs accordingly.
If possible we would like to interact with Black Girls CODE to share our findings and to even re-design their website.