Week 7 - Prototyping and Usability
Following on from my sketching and wireframing exercises, I began to make an first prototype in Adobe XD, beginning with the search pages. At this point, I did not focus too much on specific colour shades, typography or visual design, as I knew I could apply that at a later stage. My initial aim was to define basic layout, functionality and an idea of card design.
I used the name Walkease initially as a placeholder, but over time i felt that this was a great name, evoking a sense of how this app could add simplicity to a daily activity.
I carried out some colour psychology research which revealed that the colour green (often used in waiting rooms) evokes a feeling of security, calm and relaxation. It can promote balance and lead to decisiveness. (Wharton, 2019). Green also reflects the colours found in nature which feels appropriate for this type of app.
First Iteration
I wanted to gain feedback through usability testing throughout this project, and so with every iteration I presented to participants (friends or university peers). I received some early feedback that the shades I had chosen for my first prototype were too stark and not ‘natural enough’.
Second Iteration
I created a second iteration of my prototype in full, following the creation of my style sheet and after some feedback from university peers and friends. I once again used Adobe XD, but for this iteration I fully enabled all the transitions and animations that were required to make a fully functioning prototype.
My assumptions were that it did need another colour, as call to action buttons weren’t showcased enough. I intended to carry out usability testing in order to gather all feedback at a stage where I was still in a great position to make further amendments.
Usability Testing
I carried out another round of usability testing, asking participants to carry out a task and provide feedback. I created a survey on Google Forms, and sent this out to the five participants that completed my original research survey, as well as some student peers. The feedback was very positive, but highlighted some pain points with functionality, as well as aesthetics.
Fig 2. Survey questions for usability testing.
Findings
I was really happy with the positive feedback I received during my usability testing. I felt that I had successfully created a prototype that could solve a real world problem, and most importantly, I had addressed the user concerns that were highlighted in my earlier research.
You can look at the results of my usability testing here.
The testing allowed me to make informed decisions about the next iteration of my prototype.
Third Iteration
I added an orange contrast colour to use on buttons, or anywhere within a page that I wanted to highlight an action that needed to be taken. I made a decision that I still wanted to keep the next button when selecting search criteria, I know this adds an extra step, but it allows the user to see, and change, the decision they have made before they move to the next screen. I think this would be good exploratory task for future work.
I reworked the step by step guide screens to allow user to skip to leaving a review if they wanted, as I understand not all users would want to follow the step by step guide, and may use this app just to get to the destination. I also changed the direction and colour of the chevrons, so it only highlights the next action to be taken.
I designed a new layout for the search results page also, with a toggle button that allowed the user to switch between views. Feedback highlighted that some users might prefer to see more results on the page at once.
It was beneficial to look back at the revised problem statement, and early research findings to be sure that this project was hitting the goal of solving those issues.
Dog owners want an app that allows them to search for inspiring dog walks that are suitable for both their needs and their dogs needs. Considering that those needs may change from day to day, the app needs to allow the user to make those decisions at the point of searching for a walk (rather than a profile that restricts flexibility).
I was fairly happy at this stage, and felt that I had been able to deliver a prototype that was well-functioning, and met the brief in terms of delivering a solution to a real-world problem. As I am getting more experience using Adobe XD, I felt more confident with my abilities with prototyping.