Role
Product Designer
Time
6 Weeks
Task
Responsive website &
brand identity
Tool Stack
Webflow, Illustrator, Photoshop, Typeform
INTech Foundation is a non-profit organization with a mission to help girls and gender expansive youth of color create tech solutions for social good. INTech gives its scholars an essential education in the foundations of computer science and technology.
While INTech has successfully served 1500+ scholars to date, the organization is undergoing program & organizational scaling to serve underserved communities across North and Latin America. INTech wants to increase overall engagement from their current & potential scholars, educators, partners, and donors through the website.
There is an opportunity to design a responsive site that increase engagement for INTech Foundation by emphasizing their mission, driving scholars and their parents to programs, and improve the donation process.
I conducted a user survey of 10 questions with three goals in mind:
1. Determine the level of experience and knowledge gaps of most people with educational tech.
2. Understand pain points in the process of contributing to organizations such as donating& volunteering.
3. Understand what factors influence people the most when deciding what organizations they want to be involved in.
Users want to learn about the mission and the people behind a non-profit before they get involved.
What factors influence you the most when deciding which social issues/organizations you want to be involved with?
“Values alignment”
“Usually if the people running it look like the people who the org serves.”
“If it hits home and really touching to me.”
“Mission statement and the history of organization”
People don’t recognize the lack of women & girls of color in tech as a social issue.
On a scale from 1 to 5, with 1 = very accessible and 5 = no access at all, how accessible would rate the tech industry for women and girls?
40% of users said somewhat accessible.
In reality, Black and Latinx women only make up 3% of the tech workforce.
The responses from the survey revealed a few key points.
One major takeaway was that the website should not only showcase INTech’s mission but visually show how women of color are underrepresented in the tech industry. This is because almost half of users reported a lack of knowledge on this issue.
I also learned that people want the opportunity to learn more about the values of an organization before they donate or become involved. This meant that the website should provide clear information about the mission and how INTech intends to tackle the social inequalities in the tech industry.
I worked with the executive director of INTech Foundation to define the information architecture of the site. A part of this process was conducting a card sorting exercise with the ED to learn more about the organization goal for the new website.
Summary of card sorting exercise
Through this exercise, I learned that a lot of information on the current website was not easily accessible to users. As a result parents of scholars struggled with registering for programming.
Site mapping
The next step was to work with the INTech team to build the new site map. After iterating, I developed a site map that simplified the organization of the site so users can easily access information about INTech.
After talking with the INTech team about their goals for the new brand it was clear that they wanted a refresh that would appeal to their scholars.
This new brand builds off the idea that INTech's goal is to inform, inspire, and innovate the new generation of girl and gender-nonconforming technologists.
When ideating on the design, it was important to consider that the INTech team would need to be able to easily build more pages when necessary. With this in mind, I worked to establish design patterns that would be flexible for different kinds of website content.
The process of establishing consistent UI design patterns was to ideate solutions that could be reusable throughout the site. While sketching and wire-framing I created UI design patterns that are reusable solutions for elements like type hierarchy and design components.
The final website was built in Webflow to ensure that the INTech Foundation team could easily update the website.
