Personal Honours Project - Mk. 2 Prototype

Mk. 2 was the first on screen iteration of the project. After my discussion with Chris about focusing on a UX project as opposed to a UI project, this played a big part in what wireframes I’d created earlier made the final cut for the prototype. A lot of the wireframes showing how the users could select and find topics to study were dropped in order to make a more streamlined prototype.

The prototype from Mk. 1 became the main focus of the Mk. 2 - the scenario being that the user has spent several months with the app and is ready to move onto the final exercise of a course called “Introduction to JavaScript”. To complete this course users will create Rock, Paper, Scissors to test themselves on several features of JavaScript.

Introduction Screen

The first screen of the experience and it makes sure to give the learner an overview of what they’ll be doing at this exercise. The “What you’ll use” bar shows the symbol pattern I designed and used that shows which aspects of JavaScript the user will use through out the experience - every time the aspect is mentioned through out the experience, the corresponding symbol is featured somewhere to build familiarity in a visual way. The bar can be swiped to give a short description about each aspect of JavaScript and the corresponding symbol.

The use of symbols was used in place of colours to build familiarity and distinguish between different aspects of JavaScript as to worked better with the branding of the app without the need to include any extra colours. They are also inspired by graphic organisers used in self-assessment learning. 

The introduction screen also gives small additional information about the difficulty level for the learner and a rough estimate of the time scale it would take to complete the task if they tried to do it in one sitting.

Using the instructions button takes the user to more detailed instructions to use the experience but this was more put in place for showing the experience at the degree show than for seasoned users of the experience.


Moving on, the user can see that exercise is split into 6 major tasks (or steps) and 12 tasks overall to complete the exercise. Each major task gives a brief description about what the learner will be expected to do at each task. The symbols at the side of each task give the learner some indication of what they’ll be working with at each task. At the bottom of the overview, the user can choose to begin the task or see the code that they’ll working through the exercise to create.

Exercise Screen

In keeping with the Mk. 1 prototype, to complete the task users use multiple choice to choose the best course of action to complete the requirements of the task. Each task clearly states what the learner is doing at each task with additional information to give the user some more context. The options are in the centre of the experience and there’s an indicator to show that the user can swipe between the 3 options to determine the best course of action to complete the task.

When the user has selected the desired course of action, they can use the button to check their answer. This will tell the user whether they have gotten the answer right or wrong and some justification for their answer if right, and a hint if they are wrong.

Also present is the symbols established earlier in the experience that corresponds to the chosen choice of action - if users can’t remember what a variable does they can hopefully recognise the symbol associated with it.

Finally learners can track their progress at the bottom of the experience - as the user works through the tasks the hubs link up to visualise the user’s journey through the experience. This was a way of incorporating the circles and path metaphor I was trying to create as the experience;

Overall I think it works much better as a visualisation of the user’s progress rather than an experience itself. When the learners swipe the task bar, they can see an alternative progress bar that fills up as the learners progress and shows how many tasks (out of 12) the user has completed and a percentage of completion. This is to get additional information on how the learners are doing if they require it or don’t understand the visualisation of the user journey.

Help Options

There are 3 help options available to the users if they require help. These 3 options were added based on the persona’s user needs as well as feedback I received from Mk. 1 testing - a hint, asking other users for help and accessing a reference list.

Hint - gives a hint on how to complete the current task and varies in helpfulness; at the beginning of the tasks the hints eliminate options but as the user progresses through the tasks, the hints give a slight nudge to the correct course of action but ultimately leaves the user to work out the correct course of action for themselves. This method of help was created with bright beginners in mind who were possible doubting themselves about the correct course and just need that little reassurance they’re on the right track.

Peer Support - allows the user to see who else is on the exercise with you and who can help you with any questions you might have. The learner can type in their query to the chat box and post it for the other learners to see. The other learners in the module can then respond to the question with help. This method of help was created with both bright beginners and anxious amateurs in mind - both would be benefit from that reassurance of speaking to your peers and it also ties in the research insights gained from researching communities of practise. By allowing users to chat to each other, they can specify the level of help that each individual learner may feel they need.

Exercise - Help - Social.png

References - allows the user to access a list of references that will give the user a reminder of what everything does in JavaScript. Here users can see remind themselves by seeing the associated symbol, looking at a short description of what aspects of JavaScript do as well as gives the user an example of how the code would look. The reference list will only show the user the aspects of JavaScript that are relevant to the exercise as to avoid confusing the user with too many unnecessary terms. This method of help was something requested by users during testing of Mk. 1 and could be both be used by anxious amateurs and bright beginners.

Each help method is provided to try and build reassurance and confidence with the learner. They were designed to have varying degrees of usefulness based on the type of help the learner feels they need.

Task 3 and 5

Tasks 3 and 5 differentiate slightly from the other tasks because they are split into multiple tasks. When the user begins the task they are given more information about what they will doing and the specifics of the task. These screens are designed to break up the repetitiveness of the experience and also an opportunity to encourage the user and build their confidence by being reassuring. They are also natural stopping points for the learner so they can feel like they’re in a better position to leave the experience before returning to the experience later. When the user is ready to continue the experience they can click the button below and be returned to the multiple choice tasks.

Task 6

Task 6 also differentiates from the experience in the sense that it does give you a multiple choice option to complete the task. Instead the learner is expected to apply the knowledge they have learnt through out the experience and technically write their only piece of code. The task provides a text box to input their answer with a hint above the text box that shows the user how to word their code. Task 6 is in important because again it breaks the repetitiveness of the experience and also provides a good learning opportunity for the user as well as an opportunity for them to apply and reinforce their knowledge. When the user correctly inputs in the code, the exercise is considered finished.

Rock, Paper, Scissors Screen

The end of the experience, it was important to properly congratulate the user and further build their confidence by using extremely positive language and using language that praises the user for creating the program on their own merit. Since an important part of programming is actually using the program you’ve spent time coding it was important to include an opportunity at the end of the experience to actually play Rock, Paper, Scissors with your phone.