Kez.

Maker of stories, monsters, and designs with personality.

[sayskez]

IXD501 Table of Contents

Major Project: The Arcadia Report

All Major Project Posts

Final Prototype

Final Alpha Prototype: Welcome to Arcadia

Promotional Website

Research & Summary Booklets

Iterative Prototyping

All Prototype Posts

Gameplay Paper Prototype

Prototype

User Testing

Style Test

Iterations

Final Visual Test

HTML Prototype

Version 1

User Testing

Version 2

Location Test

Marvel Version

Figma Version: Part 1 & Part 2

Complete Wireframes

Initial

Wireflows

Full Clue Flow

Onboarding (final alpha prototype)

Full onboarding

Secrets

Product Concept

Project Ideation and Concepts

Week 1: Three Ideas

Week 3: Mini-Pitch

Project Planning

Research & Development

Market Research

All Competitive Reviews

Her Story

Heavy Rain

Device 6

Hunt a Killer: Review & Brand Audit & User Feedback

HiddenCity

Sherlock Holmes: Consulting Detective

User Research

Survey Analysis

User Personas

Empathy Maps

Customer Journey Maps

Game Design & Research

Narrative & Content Design

Narrative Research

Content Design

Branding & Visual Grammar

Branding

Visual Grammar

Moodboard

Promotional Website

------------------------------------------------------------------------------------

RSA Brief

All RSA research & development posts

Brainstorming

RSA One-Day Workshop

System Research & Design

Branding

User Research

Survey Analysis

Vending Machine Stakeout: Part 1 & Part 2

Product Design

Final Pitch

[sayskez]

Onboarding User Testing

Running through the onboarding with a fellow gamer highlighted one particular area of confusion: saving vs adding evidence.

Originally I had in mind that you would be able to save files to read through later. However I then introduced the ‘add’ function so you could instantly add files to the case report from in context, rather than having to go to the report and then search for the file. However, they did not understand the difference between the two and suggested rewording or removing for at least the onboarding.

I opted for simplicity and removed the save function entirely to keep things straightforward and direct users straight to the critical case report. For the onboarding, I also made things a bit easier by only including the add function on the correct files so there’s no chance of messing up.

Other areas I would like to look into more next semester:

Railroading it a bit more - currently everything is very non-linear which is part of the appeal but also can mean more opportunities for mistakes so the onboarding in particular could benefit from more strict ordering and steps.

Streamlining the explanations - The help text is quite lengthy at the moment and I would like to introduce these concepts more naturally.

Arcadia’s Eye - I want to animate the contextual help ‘eye’ of Arcadia so it’s more obvious and pops up just when you need it, prompting interaction.

[sayskez]

ArcadiaReport.com

Check it out here

After receiving such interest in The Arcadia Report from my initial user survey (over 50% of participants submitted their email to keep up to date with further information), I wanted a place where I could direct people to learn about the project and sign up to the mailing list.

The site itself is very simple and I went into it with a content first approach, drawing out the key parts of the pitch that I wanted to highlight and starting with a barebones HTML to refine it.

For v1.0, I added the signature yellow and simple layout. I want to expand upon this in future but for now this is just an alpha landing page which at least gives me a link I can direct people to online. In future I would love to experiment with fun delighters like having the page glitch out or making the eye blink or follow your cursor but for now we’re keeping things simple.

(Except I couldn’t resist adding a cheeky wee cursor effect for that detective feel).

Of course this also meant there needed to be a functioning mailing list so I imported all my contacts into Mailchimp and set up the templates so I’m ready to go

Check it out at ArcadiaReport.com

[sayskez]

Secrets of Arcadia

I want The Arcadia Report to be a rewarding game that you can play as a unique experience without ever diving too deep or become immersed in the narrative. From early gameplay tests with people, puzzles and being rewarded for digging deep often came up so I want to be sure to reward people’s thoroughness.

As an example, I include a little secret in the onboarding prototype. The access keys you are looking for are in binary code. Translate it and you’ll find the key words: Project Canary. Search up that clue to discover a secret file hinting at the fact that there might be more to Arcadia than meets the eye.

What is Project Canary? What really happened to Arcadia? What other secrets might it be hiding? You’ll just have to play on to find out.

Check out the alpha prototype here

(Click at the bottom of the search pop up to search for project canary)

[sayskez]

Final Alpha Prototype: Welcome to Arcadia

Check out the final alpha prototype on Figma

A mysterious message and a special quest: you have been selected to help resurrect Arcadia. Enter The Arcadia Report and restart the corrupted database.

Why?

Through testing various prototypes, I identified the need for a more comprehensive introduction to Arcadia.  Incorporating everything I learned from testing with users, I devised an onboarding scenario which introduces all the key concepts quickly and in a completely in-character manner by having you install and reboot the Arcadia system. No meta help text or breaking the 4th wall.

The Scenario

You journey starts when you receive a message from the mystery Reporter inviting you into Arcadia. Unfortunately Arcadia is a corrupted shell after the collapse of the company so before you can reignite the quest to ‘crowdsource’ justice and start solving crimes, you need to reboot the system. Along the way you’ll learn about how search, locations, and reports work.

Give it a try

Dive into the world of Arcadia

[sayskez]

Arcadia Goes Social

I nabbed @ArcadiaReport on twitter so it would be ready to go as I start looking into more marketing efforts. My plan was to post more in-progress work but I was torn because I didn’t know if I wanted to make the account a more in-character element that could potentially even share clues.

For now, I have the account ready to go and will be starting updates soon. In the meantime, you can check it out at @ArcadiaReport

[sayskez]

The Full Flow: From Clue to Case Solved

Test it for yourself here

Based upon my previous prototypes and testing with users, I pulled together all my content with the latest designs to map out a complete flow. This covers the main areas of Arcadia, from:

Launching a case file

Searching the records

Viewing and saving clue files

Scanning a location and unlocking new evidence

Adding evidence to the report

Solving the case and submitting your theory

Conclusion and seeing how your solution stacks up against other detectives

Challenges:

Due to the content-heavy, search-based evidence, it is tricky to properly convey a full case in a visual only prototype so this only highlights one clue from each area rather than a real, full-fledged search. However, it is enough to move forward. Already seeing it all in context as well as showing it to different people has revealed areas I would like to improve.

Going Forward:

Re-examine the case report - This went through several iterations already and it’s a tricky one due to how it interacts with various parts of the app. I think there’s definitely still room for improvement to serve as more of a centre for tracking your progress.

Refine location scanning - The flow itself is working but I want to continue to improve the actual content and hone the most exciting and rewarding parts for players.

Case conclusion - The original idea was that everyone might submit different theories drawn from the evidence they submit and Arcadia ranks them. However for the first iteration I think it would be better to simplify this going forward and focus in on your solution.

The Prototype

Try the case out for yourself and start discovering the secrets of Arcadia:

Figma Prototype

[sayskez]

Case Report Iteration

I sketched various different ideas for how you add evidence and submit a theory about the case. This is a critical area as it ties together everything from across Arcadia, from the case file to locations and the records. 

The case report should...

Keep track of your progress into the case

Serve as a summary of your theory

Be a centre where you store clues

Originally I wanted something that would make you feel like one of those evidence walls in a murder mystery: with lots of connections and drag ‘n’ drop. However, this felt inconsistent and jarring compared to the rest of the experience, which functions like an old database with pop up windows. So I simplified and made it more in keeping with the records. 

Another tricky part is how and where you access the report. In early versions the report was the arcadia eye in the corner but I decided to move it to the nav and add a + add function from files so you can add directly to the report rather than having to go to the report and then search for the file you were just looking at.

[sayskez]

Getting Blocky: Breaking Down the Complete Flow

Building off my initial block wireframes, I mapped out the key flows from the app.

Launching a Case

This is the first thing you will do in most Arcadia cases and the most basic introduction to how it works.

Tracking Down a Location

One of the most complex (and key) flows to work out: how users discover a clue pointing to a real world location, travel there, and unlock new evidence. I already had work on this from various user testing but it was helpful to break down to simple elements to identify areas where perhaps there were one too many steps or potential transitions.

Searching the Records

The entire corrupted database of Arcadia is open to you and you can search the records for different clue files. This is another area where mapping it out helped identify areas (such as saved evidence) where I could potentially simplify and user testing confirmed this.

Submit Your Report

And finally, as you solve the case you can add evidence to the case report and submit your theory. This was actually one of the trickiest bits to work out and I am still not satisfied but how it connects to the both locations and records but it is getting there and now I can iterate on the core elements.

[sayskez]

Getting Blocky: Back to Basics

Going back from various style tests and prototyping, I went lo-fi with some blocky wireframes to get a feel for how I could apply the style consistently across the Arcadia.

I want it not to feel like a game interface but like the shell of real, live software which you are creeping through the corrupted records of. So for that, I need to develop a consistent design language and behaviour which works across the different areas of the game and feels real.

For the first pass, I actually experimented with a light colour scheme to force myself to really think not about the colours but about the hierarchy of windows and elements. This helped me visualise the entire interface at a high level so I could identify spots that felt out of place.

[sayskez]

Brand Dictionary

After looking at many different experiences from video games to tabletop to subscription boxes that captured parts of the immersive mystery experience I am going for, I noticed the repetition in some key brand words (such as thrilling) and the importance of catchy or intriguing phrases to describe the product.

So with that in mind, I set out to create my own brand dictionary of key words and phrases I could incorporate across marketing material. After whittling it down, my final list is:

Key Words

Immersive

Experience

Mystery

Surreal

Thriller

Key Phrases

“Mystery invades reality in this tech-noir thriller.”

“Transform your city into an escape room.”

“An immersive mystery experience, unique to you.”

“The mystery is in your hands.”

“Keep your eyes open.”

“Never see your city the same way again.”

[sayskez]

Searching Alternatives: JSON Objects

While researching search alternatives that didn’t involve building a weighty database, I talked to some developers and they suggested JSON objects as a potential alternative.

You can store all sorts of data in JSON and then call particular lines from the array. A kind of search, if you will. If you want to dive deeper, this can also be hooked up to a search engine. So I decided to give it a go!

Coding JSON Objects

Mozilla has some helpful, easy to follow tutorials on the subject:

Javascript Object Basics

Working with JSON

I followed both of the tutorials to create some super basic JSON objects, call back particular parts, and also use those to add the data to different blocks of content which could be displayed on a webpage.

All in all, surprisingly easy to follow along and something I might be able to draw on to create a working search prototype for my clues.

[sayskez]

Google Custom Search

One idea I wanted to look into was the possibility of creating a working search that I could add the clue files to where I could quickly iterate and test (or even reskin to create a working alpha version of The Arcadia Report). I wanted to avoid an actual database if possible, as that would be a lot of heavy lifting for a prototype. This meant a lot of googling different search options which eventually led me to Google’s own Custom Search.

Custom Search lets you add google’s search to your website to help people quickly find what they are looking for. I was hoping to repurpose this for Arcadia to search clue files on the website but unfortunately further research revealed Custom Search is not very customisable. I could set up a search but not in the manner I wanted to capture the Arcadia files. But at least I know there are options out there.

[sayskez]

Subscription Business Model

The Arcadia Report is split into a series of cases which can be enjoyed standalone but are meant to be played together to form an overarching narrative. I wasn’t quite sure what the best business model for this type of experience would be but I knew there were a few factors to consider:

I would like to offer a free trial of some sort so people can test it out and get hooked on the story.

It should offer something for all of my core users types: from thrill seeking millennials who just want to play with their friends to hardcore indie gamers who want the deluxe package and collectables.

I would like to include physical artefacts somehow.

With that in mind, I started looking at subscription services.

Millennials & Subscriptions

Millennials, who form the bulk of my target audience, are 32% more likely than the rest of the population to make impulse purchases and use subscription services.

They are also trended to have the most spending power of any generation.

For The Arcadia Report, this wouldn’t be an ongoing subscription or ‘pay-to-play’ kind of system like say Spotify or Netflix where you must pay every month to keep using the service and have access to everything.

Rather, I’m looking at the model of traditional subscription services such as loot crates, magazines, etc. similar to Hunt a Killer (another product I have explored in depth in previous posts). So people could subscribe to the whole campaign, receiving cases every month, or buy case by case (at a slightly higher price).

Tiers

The subscription is divided into different tiers:

Private Eye - Digital only tier where you can play online and purchase additional cases as you go. Perfect for people testing the waters or short on cash like Glenn, my thrill-seeking millennial user persona.

Detective - Purchase the case box on a month by month bases, including the game and the physical artefacts accompanying each case such as employee manuals, maps, stickers, and more. Perfect for mystery fans like Rebecca.

Chief Inspector - The complete box set with all the cases and premium extras such as secret clues, more backstory on Arcadia, and access to hidden parts of the database. Ideal for gamers and collectors like Martin.

Overall

I like where this is going but still want to work out the details, especially around timing and whether people would value more receiving the complete collectable box set at the top tier or if a monthly delivery system is actually more exciting.

[sayskez]

User Testing Location Clues: Take 2

After creating a HTML content-centric prototype to quickly test how locations might work in Arcadia, I took the feedback on board and quickly iterated on the key points.

My goal:

Make how locations work clear but in character

Based on the earlier usability testing results, I...

Pivoted my story explanation (from actually happening around you to a more sci-fi simulation of crime scenes)

Rewrote the location content to include help text (in the form of comments from the mysterious person behind the Report)

Included more corrupted text and highlighting to drop clues and reward close inspection.

Now to find some fresh victims volunteers!

Usability Testing

Participant 1 (22, gamer)

For locations

Went straight for the restore file button

“So I need to find a key to unscramble the data?”

Content

Scrolled through the whole thing first

“Do you have to know how to program?”

“I take it that is corrupted…”

Prefer tabbed

Preferred smaller sections

Overall

“That’s really cool!”

“Oh, like Pokemon GO?”

Participant 2 (mystery fan, gamer)

Content

Loads of text

Not a coder, is that a problem?

Victim profile: “where it starts to get weird, haha”

“Getting slightly harder to read”

Would be easier if it was in chunks

Locations

I would go there and take a picture?

It’s going to be a long walk

Overall

“Can I keep playing?”

I would play it!

Participant 3 (20s, gamer)

Content

It’s interesting we can’t see the incidents

Have to know it is corrupted. Otherwise garbled text is distracting?

Locations

Does it work if I click restore? Does that restore it?

“Find a key? I’m not sure”

Overall

Liked the idea, locations did not make sense

Suggestions

Add a camera icon in the corrupted photo

Key Takeaways

Great to get 3 participants from across my target market, from young adventure seekers and gamers to older mystery fans.

Content needs to be presented in a less overwhelming manner and easily parsable. I showed an alternate design which used accordions to hide sections of the case file at the end of the test and everyone responded more positively.

Similarly, given the tech-centric styling it can look quite intimidating. I need to balance this with making it more movie hacker fun than scary slog fest.

Be explicit about EVERYTHING: corruption, locations, etc. I thought I was explaining it more but I need to recognise that this is a mostly new mechanic in a game and straight up spell out how it works.

On the other hand, I also need to make sure how this works narratively. Setting the context for corrupted files, how Arcadia creates simulations, etc. 

Next Steps

Back to basics - I’m going to write out in plain text exactly what you need to do for locations and then iterate from there.

Glossary - Based on the feedback from testers, I’ve been building a list of terms and concepts which people are unfamiliar with that I need to set the scene for. A bit of story onboarding might do the trick!

Keep iterating on the case file design - I have concepts for a more condensed, easily parsable case file which all the participants responded to more positively than the original, long scrolling version and am going to start building off of that.

[garadinervi]

Noel Martin, Authority, Plant Engineering, 1959 [in The Moderns: Midcentury American Graphic Design, by Steven Heller and Greg D’Onofrio, Abrams Books, New York, NY, 2017]

(via Randall Ross/modernism101)

[sayskez]

I love the simple colours and geometry here to create a minimal but complex design with a lot of different sections but not overwhelming or without direction. The simple shapes and colours also remind me of my brand for Arcadia and make me wonder about the design of a physical booklet. It could be interesting to capture this sort of style graphic, vintage corporate style as seen here and in  the NASA guidelines to create manuals that look like they are from the actual Arcadia company. 

Another book to add to the wishlist either way: Midcentury American Graphic Design.

[sayskez]

User Testing the Content

Armed with a questionable bundle of HTML pages to imitate the process of reading a case file and hunting down a location, I set out to find some victims volunteers to see what works and what doesn’t.

But first! Plotting the test. I wrote up some brief test instructions to set the context (WTF is Arcadia?), explain what the test is, and what you have to do. My ultimate aim was to answer some questions about the design:

What I set out to learn:

Are location instructions clear?

How did you feel finding the location?

How did you feel about what you unlocked for finding the location?

What did it feel like you were reading?

Try out the prototype for yourself here.

The Prototype

How it works:

Read the case file

Find a location to restore

Take a photo of that location

Restored!

Feedback from Testing with Users

I tried it out with a couple people and though it was designed to be a moderated test I actually had two participants try it out remotely on their own so a nice range.

The Good

“I was intrigued and getting drawn into it.”

“Poor Julian” (Julian being the murder victim)

“Love my citizen number! That’s my birthday”

No one seemed to have trouble reading through the case file, even though I had concerns about the length of it.

“Really parsed through the first bit really thoroughly” (the code read out and garbled text)

The Bad

“Looked intimidating at first”

In all cases the instructions for restoring a location were unclear and people weren’t sure what they were supposed to do.

Can I just take a picture of anything? Isn’t that cheating?

People expected to find something in the garbled text and when they didn’t, it made them doubt themselves. “Like I’ve missed something”

One person googled the garbled text in the address, expecting something to be hidden there or reveal the truth (though this would be cool if there was something hidden there).

The Suggestions from Participants:

“Love my citizen number! That’s my birthday” (this did actually happen and I am totally going to steal it to make citizen numbers personalised to users as another little Easter egg).

If it’s unreadable, don’t render it as regular text

If you can cheat the system or this location can exist anywhere, make that clear.

Maybe that could be part of the story? Like you are actively trying to game the system in order to unlock something?

Maybe there could be puzzles? Even simple anagrams or replacing letters?

Could there be a simple starter case or introduction to the various systems like cameras and clues?

Reflecting on the Feedback

After the initial deflated feeling of total failure on the location front, I picked myself up to look on the bright side.

Key Takeaways:

Thanks to having a barebones prototype, key areas where the location gameplay fall flat were identified. Time to rethink and reframe from both a story and experience perspective.

Participants had some great suggestions in terms of what they would like to be able to do and what they expected to see. In particular, I wanted to look at how I use the garbled/corrupted text to hide clues and as a form of puzzle.

The suggestion of a starter case has me rethinking onboarding as potential case zero to get people started.

Double down on what is working: I’ve been playing it safe on the mystery front but time to up the game. People seem to be engaged by the idea so I should encourage and reward that inclination.

So all in all, the test was a total success! Now I know which areas need to go back to the drawing board for the next iteration.