Girls Who Code

summer 2017 · Product design

I spent my summer as a product design intern at Girls Who Code! For those who don't know, they are an incredible nonprofit that aims to close the gender gap in the tech world. They do this by organizing nationwide after-school and summer programs to get more girls interested in computer science.

Girls Who Code also builds products to support this mission, such as an mobile app for alumni called Loop, and a new learning platform for their club curriculum called Girls Who Code HQ.

This summer, I imagined a cohesive Girls Who Code HQ experience for the future, employing UX research and design to explore how these two existing platforms for learning and community might integrate and evolve as Girls Who Code grows.

background

Girls Who Code Loop is an iOS/Android app that connects girls to their larger Girls Who Code community after they joini a Summer Immersion Program or a club. Its goal is to get girls connected to CS-related opportunities beyond GWC programs - whether through meetups, hackathons, or internships - and does so by providing a platform for girls to discover and post about them.

Girls can join "loops", which are interest, location, or affiliation-based groups of Girls Who Code students, and make posts to all other members in those loops.

Examples of the types of loops girls can join.

During the start of my internship, I focused on designing and prototyping new features that needed to be made for the app. These included an aggregated post stream, a saved content collection, and a more streamlined way to write new posts, which also resulted in structuring a new flow for the app.

Some screens from high-fidelity mockups of the stream, saved content, and new posting features.

These features (which as of August 15th 2017 were put into production!) were to support our high level goal for Loop, which is for it to be a venue for girls to more easily discover and keep track of opportunities, and share what they know with the Girls Who Code sisterhood.

Girls Who Code HQ is an online learning platform for both students and facilitators, that hosts their club curriculum. Although it was already designed, I supported the platform for its August 2017 release with logo design work, making CSS revisions along the course of its development, and other small design changes.

the problem

As Girls Who Code grows, how can we make our two platforms - Loop and HQ - provide a more effective, cohesive, and personalized learning experience for the students and alumni that progress through the program?

After some research, it was clear that currently there's a gap between what the platforms ideally aimed to accomplish and what they actually were doing.

Since it's Girls Who Code's goal to support Girls in computer science, and acknowledge the importance of collaboration and projects, joining Loop and HQ (and consequently, community and learning features) is a natural next step in building an effective product for students and alumni.

My research began with interviewing others in the office who worked closely developing and assessing Loop and HQ, asking what strengths/weaknesses the platforms had, and what opportunities they had in overlapping. Here were some main takeaways!

Receiving and giving feedback to - as well as finding mentorship and community within - other girls in Girls Who Code are crucial aspects of how our students learn, gain confidence, and find inspiration to pursue computer science.
A web version of Loop is high priority - reasons are that in surveys many girls wrote about wanting it, some girls didn't have smartphones, and sharing ideas about projects and programming is often more intuitive on desktop.
The current format of the learning platform doesn't allow for a very personalized learning experience. When we extend the curriculum to beyond just girls in clubs, how can we better facilitate girls giving and receiving feedback on each others work?
It feels important the Girls Who Code be able to deliver a cohesive experience for their girls - integrating the two platforms via one login process is a key step in allowing the experience to be streamlined.

wireframes

An overarching question I noticed from the research was that, in combing HQ and Loop (and consequently, building an experience for all students, alumni, and facilitators involved in the program), was "How does the experience on this platform change depending on who you are?". This question guided my design work, and naturally I thought to start with imagining a personalized home page for each user group: students, alumni, and facilitators.

These wireframes were formative in establishing how learning and Loop content would be accessed through the overall platform. They were also key in defining the varying needs for different user groups and illustrating how learning and social content might be catered to who you are, where you are in your learning process, and what kinds of way you want to engage with the community. For example, we may want to highlight learning material and activities for girls in clubs, while highlighting CS opportunities and Loop content for alumni of the program.

The entire experience would fall under the name "Girls Who Code HQ", with curriculum materials under the "Learn" tab and social features under the "Loop" tab.

The app map illustrating how learning and community content are accessible through one login.

I created an clickable prototype of these wireframes using Adobe XD to illustrate navigation of the platform.

I also did some work exploring how the curriculum could be augmented by social features; integrating HQ and Loop opens the possibility of encouraging girls to Raise a Hand (Loop's way of indicting you have a question) and answers others' questions about learning material on the activity pages themselves.

Naturally, I explored what a web interface for Loop would look like. Most of my work was in noting all the existing functionality - engaging with content from an aggregate stream, joining Loops, writing posts, commenting, etc. - and translating that to a web version.

high fidelity prototype

Loop

The low-fidelity mockups helped guide the rest of my work. I narrowed down my focus on the Loop aspect of the experience - it was a more urgent feature, and open questions surrounding the curriculum expansion made the Learn experience more difficult to design around. Higher fidelity mockups meant more detailed experimentation in color palette and layout. Eventually I came to a design that was consistent with the current styles of HQ and Loop, yet remixed their components in a fresh way.

Some initial experimentation for color and layout of the web version of Loop.

This web version of Loop includes being able to make a post in multiple Loops - not something that can be done currently - to encourage girls' posts to reach as wide of an audience as possible. Additionally, empty space on the page can be utilized for pinned content, which can be important Girls Who Code announcements, corporate sponsors' events or internships, or featured projects that girls share.

The final design for the Loop home screen, which features a stream of all posts in Loops you subscribe to. This animation includes the interaction for making a new post.

A view of what a "Find a Mentor" Loop might look like, featuring posts associated with that Loop. Additional information, such as a description of the Loop and its members, is displayed on the right.

searching across HQ and Loop

A large merit of integrating learning and social content into one platform is the ability to search across everything Girls Who Code has to offer. By responding to terms such as "robots" to "internship", a search feature that aggregates all relevant learning material, loops, posts from other girls, and featured opportunities ensures we are allowing girls to access and explore as much as posssible.

extra fun

Finally, what coding-related platform would be complete without a way to hack it? Girls can "hack into HQ" itself by accessing a fun hidden console that could let them change the theme and color of their profile.

reflection

Two main I faced over the course of this project were:

Open-endedness of the exploration. The initial prompt of this exploration was super broad - explore what it means to integrate HQ and Loop. Since my time was limited, and there were many directions I could have gone with this prompt, it was important to narrow down the scope of my project to things that I could accomplish during my summer. In this case, those things included putting a name to the platform, defining its structure, and creating high fidelity prototypes that focus on some key benefits that the integration would bring to both students and the organization.
New questions popped up continuously. This is kinda related to the challenge of scoping, but one thing I had to learn was which questions to tackle and which ones to leave open. As I continued exploring the problem space, more and more new questions came up - for example, how can we make giving and getting feedback accessible to all students, even ones that are under 13 years of age, and by law can't write posts associated with their name online? This is one that still needs research, and provides a basis for future exploration.

Though, I think working through such a challenging and open-ended project was a really valuable and unique experience - it gave me more confidence in exploring undefined problem areas and learning to come to a solution through continuous feedback and refinement. It was also super refreshing to do work for a socially-oriented organization like Girls Who Code, and be a part of a team so dedicated to empowering girls in STEM!

next steps

Obviously this project has a lot to go before being put in production, so here are some next steps for work related to this platform:
Designing social experiences into the learning material. How will the contents under the "Learn" tab change when we incorporate the ability to raise hands, share images of work, and giving tips to other girls into the lessons and activity sets themselves?
Making Loop even more conducive to finding opportunities and exchanging support. Is there a way to make Loop posts in a format more tailored to their content - e.g., special formats for posts about events or ones that contain code snippets?
Seeing how this fits into Girls Who Code's product roadmap! I've finished my work with GWC (for the summer, at least...), so what resources can be allocated and work can be done to push these designs further into a live product for our girls to use?

Back to all projects