How I went about creating the ‘Voight-Kampff’ of Today. | University Project

Xavier Evans-Jones
8 min readMar 6, 2020

--

It was my final project at University and I wanted to do something that combined both my interest in UX/UI and Science Fiction.

But what is this ‘Voight-Kampff’ thing anyway?

Well for those familiar with the Blade Runner films or book, it is a machine which is used to determine whether the synthetic beings ‘replicants’ are human or not. Which makes up part of the Voight-Kampff Test within the film.

The Voight-Kampff Machine in use.

In the words of the designer himself — Syd Mead describes it as;

..it had to be a suitcase, briefcase-sized thing and in my mind, it had to be terrifying and this machine was breathing because it would inhale the air, localised air between the interviewer and interviewee and process that, and pick up acidic traces and so forth. Much as animals do because animals can smell if you’re afraid.

Designed to be this intimidating device for those partaking in the interview within the bleak dystopian world that is Blade Runner. See the full scene here.

From this, I wanted to present with the question of;

What would the Voight-Kampff’ of Today be and how would it be used?

See what I did there. While doing research for the project the most recent thing that could be the equivalent to the artificial beings of Blade Runner, would be artificially made images and videos of people.

Presenting Exhibit A.

This Person Does Not Exist

As the link and caption tell you this indeed, this person isn’t real.

But what is this wizardry, these images are created using Machine Learning Algorithms also known as DeepFakes.

Various Article Titles under DeepFakes.

While all these Titles are real and rather bleak, I wanted to create my own ‘Voight-Kampff’ Test — again avoiding the dreary setting of its source material. I wanted to create an informative experience that would educate people on how to spot these algorithmically generated images.

Heres where the UX comes in..

Ideation

Now that I had loosely explained the premise of the project to you it’s time to show you the process I went about creating this.

I wanted to start off looking closely at how exactly the machine worked analysing the scene in the film, and seeing if I could make out what piece did and was there for.

Early Initial sketches analysing the scene with annotations and comments from me.
From this it developed into initially a ‘spot-the-difference’ design idea where you had to select a ‘person’ that you thought wasn’t real.

After a series of sketching and developments, I initially had settled on this ‘spot-the-difference’ format, similar to that of the reCAPTCHA test that you constantly have to do, to prove that indeed you are a human. Because currently to my knowledge that is the closest thing we have to a ‘Voight-Kampff’ test that we’ll get.

Inspiration

For the UI design of the interfaces, I wanted it to look old like some of the interfaces shown within Blade Runner. But with some modern-day aesthetics with it still being clean and easy to navigate.

The best example to my knowledge the provides an old operating system interface is Platinum Games NieR:Automata where the premise is you play as an Andriod in a dystopian future.

The UI Design is intentionally designed to look quite ‘analogue’ and ‘flat’ but still looks really nice and aesthetic with the added motifs to the design.

Nier Automata UI

Iteration

The initial design I wanted this to be was a simple select 4 images within a set, that the user thought was not real and computer made. After, you would get a detailed response to which one was correct and which ones were not, with some accompanying advice to help with the next set.

Concept and Grounding

Furthermore, I wanted the context of the experience to be within this Corporation as a ‘Training Program’ for new employees of the company.

The description I have for the setting follows;

Pitched in a speculative future where neural networks have perfected the simulation of fake imagery and video, also known as ‘Deepfakes’. The situation has reached pandemic proportions where public trust in information has degraded.

As an employee of XYZ Corp, you must participate in this ‘Voight Kampff’ Training Program in order to test your perception in identifying these ‘Deepfakes’.

However, I wanted this to be a usable within the confines of Adobe XD and it’s prototyping tools so I was limited to only having a single thing be interacted with at a time. Therefore, I had to redesign it slightly to have fewer examples to choose from. However, this made it so you could take a closer look at each image than before.

Furthermore, making it look more like a Tech Corporation which meant making a logo for this ‘XYZ Corp.’ in this speculative setting.

Various Iterations of the Logo I had created for ‘XYZ Corp.’ exploring this cross-section design.

After creating the logo and refining the aesthetics experience it was time to go about with testing if this experience actually worked. Furthermore, as this was my final project this was also going to be presented at the ‘Grad-Show’ where student work is presented to not only the public but potential recruiters and agencies looking to hire.

User-Flow Diagram of the Interaction
Experiment with the compent styles

I’m quite pleased with the look and feel of the UI in the final version while there are always improvements that can be made, I found people were fine with using it. Further, as I provided physical copies of the images and glossary section (which describes some of the flaws within the computer-generated imagery) to assist the user through each task.

Finalised Version for Grad Show
Dressed up set for the Graduate Show Exhibition

You can prototype the exhibition version here.

Takeaway and Reflection

I felt like this was a great final project to write off my time at University as it combined everything that I had learned with my own personal interests. Combining my existing interest in Science Fiction, with my newly discovered interest in ‘Speculative Design’, with the practical side applying UI/UX theory.

It was a follow up on a prior project, of which I researched the trend of interfaces in the sci-fi genre of film. Within, the field of speculative design and also science fiction, the elements are often grounded in reality, making scenarios seem more believable. A project which uses this strategy is the ‘Audio Tooth Implant’ by James Auger and Jimmy Loizeau. They had used media coverage make it seem like a tangible and real product, although in actuality it was not a working product. What Auger describes as ‘rooting speculation in the familiar’.

Wired Article on the Audio Tooth Implant

Familiarity however, can often be, very mundane and boring, from exploring what I coined the term ‘sexy-bullshit’ that makes up a lot of sci-fi interfaces. For this project, I wanted to deliberately make a sci-fi scenario seems quite heavily mundane and boring, while the concept and topic itself seeming interesting. In actuality, if we had a modern-day version of it, its form would be a rather plane interface rather than a flashy one we see within films.

Closing Thoughts

The unique challenges of this project was that, not only it had to sit within a exhibition, it has constantly being used. This brought with it a variety of challenges and constraints that I had to work with and manage. One quite unique challenge was the enviroment itself. Whilst looking like an office desk space I had make sure it didn’t look too much of one, rather than it looking seperate from the rest of the exhibition space in the area provided. Furthermore, due to the exhibition carrying acrossing multiple days, I only had time inbtween days to make minor adjustments, however due to it being in XD all I had to do was make the edit and update the link.

I am pleased with how the project turned out, although I never got to finish the introduction video I wanted accompanying the project before each user interacted with prototype. It served as valuable research, in not looking into some of my favourite films but also applying those techniques in quite a rare occasion within a exhibition enviroment.

Thank you for reading this far!

Thank you for making it all the way through, this was my first attempt at having a go at a Medium article.

For any further questions or insights into the project feel free to drop a comment or message me on LinkedIn. Alternatively, if you’d like to see any further work by me be sure to look at my Behance.

Furthermore, since you got this far here is a link to one my favourite podcasts 99% Invisible on where they discuss why future screens in sci-fi films are blue.

--

--

Xavier Evans-Jones
Xavier Evans-Jones

Written by Xavier Evans-Jones

UI/UX Graduate Interested is all things Sci-Fi and Speculative

No responses yet