Personal Honours Project - UX vs UI

Translating the physical Mk.1 prototype experience digitally was the next major challenge for my project. After successfully testing and refining the experience based on the previous suggestions, I went back to paper to sketch the new experience. 

To start with, I realised that the path system I had use for the physical prototype would not translate properly digitally without looking extremely complicated and intimidating - something I was looking to avoid when introducing beginners to coding. 

I began sketching ideas for alternatives to the paths but still tried to work them in, in some form. This included looking at things like turning wheels to select options and swiping blocks to fit it into the circles to choose actions. I looked at incorporating colour to the wheel to create familiarity between the different aspects of JavaScript (orange for functions, green for arrays etc), and how the wheel could possibly change colour when the user chooses an action. However I was finding myself getting frustrated with trying to make this work on a small screen of a phone.

I spoke with Chris through the week who gave me some good food for thought concerning my project. He asked me what I would like to do after uni and I replied that I had an interest in UX and UI. After this, he asked me whether the focus of my project was more UX or UI focussed - if it was UI focussed then I would need to take more risks and explore the wheel approach and make it work for the phones. If however it was more UI focussed then I could afford to be more conservative with my decisions to make the experience better for the user.

Ultimately I felt that this project was more suited as a UX project, especially since I was dealing with something as daunting as code for beginners - creating a complicated UI would not benefit beginners and so it was time to consider more "conservative" options.

Replacing the progress bar with the path system seemed like the best solution for incorporating it somewhere in the design and is a nice alternative to a standard progress bar. Dropping the circles and instead using plain text for explaining the tasks at each hub meant that I can still achieve a strong UI without overcomplicating it for the user. I also decided to keep the 3 options for choosing what action to complete the task and this seemed to go down well in the physical prototype. It was just a case now between choosing a slide to choose interaction or have a grid where the user can see the 4 options.