Personal Honours Project - Mk. 1 Prototypes - Prep

With Mk. 1 prototypes due on the 22nd of February, it was time to begin turning my thoughts into an actual app to present on the day. Moving the giant sheet off my desk and onto a nearby wall for reference, I began sketching out the different screen states.

Back in December in my Honours Concept presentation I had already outlined my prototyping process so I knew roughly what I should be doing and when I should be doing it.

My process was:

  • Paper prototyping
  • Basic coding prototyping
  • Edge prototyping

A critique that I'd had from my last project working with apps was that I didn't show enough of my sketch and paper work, so I made that a priority this time when prototyping. That was part of the reason I spent a whole week brainstorming and visualising my thoughts on paper - not only was it helpful but it also helped visualise my process. While I sketched out all of my screen states, I put particular emphasis on sketching out the learning experience - if I didn't get the experience right now, the rest of my project would suffer later.


After brainstorming a number of "coding metaphors" (or ways coding could be interpreted by someone e.g. knitting, doing a jigsaw puzzle) I'd narrowed it down to two that I felt could be an interesting way of teaching coding.

Primarily inspired by the physical programming kit LittleBits, the first experience involved using a building block approach where users would place pre-generated pieces of code represented as blocks together to create their programs and teach them about topics such as functions. For example, the app would ask the learner to arrange the blocks correctly to switch on a light. If the user got it right, the light would switch on. Behind the scenes, the blocks would do things such as initialise variables and create the if statement to make the metaphorical light switch on. 

After drawing up the screen states, I moved them onto the prototyping tool Prototyping on Paper which takes pictures of your various screen states and allows you to create prototypes of apps by just using hotspots to link the pages, and gives the prototype basic functionality. This platform was useful for showing people my idea quickly and talking them through the experience.

After exploring the experience on paper, I moved onto a quick lo-fi Adobe Edge prototype to quickly mock up how the interaction would look live. While there is little room to add complete functionality on Edge without incorporating JavaScript libraries, I made do with creating a linear animation that followed the timeline; after all this prototype was just to give Chris and Andrea an idea of how the interactions would look.

On the run up to the Mk. 1 however, I became less enamoured with blocks as I was finding that during market research this was the approach others had taken using varying degrees of simplicity - some gave more details about code, some didn't. I had a small brainstorming session where I looked again at coding metaphors. One metaphor I'd overlooked was a connect the dots - if the dots are not connected in a specific order, the picture it makes is not correct. I thought this could be easily adapted to coding - if the code is incorrect or in the wrong order, the program will usually not run. 

Looking back at my research as well, I'd become quite fascinated by the ideas of circles and paths. Once I realised this, it felt like a bit of no brainer to then explore this metaphor, as I'd been drawing it for months before. I took the lightbulb example again and redrew the editor screen - rather than having a bar where the blocks would sit, I created an outline of the lightbulb using circles. The idea would be that the user would tap the circle they were trying to fill and would be presented with 4 options for each circle. When the user has chosen an option, a line would be created to the next circle and so on until the circle is complete. If the code is correct, the light would switch on.

As I'd done for the block experience, I put the circle experience in the POP app and created another lo-fi Adobe Edge prototype that showed how the options would appear when the circle is pressed. I took this experience one step forward and created a quick Photoshop image of how it may look. Wary that I should be preparing users for moving onto text editors eventually, I took inspiration from text editors such as Sublime Text and the website Codecademy.

I also moved this image into the prototyping software Framer Studio. Framer Studio allows you to upload static Photoshop files into the software and apply code (a version of JavaScript called CoffeeScript) to the different elements to create animations. However the learning curve on Framer is steep and I'm not if it's a tool I want to use to create my final prototypes. Yet if I was successful in learning how to use the tool, I feel this would give me a great prototype to show for Mk. 2.