Girl&Code teaches young girls how to code for the web. Add courses and goals, complete lessons, participate in weekly challenges, and earn badges. With this mobile app, you can code anytime, anywhere.
THE PROBLEM

The idea of Girl&Code emerged from a real problem. As time goes on, increasingly more aspects in our lives are powered by technology, yet women aren’t represented in the roles that make technology happen. Without their representation, their voices, ideas and designs won't be included in shaping the future of the tech industry.

THE SOLUTION

To create a fun and convenient system for young girls to learn how to code using a mobile application. The goal is to help girls pursue their passion of coding and to encourage them to contribute their voices to the field of technology.

IDENTITY
LOGO

Inspired by coding, the logo incorporates HTML character entities to form two girls. The logo was carefully crafted so that the girls would overlap, which represents the brand's mission of girls coming together through coding to close the gender gap in the tech field.

RESEARCH
PROTOTYPES + DISCOVERY

The first round of user testing the app was through a paper prototype. From this session, I realized that having an incentive, such as daily goals or collectible badges, would give the user motivation to use the app daily.

WIREFRAMES

Wireframes were created based off of the feedback I received from the paper prototype user testing. The addition of a progress bar which allows users to see the duration of each task beforehand was received positively.

FINAL DESIGN
KEY FEATURES

The research helped narrow down the main features necessary for the app. Learning to code can be quite challenging, so it was important to create a flow that would motivate girls to open the app every day and enjoy using it.

ONBOARDING

Coding can be intimidating, so it was important to reassure users with fun onboarding screens which gives a brief description of the app before getting started.

COURSES AND GOALS

After creating an account, the user will be able to add courses and pick a daily goal. Courses can always be added or removed and the daily goal can be changed if the user changes their mind.

COURSE LESSONS

After selecting a course, the user can now start taking lessons and complete exercises. Each lesson keeps track of their progression, making it easier for the user to keep track of where they last left off.

1. Select course
2. Start lesson
3. Continue lesson
4. Continue lesson
5. Solve exercise
6. Complete lesson

COLLECT BADGES

After completing specific tasks, users can receive an award for their achievements–in the form of badges. While each badge is unique from the other, they all represent an investment in learning.

CHALLENGES

The user will be given daily and weekly challenges to solve, with each one becoming progressively more difficult depending on the user's skill level. Having challenges is a great way for the user to review and practice coding concepts, all while having fun.

BRANDING

PROMOTIONAL VIDEO

A short video was created to promote a one-day conference which would hold workshops and inspiring female tech speakers. The animation was created and paired with an energetic and upbeat song so that the promotional video would evoke a positive tone to the viewer.

BRAND ASSETS

Brand assets for the convention were created containing HTML character entities as patterns and graphical elements. With the target audience being primarily high school aged girls, it was important to create a system that looked fresh and conveyed confidence.