Designing for Inclusion
Girls Who Code is a national non-profit working to close the gender gap in tech by giving girls the skills they’ll need to pursue opportunities in computing. I led the research and design of a companion website for the NYT best-selling Girls Who Code: Learn to Code and Change the World to foster a sense of belonging and empower girls to see themselves as coders.
Company: Girls Who Code
Role: UX Design, User Research
Timeline: Summer 2016
The Challenge
If you’d visited the children’s section of your local bookstore a few years ago, you’d find that all of the books about coding had something in common: they are all targeted toward boys. As of 2015, fewer than 30% of employees at major tech companies were women, and the lack of female role models is one of the many reasons why girls’ interest in computer science starts to fade as early as middle school.
To coincide with the launch of Girls Who Code’s first book, my challenge was to design a companion web application to get 8-10 year-old girls excited about coding and foster a sense of belonging and community. This included conducting research, developing a concept, creating a design, and conducting user testing to validate my thinking.
The Approach
I began by conducting interviews with girls and their parents to understand their interests and personalities, along with a lit review and comparative analysis. I quickly learned that 8-12 is actually a huge range in terms of reading level and computer skills. Based on these conversations, I created three personas and the following set of principles to guide the final concept:
Simple enough to be accessible for younger readers, but flexible enough to keep it from feeling childish
Closely tied to key themes and characters in the book, but still interesting for those that haven’t yet read it
Inclusive and representative of readers’ diversity of backgrounds and interests
Low-fidelity, clickable prototype that I created to test the “code yourself” concept with potential readers. Each girl I spoke with was very excited to use code to create her avatar, and many expressed disappointment that the prototype didn’t actually work yet.
The Solution
One of the constants that I found in my research was that there were no constants. The final concept plays into that diversity by giving readers the opportunity to “code themself” and create a custom avatar using basic drag-and-drop coding. Secondary features for the site included an interactive glossary, a gallery of project inspiration, and a map showing girl coders around the world to foster a broader sense of community.
“Can I be a part of it?”
During each research session, I asked the girls which character resonated most with them. I was surprised to learn that every single girl gravitated toward the characters that shared their interests— not the ones that looked most like them. With this in mind, I limited the options for physical personalization in the “Code Yourself” editor in order to shift the focus toward each person’s unique interests instead of their appearance. I designed the editor to make it easy for girls with no coding experience to personalize their avatar and see the changes reflected in written code. At the same time, the design allowed for more experienced coders to click into the code to make changes that go beyond the pre-set options.
