Client
Code Divas
My Role
UX Writing | Prototyping | UI Design
Challenge
Code Divas, a funded startup south of Austin, Texas, came to the kickoff with one clear objective already set in stone for their app to teach young girls to program: no 'lego bricks!'
"Nooooooooooooooo!"
"But wait," I asked, "don't all of the best code learning sites teach kids to program using bricks?" "Yes, but we want to be different," was the reply, "for two reasons: First, boys' and girls' brains are wired differently. Both can stack blocks, but girls get bored quicker, preferring activities that stimulate their imaginations. Second, brick-stacking does creates muscle memory, as those sites claim, but it's the wrong muscle memory for programmers who need to become proficient in reading and understanding actual programming languages, from the start."
"We want you to come up with an app that can make even the most difficult programming language seem simple and entertaining to learn, and retain."
'simple and entertaining,' no pressure!
Discovery
Independent research of both boys and girls age 10 years and under, at CodeUp Weekend events hosted by local startup incubators that teach programming with code blocks, revealed the return rate from previous weekends to be 40% for boys, but 5% for girls over the course of four consecutive weekends. This disparity is reinforced by the Girls Who Code organization, who spotlight the decline in the percentage of female programmers while they potentially exacerbate the problem with their use of code blocks as a means of teaching programming to girls.
1:1 studies of both boys and girls learning programming with the help of code blocks during four consecutive CodeUp Weekends were the inspiration for the following persona mood map. Warm colors represent high levels of user engagement, while cool colors represent low levels.
Ideation
Rather than starting out with freeform brainstorming, I decided to consult the programming language, C++, itself for clues about how to share its secrets with our target audience. As is true with so many things, it helped that I too was completely unfamiliar with C++, as it kept me from being distracted by preconceived notions. It also helped me to see things more like a child - technically unrelated things, but tangential, in a child-like way of thinking.
The greeting 'Hello world', and terminology like 'iostream' evoked visions of meeting someone in a new and unexplored world, very different from the one our traveler comes from, and a magical stream that enables her to cross over. Remembering that our persona, Casandra loves adventures, this seemed like the right road to journey down.
But how would I turn a sterile, monochrome console experience into a fairy tale adventure any 9 year old girl would enjoy, without losing the purpose of the app, which was to teach C++ programming, using the programming language?
My first clumsy approach was an effort to convey a protagonist that the user could easily identify with - a princess and her sister, separated by two kingdoms: the Kingdom of In (input) and the Kingdom of Out (output) in the Land of Consolia (console). The storyline was a natural fit for the 'Hello World' lesson that every programming tutorial begins with, but my execution wasn't taking into consideration the space needed for actual programming code and narrative.
The solution, was right under my nose. Drawing inspiration from Apple's Finder icon, there below in my Dock, I concocted a way for the Input and Output sides themselves to take on the personas of the two princess sisters, while pulling double duty as the two kingdoms they each were stuck in.
The resulting sketches showed two characters that were no longer peripheral and distracting to the lesson, but were now ensconced as fixtures in every page turn, with their dialog written as commented code, and plenty of room for the narrative.
The final design included the RUN button (vital to the lesson) as the bridge that allows the sisters to cross the Stream and reunite, and illustrates a good balance of storyline and code learning.
Story Development
Working closely with Code Divas, I roughed out a script that fit the classic fairy tale scenario while teaching kids to use C++ programming language to output 'Hello Sister', thereby enabling the princess sisters to communicate with each other.
Here is a sample:
In Future Sprints
The development of an open source IDE that will be identical in look and feel to the app's interface, and will allow for a seamless brand experience when users want to code their own projects. Stay tuned!
See Other Work
