#projectprototyping

[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]

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]

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: 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]

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.

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