Pip is an iOS app that allows children to build things inside their phone by manipulating creatures. Each Pip has its own special talent and when they shake hands all sorts of magic can happen. Pip is a set of building blocks, each with its own tool such as photos, text, or color. All Pips connect to each other, allowing users to quickly build new tools.
Myself, Peter (IDEO), and Jon (Pentagram) collaborated to design and develop an iOS app we named Pip. The four stages of designing Pip:
- Design sprint
- App flow and wireframing
- Interaction design
1. Design Sprint
Learning to code is difficult. Our goal was to design a way to make coding more approachable. In order to do so, we needed to examine what made it hard.
- Approachability - The interface for the command line and most IDEs isn’t very user-friendly - there’s no clear path on what to do or the possible paths you could take.
- Results are slow - Someone cannot easily produce an app without writing hundreds of lines of code.
- Parity - Programming concepts have little parity with the real world, at first glance.
Given these issues, how can we design an app that is approachable, enables the user to see results quick, and has parity with the real world?
In a few days, the team worked closely together to brainstorm and determine the app's core concept and functionality. We whiteboarded, discussed, rapidly prototyped, and tested out different ideas before arriving at one main direction in which to move our product.
2. App Flow and Wireframing
We interviewed children ages 5-8 to learn about their goals and desires in their current toys. To narrow our scope, we defined our persona as a fourth-grader with an interest in building things (legos, train sets).
We then moved to doing a task analysis from opening the app to connecting Pips, writing user stories, creating app flow, and determining the precise functionality at every stage.
The goal of this process was to create an experience that was simple to understand and pleasurable for a young child to interact with.
After sketching out wireframes for flows, we did several sessions of user testing. From the testing we learned several things. First, we learned that connecting the Pips with one another was difficult, so we re-designed the connection mechanism so users could more easily connect Pips.
4. Interaction Design
We prototyped the interaction and transition between each screen while working across engineering to make sure the design was feasible at a technical level.
One key missing in our early designs was a purpose for the user. Many games have some form of this -- with Pokemon cards, users want to collect the strongest Pokemon to beat their friends, with Angry Birds, users aim to save their eggs from the green pig enemies. In order to design a successful educational toy, a toy needs a "why." Why might a child be interested in playing with Pip in the first place? It's important to make them love the question -- only then, will they be motivated to make the long climb up the mountain (Case
While didn't have a "why" in mind for the children when we started, later through the process, we started creating Pip Sets, such as the Word Wizard. These Pip Sets helped bring us closer to creating a more goal-oriented environment for children, and enabling users to more clearly see some end goal of what they could build.
Pip is an iOS app created by myself, Peter Slattery, and Jonathan Rinker using XCode and Swift.