Exhibition set up

Exhibition space has been set up and is ready to go! I’m pretty happy with the end results of the project, there are definitely things I’d do differently, elements if I had more time that I would add (like the actual game!) but I’m confident enough with the strength of the brand and the idea that all will go ok in the Viva Voce. Got a couple of elements to finish off these weekend, namely my Major Report but I’m about 2/3 of the way there so will get that done today. My aim is to spend the next couple of days after today finishing the exhibition projection, which will be a nice addition to the project and reminds me more of my days in art college, a bit of pure sensorial experience.

Thanks to everyone who left comments on the blog, and best of luck with your own assessments, see you on Thursday for the show! 🙂

 

Advertisements

Introduction Video

I spent a stupid amount of time re-doing this. Keep getting mental blocks on how much to put in? What to say? Whether it highlights the actual app enough? Still not 100%, but we’ll take this one as a 3rd or 4th draft!

App Testing

Prototypes

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.

Testing

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.

General Feedback

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!)

Issues

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.”

Navigation

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.

Load screens

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?

Star Map

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?

 

Game Play

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.

Review

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.

Website research

Checking out some good one-page websites for research for Passages. I realised I had started designing it too soon, without really thinking about how I could make it experiential and engaging.

https://operadellamisericordia.com
– The colour scheme and typeface choices on this are really nice. Love the two thirds vs a third ratio on on the content as you scroll down, very clean and modern feel despite the serif and classic theme.

 

http://www.scissorsandclippers.com
– screen split in two, moves left or right depending on selection. Really nice way to have a contrast between two states or colours.

 

https://metoorising.withgoogle.com
– love the time line at the bottom and the contrast between dark and light. Movement when you click the links is very smooth.

https://preetisjustaname.com
– What a cool interact site! Its a really fun CV portfolio site essentially, but he’s totally playing on the user-centered design skills that he is advertising for himself. Its quite funny, and he makes the experience more personal by asking your name!

 

https://strategies.ca/resolutions/?local=en#accueil

– I like the circle navigation bar to the right, cute animations and good choice of colours. Screen is kept clear of clutter (no static logo / footer etc.) and the anchor tags are nice an smooth.

 

http://www.lapiece.com – love the textured background, playful handmade looking graphics and minimal colour use. Logo is a bit fussy the way it moves as you scroll, finding this distracting.

 

Lots to think about!

Final Timetable and Assessment Criteria

I’ve done up a quick final timetable amendment in my sketchbook. Thinking realistically I only really get to do work at the weekends so have done this based on a Wednesday, Saturday, Sunday working week. Not long left now!

I’ve also laid out a list for assessment criteria, the absence of which was making it difficult for me to know what exactly to do in order to be ‘finished’.

Print:

1. All game screens laid out and printed on A3 boards showing app process from start to finish
2. Brochure with QR code, game intro, link to site
3. Game trailer / introduction video describing app.
4. Printed Brief
5. Final Report
6. Sketchbooks
7. Exhibition boards / any other collateral.
8. Business Cards, CV, Portfolio

Digital:

1. PDF version of screens – single pages (and / or Invision mock up)
2. Website
3. Light Projection for exhibition (if I have time/once the space is confirmed!)
4. Poster for exhibition (again, pending time)

Branding – Passages

I started the Easter break a bit panicked that I hadn’t made a final decision on the logic of my game so focused the attention of the first week on that – then having made that decision kind of went straight in to designing screens and screen elements.  I was relieved then last week that Danielle and Laura both approved of the idea and that I hadn’t wasted the following weeks going down that line of thought. My tutorial last Wednesday focused on finalising the brand for the game, which understandably will influence the overall look and feel of the game itself. I had originally wanted to develop the game entirely in black and white, but after discussing with Paula decided that it would be worth looking at colour elements also and seeing which version worked. Either way I want the design to be stripped back and minimal and utilise as much as possible negative space and geometric shapes.

My original brand logo was very simple, just Avenir Next, with reversed stroke and set in all caps. The problem with this is when the type is reduced in a smaller screen it became kind of ‘nothing’ – combine this with the lack of colour in the app and its not a very attractive result. Its not bad, but a mix between a little boring and a little obvious?

I therefore refocused this week in really trying to come up with a logotype that expressed the idea and functionality of the game. I summarised very quickly the actions and intentions of the game and the name ‘Passages’:

• Using architectural spaces to highlight and focus on paths of light.
• Creating a journey of discovery both through Dublin but also of learning.
• Using the contrast between off and on, active and inactive, positive and negative.
• Passages as related to Newgrange and Irish historical associations with light, astronomy and myth.
• Visual use of geometric shape, opacity, gradient and contrast.

After many iterations in my sketch book I landed with this:

The two ‘A’ letters are replaced with a concentric line reduction (similar to those seen on the standing stones of Newgrange) which conforming to the general shape of the letter. The ‘A’ becomes a passage in itself, drawing the eye in to its depth, acting as a visual cue for the rest of the game – the purpose is to follow the passage of light. These same concentric lines are used throughout the rest of the game, in both icon, box structure and the visual elements of the gameplay itself.

I’ve also introduced colour to this version, a subtle blue gradient and cream gradient that are actually based on some old astronomy maps that I love the quality of. I may even try and introduce a slight texture, but will play with that to see if it is too much.

The rest of the week I have been developing other screens for the app, working on my CV/Portfolio and doing some work for the major report. Onwards and upwards!

 

An argument for Minimalism

From the start I have wanted the game that I make to have a low-fi, minimal feel. This was for several reasons but started with the desire to make a game that was as little graphics-heavy as possible. In this way the game would not be so counter productive as to be a game about energy use that uses loads of energy! My ideas have developed since then, and even though I’d now like to include an Augmented Reality element to the game I think it can still have a minimal feel. Ideally, the most beautiful, impactful part of the game is when you complete a constellation and a patch of true sky is revealed. In order to maximise this moment the rest of the game should sit back in a clean, geometric manner. The contrast between man-made and nature.

Which brings me on nicely to Minimalism as an art movement. Rather conveniently, I have a degree in Art History (this having never come in handy before!) – so I already knew quite a lot about what is meant by minimalist art. Essentially, the Minimalists (who emerged around the 1950s/60s/70s) were tired of the Abstract Expressionism that was prominent at the time, which they saw as contrived and overly emotional. They understood that this movement was the result of a traumatic first half of the century due to a series of devastating wars, but felt this work had lost its way and began to contradict itself. The Minimalists – think Donald Judd, Sol de Witt, Frank Stella – wanted to reinstate art for art sake. Art didn’t need to represent anything, the object of art was enough to spark conversation, a relationship between viewer and object. In order to do this, inspired by European movements like De Stijl and Bauhaus, they utilised man-made, industrial materials, manipulating them and presenting them in a way that gave them an alternative purpose. Significantly for my project, these materials include the use of manufactured light, particularly the work of American artist Dan Flavin.

Dan Flavin

 

Dan Flavin used fluorescent strip lights and tube lights to frame architectural spaces. In this way the spaces themselves became the canvas and the light itself the art object – how it filled a room, changed the softness of edges, corners and created a sensory encounter for the viewer.  Dan referred to this site-specific installations as ‘situations’ – the viewer became a participant and  found themselves in a whole experience, rather than face to face with a removed, singular object.

For my game I am using forms of light to shape architectural spaces around Dublin in order to do no more than bring attention to the use of light and to encourage the player to begin to consider how it effects the surrounding area. In this way, the game becomes a kind of Dan Flavin situation – a sensory experience between the player and the city they occupy.