Final Links
How Did I Make It
To make this prototype I used a piece of software called Axure upon recommendation from Tom who works at The User Story in Norwich. This proved to be a very useful tool for me to create the type of prototype I needed. I was able to create a high fidelity prototype with functioning click-through buttons and icons, a functioning A to B user journey, partially thought-out design elements and rough colour scheme. I decided to not include any coding in this project because of the time constraints. I chose to not use sites such as proto.io because my work would only be available for use for a limited amount of time whereas Axure provides a free student subscription to use their service. In addition to this I felt that Axure offered more options in both design and functionality and because I wanted this to be tested on an iPhone I needed to get the optimisation correct. When Proto is only able to display the contents on a virtual on-screen phone, Axure provides a web link so it can be viewed in a browser on a desktop, tablet or mobile device.
Multiple-Choice Results
I chose to include multiple-choice questions because I wanted to make sure that even if someone had no idea what the answer was then they could still guess. This meant I would always have data to work with and if I had to hint the answer each time then I felt this would be too obvious. Here are the results from the multiple choice questions I asked the users after they tested my prototype:
I made sure to include different facts and questions for each test to keep the A/B aspect of the test fair. I did not inform the testers of this multiple-choice questionnaire when they received either of the test briefs. From these results we can see that most of the users got a lot more questions correct in test B and I think this is because they knew what to expect and made a conscious effort to remember the facts when reading them during the questionnaire. Interestingly enough this clashes with the fact that the majority of testers enjoyed test A more and said that they retained more information when viewing the facts and questions separately.
I Like, I Wish, What If Results
To give the results of my test more depth, after the multiple choice questionnaire I asked the testers what they liked, what they wish could be different and if they thought there could be any additions to the quiz and general user experience. I am really pleased I asked these questions immediately after they tested it because it opened my project up to a lot of positive feedback and constructive criticism.
The testers liked that there weren’t too many options as this meant the user journey was simple easy to navigate. The interface was straightforward to learn with icons being big, easy to see and press and where they expected. The whole thing was nice to use on the iPhone and the combination of the quiz and unexpected and interesting facts was engaging. The colour scheme is easy generally easy to read and the result word being displayed in a different design from everything else in the app is effective. 4 people chose test A as their favourite while one tester chose test B. On the whole, they thought it was a lot easier to retain information when it was displayed on separate screens. One tester even mentioned that he felt ‘rewarded’ when he received the fact after the question.
When I asked what they would change about the experience I had a few people mention that I should include related images. In addition to this, one user suggested replacing the grey from the colour scheme with a ‘younger’ colour to appeal to a more target audience.
Lastly I opened a conversation for the testers to tell me if they felt the test could have any additional elements. This is when someone pointed out I hadn’t displayed any links to social media profiles anywhere in the app. I would add social media icons into the ‘Profile’ page and let the user link these to their personal Facebook, Instagram and Twitter profiles. I would also put an option on the completion screen of the test so the user could share their results.
Peer Feedback and Improvements
During the presentation of my prototype to the class I was able to gather some general feedback from the testers second time round and also from those who were seeing it for the first time. A lot of the same comments came up as from the initial interview but there were also a few new adaptations from new perspectives. The first was that the text of the facts in text A didn’t stand out enough and his eyes were immediately drawn to the ‘Next Question’ button. Here is the question and the fact next to each other for comparison:
I could improve this by swapping the colour schemes so that the light text stands out more against the black background, but if I do this I fear people won’t be able to read the question properly. Realistically I would redesign the fact section to look different from this original layout and include images which was another option put to me from my peers. This ties in well with my original idea of wanting to have fun animations relating to the fact/sport/question. The reason I didn’t include this was because Axure doesn’t include an animation type feature (or at least I couldn’t find out how) and I don’t know how to use animation software well enough to integrate it.
With test B I went into the project wanting to have the fact slide up smoothly from the bottom when the user has been on the question for a second. However, as mentioned before I didn’t know how to create animations in Axure without the use of code so putting the fact in a box on the same page as the question was my way around this.
To test my original theory I would make a paper prototype example of this and manually slide it up when the user is reading the question, therefore giving the feel of the experience before deciding to go ahead. Having said this, with the data I have gathered in this trial about the negative impact of test B due to distraction, this is either a hypothetical scenario or I would have to adapt the idea to compliment my project in a positive way. A possible outcome could be that I keep the user experience of test A (the question and fact being on separate pages) but on the fact page have an engaging animation with the fact pop up from the bottom. This would make the experience more interactive and engaging thus encouraging the user to remember the fact.
Due to the fact I optimised this for use on an iPhone there is no surprise it didn’t pass the test of looking entirely comfortable on an Android or Windows phone. It isn’t perfect on iPhone either but because I was working with a sizable artboard (much like in Photoshop and Illustrator) as opposed to adding breakpoints to a piece of code, I was hesitant from the start about my design being a few pixels out here and there.First of all, this is what my app looks like on my iPhone 7:
*Insert images of my iPhone here*
The images clearly show that my static icon bar isn’t cluttered by anything on the iPhone. With the iPhone comprising of one circle button on the bottom with no symbol on it, thus making it neutral across most interfaces, there are no distractions and my design works well.
In the video example you can see how when the page loads, the bottom icon bar is not visible because of the URL bar but when you scroll down and the app becomes ‘full screen’ and you can see that it scales well. It was a tough decision to make as to whether to cater for the URL bar but in the end I decided to let the user scroll down and reveal the page as a whole to give the experience more of an ‘app’ feel.
For comparison, this is what my app looks like on a Samsung Galaxy S7:
And on a Samsung S8:
In both Android examples the sizing is not an issue and scales fine. If anything, it scales better on this big screen because the page falls off the bottom of the iPhone ever so slightly. (I think this is a good time to mention how frustrating it is to create a prototype for an app in a web browser due to the top URL bar always popping down from the top. This would not be the case in the app and the whole thing would be full screen.) The main issue with loading this on an Android phone however, is the built-in navigation bar at the bottom that comes standard with the phone makes my static icons at the bottom very confusing to decipher, distracting. There is just simply too much going on. On the Samsung Galaxy S7 this isn’t as pressing of an issue because the icons are built into the hardware of the phone whereas on the S8 the navigation is integrated into the operating system and is displayed on the infinity screen. If I was to redesign this for use on Android I would have to carefully reconsider where I place the static icon bar. It is common to place icon bars at the top of Android apps because of this very reason. Alternatively I could utilise the use of a hidden navigation bar, so all the icons are hidden on every page apart from the home page.
Interestingly however I had some feedback from my peers about my design being more of an ‘Android look’ rather an ‘iPhone look’. They associated rounded corners and smooth curved edges with iPhone whereas the sharp corners and edges came across as more Android. This is very useful information and I will be taking this into account when trying to find a happy medium in upcoming mobile development projects.
Lastly, on my home page I was told that the ‘Language’ and ‘Currency’ buttons looked out of place. I included them here for quick and easy access but ultimately instead I think it added more confusion and clutter.
In my second iteration I would place these into a ‘Settings’ section which would be an added bar on the home page. These settings would effect the use of the interaction design of the app along with how the billing system is set up. With this in mind, a useful, clutter free and simple feature that I could add to the home page is a solitary location icon that the user can press which determines where they are and suggests a language and currency from that.
Conclusion
In conclusion this task was extremely helpful for my personal development as a UX designer. As this is the first prototyping project I have tried my hand at I was expecting to learn a lot but I feel like I have come out with a lot more than expected. Whilst getting to grips with a new piece of software was somewhat limiting, it was fruitful nonetheless and I will be looking to gain more knowledge of how to use Axure in future projects to produce fully functioning prototypes at a higher fidelity.
This project was very valuable for me from two aspects. Firstly the project its self, having to design and make a prototype, was a key stepping stone in developing the way I see design projects and the attention to detail one must have to create a web application for use on mobile. Secondly, the testing process was extremely informative because the data I collected is vital to the potential growth of this service. The A/B testing methodology was a great introduction into the way I can test various ideas in just two simple run through’s with the testers. In the future, with bigger projects I am looking to try multivariate testing and see how multiple different elements perform in different circumstances.
Bibliography
proto.io. Available at https://proto.io/?gclid=EAIaIQobChMIo5iAhMK-1wIVDhMbCh0vIAYZEAAYASAAEgJxsvD_BwE (Accessed: 14th October 2017)