I spent this weekend creating a prototype of the app on Adobe XD. Decide to go with this rather than Invision as you can import files, shapes etc. directly from Photoshop and Illustrator – keeping them editable and giving me more options for changes within the XD application. I found this way easier than Invision which kept reloading and felt very bulky working off JPEGs. I actually wish I had started developing the screens in XD from the start, but ah well, you live and learn! 🙂
Because I designed all screens originally in Illustrator, once I transferred them to XD it was clear to me that I hadn’t aligned everything correctly and made some basic errors. Great this about XD is that you can copy/paste elements from one art board to the next and it will line up exactly – it really helped me to clean up the app.
Once I was happy with the general flow of the app I sent it on to some gaming friends and family members for testing. My friend group range from around 25 to 35, all of them play mobile games fairly frequently. All live in Dublin or near by. I also sent it to a graphic designer colleague who is 65, but he uses his phone a lot and I wanted to get the opinion of someone older who would represent an older visitor to the city. Lastly, my mother was also delighted to give it a go. A bit of a funny one, she’s definitely the type to be enthusiastic about an app that could show her around the city, but she’s also not very tech-saavy, so was a good test of UX/UI functionality and clarity.
Generally everyone loved the minimal design and colour palette. The logo and icons got a thumbs up too. I received feedback that it would be something they would see in the app store and be curious to download. (Good start – at least its not ugly!)
The first thing I spotted when a friend sent me back a screenshot was that the bottom of the screen design was cut off by Apple’s iOS design – so the bottom icon in the menu bar was half hidden. Easily fixed, I’ve moved important content up a little off the bottom. I also noted that I had designed the game for an iPhone 7/8Plus (this is the iPhone I have) and I think this friend has an X so that might count for the alignment.
Second major bit of feedback is that there was not enough explanation of the game at the start. It goes from introduction to game play with little indication of goal and purpose. I would be relying on a player to read the introduction before downloading – which obviously isn’t going to work. Based on this feedback, I added one extra screen which appear the first time you play the game which give a brief 4 line synopsis of whats going to happen – “A Game About Light and Dark: Passages will direct you to key architectural sites across Dublin. At these locations play a site-specific puzzle game in order to win a star. Collect stars to reveal constellations and rebuild the lost night’s sky.”
Another issue that occurred was in the navigation. It was not always clear how to proceed, but more significantly how to go backwards if desired. So I repurposed an arrow icon that I’ve used later in the game to create a back icon at the top left corner instead of a main navigation button in the game play screen.
Any navigation I want to prompt the user to press is in a solid high contrast button, other buttons are outlines and set back in the same colour as the background. From watching my testers, this seemed to work quite well.
In designing the app in XD I have including load screens – which unfortunately had the result of confusing the players because it wasn’t clear from the prototype that these would be animated and not require action. I must ask whether I should put in a prompt to tap forward for the sake of the demo, to move the app along?
Again, because the app is a still frame prototype, the AR features were a bit lost on some of the testers. I do think that once an AR screen activates, a lot comes intuitively from the user. Like if you move your phone and you notice that object in front of you changes sizes or moves too you should know that it is something thats going to tell you how to play. Some these elements I’m going to have to leave to theory I think, because short of coding an AR screen I’m not sure how I can confirm they work ok?
Lastly, because this is a game design rather than development the actual game play screens are not active which again means certain elements of the game are not possible to fully test. I did manage to work out how to create a live version the Light’s Out part for Level 2, but its going to be very time consuming as I’ll need to factor in a huge amount of variations. I might try and get it done for the iMac screen at the final exhibition pending time.
Overall the testing was very beneficial. Definitely helped me spot the parts that I needed to explain too much, meaning I had missed out on some UX design elements. I have another friend testing over the next couple of days, she’s a really keen mobile gamer so I’m hoping she will add more to the feedback too.
I am happy to consider at this time that the branding and style is successful (which has become an important part of the project now) and the game/app concept is interesting enough to engage my target audience.