‘For theme 2 you must create an interactive digital prototype that somehow incorporates elements printed on paper.’

Stuart Lilford

:: Research ::

The theme for this week was pretty challenging and did require a lot of time to think through how I could approach the theme of having an interactive element that works in tandem with a physical real world element. I really was stumped as to what I could do for my idea as I still wanted to use XD as I wasn’t very confident with unity or unreal engine and don’t have time to practise for these rapid prototypes.

I searched for games that did use real world elements and found a very useful article. ’10 Video Games That Interact With The Real World In Some Way’ By Isaaac Williams points out how a few different games use real world elements and got me thinking maybe I could create something that requires real life communication along the lines of the game ‘Keep Talking And Nobody Explodes’ (Steel Crate Games, 2015).

I couldn’t think of a way to make that idea visible in XD however, and when I read about how Pokemon GO (Niantic, 2016) it got me thinking of something along the lines of Geocaching, where I could have things dotted throughout the world for the player or user to find like an easter egg hunt.

It was while I was playing the game ‘Fire Emblem: Three Houses’ however that I had the idea I developed into my pitch (Koei Tecmo Games, 2019). In the game there is an area where the player can scan the bottom of real life toys which creates characters in the game. Basically by just reading a QR code. This was something I could develop into my pitch within the time limit imposed.

:: Idea Development ::

Back in primary school I remember all the kids collecting and trading footballer cards, which I feel could be applied to MMA fighters just as easily as it could be to footballers (Ref.1). These cards would give a competitive edge such as top trump card decks and with the use of a QR code I could make an app that would give in depth breakdowns of the fighter on the card and shown news from the UFC, the premier MMA promotion.

Now some of the feedback I received on my last app was to look at using UI kits to create a more professional look. As such I used the UI kit ‘Fantasy Sport’ which showed me a number of layouts which really helped me make figure out what pages I wanted for my mobile app (Ref.2)

:: Production ::

The UI Kit I found was a huge help not just in creating a more unified look but also in giving me ideas for the various pages I should include in my app (Fig.1). Things such as fighter comparison pages wouldn’t have occurred to me to include if I was making the various pages of the app from scratch (Fig.2).

In my effort to make the sport more accessible to people who don’t know about it I wanted to make sure that the news feed panel looks good and is clear to use (Fig.4). Again, the UI kit helped with this but I did think of the box layout myself as they were originally different sizes which I felt looked cluttered. The actual news article page could do with some more polishing (Fig.5). but does show my intent with the prototype.

I also think that the division rankings page (Fig.6) could do with further development such as including fighter images in the icons on the left and expanding the blocks to include the top five, ten or fifteen ranked fighters in each division. Again though, I think it works fine for a prototype of how the app would function.

I am very happy with the app as its own standalone pitch, however I needed to create the real world element in order to meet the required elements of the prototype. I will say right off the bat that the card made doesn’t look as good as I had hoped and would naturally need a lot of development if I were to take the prototype into actual production (Fig.7).

The same could likely be said for the back of the card (Fig.8) and the QR scanner page of the app (Fig.3). both of these could definitely do with adding visual appeal but again, for the purposes of a quick prototype they do get across what I imagined.

:: Video ::

:: Feedback ::

— My Thoughts —

Before I receive my feedback from my lecturers, I thought I’d quickly list my thoughts about my prototype. I like that there is a real practical element to my prototype, and I do think if the app and card game were to be made it would be useful and popular given the rising popularity of MMA.

I would however say that the card and the QR aspect could definitely do with increasing there visual appeal and I do keep thinking of extra slides that I would add if I were to actually create the app. Things such as a fight breakdown slide with detailed breakdown of the various rounds would have been great to add and could have allowed me to embed videos which I feel would help make the app seem more complete than it does at the moment.

— Changes made —

There weren’t any glaring issues with my initial prototype for this week. So there wasn’t much I felt I had to do with this prototype before submission. I wanted to make a couple more card designs, so that it was more clear visually what they are at a glance.

With the cards I would say that they do look a little flat. With the first card (top right) I implemented the flag within the lettering of the name and nick name which I think gives a more vibrant look. I also think that as some fighters have very long nicknames, such as ‘the Nigerian nightmare’ for the bottom left card this is a little hard to read which placed vertical.

I also intended to find images of the fighters without the championship belt visible. Which was hard to find for most and for the bottom left card the fighter has been the champion for so long there are no high-quality images of him with a default pose. This meant I used a more cinematic shot of him in action, which I think works really well and makes the card look less flat than the others. So if I were to recreate these cards I would try to find action shots of the subjects.

:: References ::

Koei Tecmo Games (2019). ‘Fire Emblem: Three Houses’. [Video Game]. Available online: https://www.nintendo.co.uk/Games/Nintendo-Switch-games/Fire-Emblem-Three-Houses-1175482.html [Accessed 09/03/2022]

Match Attax (n.d.). [Online Webpage]. Available online: https://uk.topps.com/match-attax [Accessed 09/03/2022]

Niantic (2016). ‘Pokémon GO’ [Video Game]. Available online: https://pokemongolive.com/en/ [Accessed 09/03/2022]

Steel Crate Games (2015). ‘Keep Talking and Nobody Explodes’ [Video Game]. Available online: https://keeptalkinggame.com/ [Accessed 09/03/2022]

WILLIAMS, I (2021). ‘10 Video Games That Interact With The Real World In Some Way’. (Online Article). Available online: https://www.cbr.com/video-games-real-world-interaction/ [Accessed 01/03/2022]

XD ‘Fantasy Sport’ UI Kit for Adobe XD [Accessed 09/03/2022]