Personal Honours Project - Mk. 1 Prototypes - Experience Prototyping #1

After what I could only describe as a disaster of a presentation, I went back to my desk to lick my wounds. Chris and Andrea didn't seem very enthused with my idea of using circles and paths to break down code structure; I felt like I was on to something and wanted to continue pursuing it. I just needed to rethink my approach on how I was going to do it.

I spoke to Chris the following day who came to check how I was after the presentation - I told him I was planning to continue with the circles idea but I admitted that I hadn't presented well at all the day before, which Chris agreed with. Even with all of my sketches on the wall, Chris was still struggling to follow what exactly I meant - my main problem was that I was not conveying what exactly the experience would be. 

Rather than stress about how I would do this digitally, I took the plunge and decided to work physically. I knew I was on to something and I was gonna prove it works by any means necessary. As it happened though, creating this experience prototype physically was the most fun I've had with my project all semester.

First step was to plan how I was going to do this physically. Luckily, I'd been sitting with a wooden board since the end of 3rd year from a previous project so I quickly identified this as my new "phone screen".  I then sketched up a rough plan of what I wanted and I would need to make it work. Nails, string and paper - lo-fi materials and working as far away from technology as possible. 

To tackle my main problem, I knew I would have to start utilising actual content. The only thing was that the lightbulb example I had become hung up on using wasn't actually a very good example for teaching JavaScript - or rather, it wasn't varied enough for beginners to learn different parts of  the language. Taking inspiration from Codecademy, I made sure that I would be teaching my users something fun they could do with coding, and that's why I selected programming the user's phone to play rock, paper, scissors with them within the app as an easy introduction to what we can do with JavaScript. The next step was breaking this down for users to understand.

From this...

From this... this. this.

Breaking it down meant writing out my own code for the program, and then breaking it into 6 more manageable chunks. In unavoidable cases, I split some sections into sub sections but I didn't actually mind doing this as I think it created a bit more variety in the path structure I was aiming for, while making the structure more visually appealing. Once I'd broken down the code into steps, I then created a mock up path and what the user would be expected to do at each 'hub'.

With the steps mapped out, it was time to create the physical prototype. As I mentioned, the board from last year's project was to become my "phone screen" and I mapped out roughly how I think the path should look for this program - there was no real plan other than trying to make it look visually interesting to users. I used a roll of masking tape to measure the circles and map out the connections to each circles, before hammering in nails on the edge of each circle and cutting bits of strings to create the paths. This process was oddly therapeutic.