Initial Sketches and early usability testing

It’s getting hard to breathe task

Put out the fire task

During my initial idea phase of the project, I created the above sketches demonstrating two tasks I wanted to include in my app. I used these sketches in some early usability testing in my user interviews. This provided me with evidence of the fact that while the user was completing the task they had an awareness of what the tasks were trying to achieve and why they were doing it. One user was able to identify H2O to mean water and had a general awareness of what oxygen and carbon dioxide were and the fact that carbon dioxide was bad for people and good for plants. This was a great form of early user testing for me as it gave me a clear indication that my difficulty level was not too high. It also demonstrated that the users would not only be able to complete tasks but were actually considering the meaning behind the tasks, reinforcing prior knowledge of the subject matter and hopefully adding to it.

Wireframing

I began wireframing out my load screen and various approaches to tasks that I wanted the users to complete. I wanted to integrate some nice interactions and considered these at this stage. A problem I felt I was faced with was the fact that I knew I had to create a working prototype of the above outcome. I did wireframe out some fun solutions such as the user navigating a flying spaceship up and down to catch elements, if they caught them all they would win. A task like this could be incorporated again however with obstacles to dodge as well. I think this would have been a really fun inclusion however I did not feel I would have been able to prototype the outcome. If I were working on this project for longer this would have been a concept I would have attempted to achieve however given time constraints I have limited the majority of my approaches in the above wireframes to include more simple click and drag and drop solutions.

Above are a series of wireframes considering my home screen. Following my usability testing, I realised that my home screen which presented two buttons with options to view elements or play levels was not directive enough. I, therefore, created a variety of outcomes presented above considering the inclusion of images, icons, descriptions and even presenting each level on the home screen.

In the series of wireframes above, I looked at how to include elements on the elements selection page. I first considered presenting them on the periodic table. However, I felt that the target size of each element would be too small on the iPad for the user. I considered enlarging the periodic table so that the user could scroll across and up and down to find elements. This resolved the problem of the target size however I felt the navigation elements may be too confusing particularly as my users will not be familiar with the periodic table. I, therefore, looked at various other listing options to present the elements. I also considered how to format each element page and how to format the screen that appears after the user complete’s a task.

Site Map

Above is a site map I created before creating my wireframes. This was helpful in giving me a visual of how to design out the app however following usability testing I decided to create a more detailed user flow which was particularly helpful.