Personal PI Prototype Postmortem

On Sunday night I FINALLY finished the PersonalPI prototype. I know, cutting it fine. But I'm so proud of where I've come and the journey this project has taken me on. Ultimately I'm very happy with how this prototype turned out, and this is my reflection on that process and the final outcome.

Art style

I loved working in this style, and implementing it was quite simple too. Especially once I had perfected my pipeline using the tutorials I used, working with both vector art and hand drawn sketches became simple.

I think it fits my personal criteria of being eye-catching, stylish and easily-understandable. I set up a few actions in Photoshop to help me do this, which I spoke about in my process pipeline article.

One thing I discovered is that it's very hard to get art looking good but also running well. My prototype slows to a crawl on mobile right now (probably the 15k background.) Looking to get that fixed pre-showcase!

Software

I enjoyed using proto.io- all too often developers jump right into engine, but UX process advocates testing ideas in something with rapid iteration and design focused sensibilities first.

It was absolutely the right choice over Axure, and though I think I could have done the same or better in Unity I don't think I'd go back and change it, if I could.

Game Logic

Sorting the game logic was difficult- I expected it to be so, but handling data efficiently and consistently, especially in a system not really designed for that, was even harder than I expected. Ultimately it game me greater appreciation of the work of a programmer when implementing art - things that can seem simple to an artist can have a lot of logic running behind them which are difficult to re-route.

Proto.io employs a visual scripting language similar to Scratch, shown below.

Here are some game logic / scripting elements I'm particularly proud of.

Money changes, and you can only buy binoculars if you have enough

Colour of investigation buttons dynamically changes depending on whether you have accepted the quest, or if there's a notification, or if it's inactive.

There's the start of a branching narrative, with certain quests only getting unlocked once others have been done.

Quests can be passed or failed, with corresponding rewards or fines.

The correct photos show up once you've taken then, and not before.

Informal feedback and usability issues

I put it out there and already got some great feedback on facebook. I also noticed playing it myself that there are still a few bugs I'd like to fix.

Use of the framework

As I've learned more about UX over the course of this year I've applied more and more UX ideas to my game production process. This can be seen in my analysis of previous projects against the EGUXF.

Here is this project's production techniques mapped against the framework:

As we can see, my UX process were heavily loaded onto the front end, in the concepting and implementation phases. To me this makes sense, as I was just aiming for the prototype, something completed within the implementation phase.

I expected this form the start, but actually found myself doing more informal testing than I expected. As people played my paper prototype/interaction tests, it was clear that although UX principles had been followed, the game was not fun. This led me to iterate and revise my design, something I had aimed to do at the early concepting stage. However I think this was imperative to the finished product and am glad I did it.

Showcase poster design

In designing the materials for the showcase, I decided to use a user-centred design process as through my research it has shown proven relevancy within the field of graphic design. I thought not using it would let that research go to waste!

Here's the initial design - needs some changes for readability and to better click with the in game style. going to do more tests next week when I have time!

The UCD questions I asked were:

What will it be used for?

Poster

  • Draw people to my stand
  • Explain visual style of project
  • Explain project to visitors when I'm not there

Cards

  • Remind visitors of my project
  • Give visitors my contact details

What do I want it to convey?

Poster

  • Striking visuals
  • About investigating your neighbours - in game logic
  • Mobile game
  • My name

Cards

  • My name and contact info
  • Professionalism

Who is the audience?

  • Students from all years
  • The industry, potential employers down the road
  • Parents/friends
  • Lecturers who are marking the presentation.

Now, the showcase marking criteria are:

Exhibition Research

The student regularly uploads to their blog exhibition research work of excellent quality, relates this clearly to their ideas for exposition, and provides excellent and detailed critical commentary throughout.

Display of work

The student presents comprehensive and coherent work of exceptional quality, which clearly demonstrates the student’s process, culminating in a final piece of very high quality.

Communication of ideas

The student very clearly, comprehensively and succinctly explains the significance and outcomes of the project to a non-specialist audience without recourse to jargon or technical language.

I think the research aspect is covered by my posts on altctrlGDC, various DCA/HMC exhibitions, and the London/Abertay degree showcase exhibitions I went to.

The display of work criteria should be covered by me making a kickass poster.

Communication of ideas will have to come through the poster and interactive program having enough explanatory text. This has informed what I put on my poster, though.

Additionally me and my showcase buddy Ryan Shearer went to the HMC to look at the amount of space we had. We got there as they were painting the plinths, which was great as we got to see the range they had. Ryan's work is processor-intensive 3D, so he'll be bringing in his own PC to showcase on. (Can for scale)

Apart from that everything is going (vaguely) to plan. My proto.io prototype doesn't yet run on mobile, thinking this won't be too important for the submission tomorrow. Going to try to fix that in the coming week. I'm still trying to work out if I have time to do the landscape version of the UI- if not I'm just going to have a slideshow or video of the work playing.

Here's a sneak preview!

Retrospective on 4th year

Finishing up and compiling my work from this year has me thinking of where I've come from, how far I've come in a year, what mistakes I've made and where I'm going. As this vaguely relates to my honours, I thought I'd include it here!

Coming into 4th year I wasn't sure what I wanted. I'd basically forgotten what education was like, having taken a year out to work at Microsoft and before that spending my second semester of 3rd year at Eucroma, a study-abroad program in Denmark that was structured to feel like a studio as opposed to a degree course. The last coursework I had handed in was in December of 2013...

In some ways this was great. I don't regret either of those opportunities, whatsoever. And in some ways they set me up fantastically for the self-driven learning required in an honours project.

Skill gaps identified and broached

Coming into this year I was interested in UX, but had only learnt it informally through the working environment. Having the time to learn software (especially prototyping in Unity and proto.io) seriously bolstered my skill set, as well as reading the reference texts that are seminal to the work of a UX designer.

Having now made 100% my own prototype for the first time I feel much better equipped to enter the corporate world, but also to continue as an indie developer in my free time.

Expanding my knowledge

I took this year as almost a year out, to explore the areas that are interesting to me about games but I might not have the time to look at in a corporate environment. I went to events such as GAFE and GDC in order to learn more about experimental and gallery games, and was able to focus my energies on making weird, vaguely experimental games. This was worth it to me as a creative and I think this year of exploration will make me a stronger designer in the long run.

Ways I messed up

This year was no means easy. Coming back from the very strict schedules and real consequences of a corporate job to setting my own schedule was daunting, and honestly I don't think I did very well at it.

Semester one went well for the most part, in part because it was so broad. I was able to do lots of small projects in different areas. In semester two when I had to focus down, I found it hard to keep motivated on the project without a taskmaster at my back. Especially with my supervisor leaving I felt like a bit of a leftover- there wasn't really anyone in the uni with my particular specialism, which was a lonely place. I think combined with the excitement of jobs/GDC it was easy to put the project on the backburner.

All in all, I am still proud of what I've done. I think if I were to do it over, I'd sort out my deliverables and project scope earlier on in semester 2, so I could have clear goals earlier. When the topic is so broad of 'make an experimental game' it is hard to make any decisions!

Showcase promo materials

I was lucky enough to be asked to write a little about my work for the degree show's promotional materials. Here's what I wrote and shared:

Personal PI is an interactive mobile game prototype, exploring the concept of personal space in the city. You take on the role of an amateur private investigator, solving the everyday mysteries we all come across when living in tenement flats. This project was created to explore how user experience design techniques can be used to design experimental game experiences.

Quentin Blake

The pen and vector style of my honours project art is largely informed by how I enjoy drawing in my free time. I dug in a little deeper to this preference and realised that the art of Quentin Blake, particularly the BFG, Matilda and Charlie and the Chocolate Factory illustrations, was some of my favourite as a child.

This loose pen and ink style has carried with me into my personal art style, but it was great to go back and see how emotive his faces and postures are. Great inspiration!

Final UI Mockups

Can't believe the deadline is so soon! I've finished the final UI style mock ups, which I just need to implement and link together now, and present it all nicely!

Hand ins are Monday afternoon, so my schedule is:
Thursday night - art implementation, identify missing assets, learning contract

Friday - Dissertation redraft and create missing assets (probably a few 'character doing x'es and copy for different missions.) Implement gameplay.

Saturday - Screen capture of proto.io demo and video of player playthrough.

Sunday - write missing blog posts, write up supervisor notes, portfolio prep, export blog, arrange files.

Monday - SUBMIT!!

So little time and so much to do!!

Characters and logo animation

Here's a rough draft of the cast of characters inhabiting my building. I'm in the process of mapping their relationships and figuring out what bearing that'll have on the story.

I also worked on a quick eye animation to use in my intro screen/wherever will let me have a GIF!

Showcase stickers!

Obviously, the most important part of the showcase is the freebies people give out.

I've ordered some stickers based on my earlier Edinburgh window designs, but in my new colour scheme. I really hope they turn out nicely!

Game logic and prototype 2

Part of what I spoke about with Lynn was making sure the interaction within the game was engaging and made sense. Implementing this has involved a lot of thinking about variables that frazzled my brain a bit! This page was invaluable: http://docs.proto.io/documentation/editor/variables/

Doesn't look like much, but I tested all the screen interactions and transitions on the main page!

Doesn't look like much, but I tested all the screen interactions and transitions on the main page!

New prototype is available here: https://caitlingoodale.proto.io/share/?id=3cedd6a6-f82b-4d09-9c5c-58ac533ad314&v=1

Looking forward to piecing everything together tomorrow- I feel I've sorted all my implementation problems now!

King interview process

As I posted about earlier, I recently accepted a job with King in Malmo. It's been a long process, and I wanted to share the things I've learned and my takeaway!

It started with an email, out of the blue at the end of January, from the studio Art Director. He liked my portfolio and would I be interested in an interview? It was for the role of UI/UX Artist, which sounded right up my street, so I agreed.

At this time my project, portfolio and life were a bit of a shambles. I wasn't sure of my project title or what I'd be making. I didn't know where I wanted to live, what I wanted my lifestyle to be or necessarily what I wanted my job title to be. From the get-go the broad nature of the role interested me. I went for two Skype interviews and an art test before they flew me out to Sweden for an in-person interview with the team.

As I progressed through the process however, it became clear that what shone to King was my UX process. In some ways I found this really surprising - that's the bit I'm self-taught in!- but my work over the course of this year has really pulled me further away from art and towards design.

I still love art and have enjoyed doing the work for my honours project, but part of me is saying that design, specifically UX design, might be more of my calling. I think at the base of it I'd be happy doing UX (from an art focus, of course) at work, then do art in my free time. I think the art styles I really enjoy doing (pen and ink, conte life drawing) only really fit with indie games, most of the time. Yes I can do polished, shiny art, but I prefer UX design.

In the end the role I was offered was a Junior UX Designer, and I couldn't be happier! This is absolutely the right step for me, and I think coming out of GDC 1000% not wanting to move to the USA (for now) Sweden is a really good option for me and my career.

Art test materials are available in my honours project submission.

Private PI - New game flow

Following some good feedback and idea pitching, I decided to go back to the concepting phase of my game idea. This involved making flow diagrams of the experience I wanted to create - now a much lighter "Personal Private Eye Simulator", in which you as a player are hired to investigate people's 'everyday mysteries' - such as:

  • Is the guy above me feeding seagulls?
  • Am I the only one not invited to our floor's ukulele troupe?
  • Who is leaving the bins out on Friday?

Here's the initial flow diagram, and one highlighted to show what I want to prototype (blue is need, orange is want to implement).

Next step is throwing these into proto.io and making them interactable!

Showcase Space Preparation

Finally coming to a more concrete conclusion with my project has me thinking about how best to present my work. I'm aiming to get this stuff done as early as possible - graphic design and branding are my jam, so I think I can pull off something really cool!

Since my first few posts on the showcase, the scope of what we can present and my project itself have changed significantly. 

PC Interface

From the advice given from Clare and the handbook, I've gleaned: it's important to show project statement, development work and the final piece itself. Don't over-populate!

I've played around with the interface software and it looks like 1440x912 .jpg images work best. I'm going to focus on my idea development as the final concept should be very clear from the poster and devices.

Plinth

Business Cards - have personal ones, want to make a small set of game-specific ones too. Going to buy a plexi stand off Amazon that shows them both off.

Sketchbooks - not sure any of mine are in good enough shape. Might Frankenstein one together from the good parts of each!

Stickers - I love vinyl stickers and have always wanted to make some. This one's a selfish wish of mine!

Prototype - As this is a mobile game I thought the best way to show it off was on mobile devices - both on iPad and Android. This will show it in different screen resolutions, and I can change the iPad to being a slideshow of different development images if need be.

  • Complication to this is that I'm unlikely to be around for the whole showcase (I move on the 14th and need to say goodbye to everyone!) Therefore I'm going to make a fake phone and ipad with screenshots of the game and QR codes to download it out of foam board, that I can leave there when I'm not around.

Dissertation - my supervisor doesn't want a copy, so I'll use the free copy I have from completing the NSS here! 

Poster

I'm a bit disappointed we have to have a regular A2 poster, as I was looking forward to making some weird shelf-based way of showing off my work, but no worries. As I said above my personal standards for poster design are high so I want to make something absolutely stellar for this.

Here are some initial thumbnails, I'm going to keep developing them up as the project final art goes along.

Logistics

I've ordered stands for my cards and devices. Abertay provides hanging materials and time to do so, so it's just the printed materials to order. My schedule is:

21st Apr - Stickers - longest turn around

27th Apr - Game business cards

2nd May - A2 Copyshop poster, 'sorry I'm not here' cards and dissertation

5th May - Interface

Because the direction my game has taken (a fake app experience, like Karen) I had the idea to make my showcase materials like the brand for the game.

I want the app brand to have a clean professional look, but I still want to integrate it with the visual style of the game. Therefore I'm going to make a digital copy of the brand, logo etc and then redraw this into my art style.

Paper Prototyping with Unfocus Group

Unfocus groups were a UX technique I considered using in first semester, but I deemed them too complicated and unnecessary this semester. However, I kinda ended up doing one anyway when I started my paper prototyping!

In an unfocus group, people who would be passionate about your product are invited to co-collaborate on the creation of it. Due to the collaborative nature of working in Whitespace, people interested in my work came over and started asking questions. When Kirsty came over, I started by talking her through my current game idea, but then ideas started bouncing around and we ended up making a paper prototype for a card-based matchmaking sim.

In this game, you are two competing matchmakers, trying to set up your clients for dates. the problem is, your clients all have very picky tastes. Similar to charades, players cannot say the words on their cards (such as "Erica likes redheads, people who only wear black and canoeing") but have to work their way around them. The other player has to propose a match for this person, and if the cards are close enough points are earned.

This sounds unrelated to my honours work, but it helped me think outside the box about the absurd. One of the big questions in the second iteration my project has been how to draw the line between being funny and creepy in my game- and whether I should. Thinking about such weird character got me thinking whether I could incorporate some of these funny moments into my main project to lighten the tone.

Line art Photoshop pipeline

Following on from my previous post on the topic, I refined my workflow for bringing in pen art and making it into editable PNG lines.

From this:

Through this beast of an action...

To these!

I digitised a load of misc shapes drawn in pen to use as UI assets.

VoySim Colour tests

I completed a basic colour test using the line art.

I need to redraw some sections before I complete the final art, but I think these are looking good. 2/4 are my favourites so far.

Gameplay iteration - Paper prototyping

Following from Lynn's questions about the core of my gameplay, I decided to go back to my core concept and do some paper prototyping of my game idea. The UX framework allows for and encourages this - if the user experience is unsatisfactory, the correct next step is to go back a step! I'm glad I have the freedom/time/budget to do this.

My core questions about the game

  • What is the theme of the game?
  • What do I want to talk about?
    • What do I want the player to feel/experience?
    • How is the player motivated to continue the game?
  • Is the game serious or flippant?
  • What's the in-world justification for what you're doing?
  • Do the physical components add to the experience?
  • What is the level of interaction? Is this a walking simulator or an RPG?
  • Where do I design the difficulty? (from the Design of Everyday Things)

From working through these thoughts and also the conversations I've been having with practitioners, I've realised that photographs with mobile numbers on them do not a physical interaction method make. Keep Talking and No-one Explodes because the booklet/manual adds confusion and mental load to one of the players. I'm starting to think the physical components are non-essential to making this an experimental game- the ingame interaction method may be experimental enough on its own. To keep them in I have to expand upon them so there is more interaction.

I used IDEO's idea of Unfocus Groups, bouncing my ideas off of the people around me to rapidly iterate and fail fast on possible ideas.

The general feedback I got was 

  • There needs to be a stronger gameplay concept
  • The art style is working really well (yay!)
  • There needs to be a stronger jsutification for WHY you do what you do as a player- why are you spying on your neighbours?

This resonated with me, as one of my favourite elements of the original Rear Window is the main character's progression from boredom (just watching because he has nothing else to do) to curiosity, finally to action (trying to catch the man he believes to be a killer in the building opposite.) I think this could be a great way to introduce something that feels a bit weird to the player (spying) - present it as flippant/purposeful to begin with, but expand upon the story so that the player motivations change.

VoySim environment v1

Here's the line art based off of my mash up of buildings. I worked 90% in pen, with few pencil guidelines and no ruler, but I LOVE the handmade, naive aesthetic it gives the line work.

Isolating the line art was pretty hard as I was working at A3, so there were a few differences in paper texture and lighting even in my best image. I found these tutorials on isolating line art that really helped - basically the best way to do it seems to be clean up the image to greyscale, then make a channel of the b&w image, select it, invert and fill a new layer with this. So happy to have found this method- it's more work but much more reliable than layer blend modes I'd been using in the past!

Terrible gradient effects like this are now simple!

Terrible gradient effects like this are now simple!

Building mashup

It felt a bit cheap to just photograph the building opposite me and draw it as my game space. As this game will be a reflection of the multitude of experiences of neighbourly voyerurism, I made a collage/mashup of the different buildings I photographed.