During Google Summer of Code 2017, I worked with a multidisciplinary team of interns and mentors from AnitaB.org's open source community Systers to design PowerUp. As an open source educational mobile game, PowerUp allows young girls to express themselves and learn more about reproductive health and situations they face as they grow older within a safe and inclusive environment.
As the sole designer, I was responsible for creating a new style guide, redesigning all existing screens, and adding new visual assets, including three more minigames.
Jump to my solution here.
The target audience for PowerUp is
middle school to early high school-age girls.
While initially PowerUp will be marketed towards schools for integration into their curriculum, the ultimate goal is for PowerUp to be appealing on its own within the App Store.
With so many mobile games vying for their attention, I focused on keeping the game easy to learn as well as visually appealing. As a team, we also conducted user research on our target demographic to figure out what avatar style and customization options would be most wanted, which is outlined below.
Brainstorming & Research
When I joined the PowerUp team, a working alpha version was available, but it featured outdated graphics. My redesign focused on three things: visually unifying the game, giving it a more modern vibe, and making it appealing and more optimized for the target demographic.
Shifting Visual Direction
Popular mobile games played by young girls like Candy Crush, Crossy Road, and Angry Birds feature brighter and more pastel colors, with 2 or 3 core repeating colors. There's a theme consisting of recurring visual elements--Candy Crush, for example, uses hearts and candies. The color palette and theme unify the graphics into one cohesive product. Overall, the games look fun and compelling at a glance, attracting players who are looking at a wide breadth of games in the app store.
During GSoC 2015, the PowerUp team conducted initial research on the player's avatar art style. The team approached groups of girls from middle schools and summer camps in the Boston area.
Of the art styles they drew, the more realistic styles were less popular than the cartoony style with over exaggerated proportions, which was used in the preliminary version of the game. The team also found that the girls wanted a greater variety of customization options that would reflect their cultures and styles. We conducted further research over the summer, described below.
Following Google's Material Design specs, I created color schemes centered around a primary, secondary, and accent color, assuming they would be juxtaposed with a white background (the third, darkest color was for borders only). For all the options, I stuck with yellow as the accent color--color psychology shows that yellow is associated with youth, energy, and positivity, aligning with PowerUp's mission of empowerment.
The pink-centric color scheme would be consistent with other media and products marketed towards young girls and thus would have its mass market appeal. But since PowerUp is meant to be an environment for players to express who they truly are beyond societal expectations and stereotypes, I made a blue color scheme as well since that would less typical for products for girls. The lavender color scheme was meant to serve as the in-between gender neutral option, but seemed too typically feminine as well, so my team agreed to move forward with the blues.
Stars signify super powers, like invincibility in Super Mario Bros games.
For the avatar, I created 3 avatars in different styles. The first, Lily, displayed the most realistic proportions; the second, Sarah, was designed with less figure to allow girls of all body types to feel included; and the third, Emma, represented the big head, small body proportions of many popular toys for girls.
We asked 40+ girls in our target age group and found that most people preferred Emma overall, but enjoyed Sarah's body.
I combined both of them into the final avatar base.
Our research also showed that girls were excited to see further customization options that weren't stereotypically feminine. With this and our goal of inclusion in mind, I created a variety of different avatar customization options to encompass various cultures and persona styles, including the 14 hairstyles and 4 outfits pictured here as well as 16 skin colors, 6 eye colors, 4 accessories, and 2 religious options. Due to time constraints, this initial set is still very limited.
The minigames were designed to be fun but educational, so it was important to make the mechanics easy to use for our target audience. During user tests, we had many reports that it wasn't obvious how to play the games, so I designed tutorial screens for every minigame to make them easily understandable.