Coding By Design: A Design-First Approach

We teach kids how to write by first immersing them in stories and literature. We should adopt this same approach to teach coding and programming. In fact, this is something I already do: giving every child a background in coding that allows those who are interested and motivated to proceed with programming at a higher level.

My students make apps for iPhone and iPad and put them up on the App Store. Building a well-designed app can be daunting and time-consuming, requiring programming knowledge as well as user interface and user experience methodologies. That's why we engage our students from the start in a process of designing apps to help others -- a process in which coding and programming are essential, but secondary to developing empathy and process-oriented design skills.

Working Backward

Our approach, called Coding By Design, begins with solving real problems for real people. We start with a design thinking approach to creating an app, then proceed to a prototype, multiple iterations based on real feedback, and finally a top-down approach to solving the coding problems and puzzles inherent in app development.

Coding is traditionally taught backward, starting with the smallest line of code: "hello, world!" Many students give up before they ever learn more complex things like graphics and interactions. This is like teaching someone to build a motorcycle by starting with the tiniest gear. The part is completely disconnected from the whole. Few would even get to the point of building one component of the motorcycle, let alone the whole machine. If you want to interest someone in the hard work of building a motorcycle, you should probably take them out and let them fall in love with the experience of riding a motorcycle. Then you can work your way down through the major components.

For exactly the same reason, we start teaching programming by talking about designing apps. Most people are already very familiar with apps, having used them on a smartphone or tablet. We challenge kids to "design an app that does something useful." This is a nice group activity for the design thinking approach: identify a problem and work through it systematically.

Once kids have an idea, we have them design the interface by drawing each screen of their app on a separate index card. This allows them to do a paper prototype that can be tested with real users. Each time someone "taps" on a button or control, they can flip to the next card. Changes are much easier to make when you're working with pencil and paper instead of code. We refer frequently to Apple’s Human Interface Guidelines which provide great detail about what makes apps easy and intuitive to use.

Next, we have kids turn their paper prototypes into a functioning iPhone app by taking a photo of each of their views, and uploading them to InvisionApp.com, an online mockup tool that allows you to define hotspots on images that can be linked to other views. The project can then be built and transferred to an iPhone, where it looks like a real app.

Once their prototypes have gone through multiple interactions, our students are hooked on the idea of building an app, and they've often made contact with people in the community who have a real need for an app that will solve an existing problem. We then turn to Apple’s free app design software Xcode, and Swift, the language that is used to create apps on Mac, iPhone, and iPad. Many of our students are working their way through Apple’s free high school curriculum on Swift Education. It's hard work, but by the time they have designed an interface and tested it with users, students are committed to seeing it through.

Complementary Skills

Designing apps is hard. However, defining a problem and creating multiple iterations of solutions to test out is good learning, and a task accessible to kids even if they are not programmers. Starting to think about apps from a design standpoint can also motivate kids to learn more about programming in order to make the app for themselves. If they don't have the skill set to code the app themselves, they may be able to team up with someone who has coding skills and is looking for a good idea. But even if they never finish the app, they learn the value of empathizing with another person or organization, identifying a need, and designing an authentic solution through continuing feedback and iteration. And this skill set is tremendously valuable in many contexts.

Here's one clear example. A parent at our school had developed a method of teaching children with autism how to count. She had no way to share the idea, however, until I connected her with a student in my app development class. They worked together to create Every Value Has Its Place, a popular iPad app that teaches place values using color and size. What's amazing is that this app that would never have been created if not for the connection between a parent who knew nothing about programming and my student who knew nothing about autism. Now they each know a whole lot more.

We frequently measure our success in advancing coding and computer science by looking at the number of computer science majors in the U.S. But increasingly, coding and programming skills are becoming necessary in many other fields as well. What we really need most is a widespread understanding of coding literacy, and to create more opportunities for students interested in a range of fields to express themselves using code.

As educators, strive to make real connections between your students and others in the community, so that they can design real solutions to real-world problems. Show them that they can change the world, and that their design and programming skills can truly make a difference to others in need.