MetteDesign

The collection exists of old websites (time travelling) which connects to the retro gamers, the websites that we selected from the archive are interesting for the gamers and gamblers. The sitemap feature is graphically an interesting navigation tool for the gamers as well.

The Retro style on its own is very useful, console elements, colors pallets, the pixelation, pixel fonts, game graphics.

Who are you designing for?

Retro gamers and gamblers

What is their relationship to the collection?

Which content are you ‘interfacing’?

Technology, playfull and challenging, competition and winning/loosing as well.
The interaction and experience is what should make the user group interested and excited.

The websites in the archive.
Another possibility is the collection of errors. Can I make an interface or game out of errors? Important question is what am I trying to accomplish with this?

What type of interaction is fitting for this?

What type of medium is fitting for this?

I think the medium can be something digital (website app) or print, or a combination (hybrid), an installation.
A game, object & more.
I want to step away from the apps or websites because those media feel too obvious to use for the archive.

In general: what are you trying to accomplish through the interface you want to design?

We want to make the archive accessible and enjoyable for the gamers/gamblers. The content on the archive might not be interesting enough for them to visit the archive, so we have to make the experience amusing and satisfying.

Which visual design elements have you already collected/designed that can be useful for this?

Idea No 1_quick and dirty

For this interface I thought I could combine a little bit of an exercise/body movement with gaming. So imagine a wheel like the "Loop", but you are standing inside. And then you walk in the wheel, you can for example control the speed inside the game you're playing. There are buttons and switches in the center of the wheel, with handles that you can stay in balance, like a treadmill. The game is projected onto the wheel so that the movement of the wheel itself doesn't influence the visibility of the screen. Most retro games are played standing still or sitting still, and you only move your hands. So it would be a fun and refreshing and not to forget healthy, change in the arcade gaming world.

I like the idea of making fun of all the errors that are in the collection.
At the same time I want the archive to be more fun to explore for the retro gamers.
I am going to make small games out of the error, and make sure the users have to solve/win this error game first, before they get permission to visit the website.
(For example, the 404 not found page: _ _ _ not found. And they have to ‘crack the code’ of 404, in order to grant permission.)
I think in this case the interface should be an app or website, even though this sounds so obvious.
It’s all designed in the retro style of course.
When entering a website from the archive, I want the transition to be smooth.

Maybe the collection itself can be the errors, but am I allowed to redesign the errors into games? Because in that case I’m changing/transforming the collection itself…
What am I trying to accomplish with this? Instead of supporting the web archive, I’m making fun of it. For the gamers it’s a collection of small retro games that are funny because they are about errors, and that’s normally a negative thing. But when you think about the dinosaur game from chrome, that’s a pretty big succes.
This game is something you play when you come to the conclusion you don’t have an internet connection.
The game “I hate this game”, is also an error game, which is more about solving puzzles that are very much outside of the box. This is a game you will play for fun, and not by chance.

This interface is basically the paceman maze, but when you scan it it's also a QR code that you can scan, and then you can get on the website of the archive.
My first idea was to make a maze that people can actually walk through, and when they finish the level certain parts light up, that form the QR code. And you can see the top view at the entrance, where you can scan it.

A step smaller is the idea to create the QR code with shadows, so you have to move pieces like you would with Tetris, and their shadow has to form the code.

Another step smaller is the idea of the t-shirt. This is more of an idea towards the retro gaming community. So if the users would wear this shirts, and only they know it's secretly a QR code that they can scan to land on the archive, like a secret portal.

This idea has a similar goal or drive as the Gaming Wheel idea (No 2). Because the interface would be a walking (or biking) route/map, inside an app. Every route is traveling through the years of a certain game website. So you can either follow the route, make choices where you want to go, or turn on notifications. There are some location points, that are safe places to go on your phone and play games. Because it's not safe on the street with all the traffic. There are meeting points, like in snapchat where you have the map and you can see if there are any other people. You can make friends on the app, chat, and just share the same hobby, while being healthy and social.

To store the collection of gaming websites with the physical games they collected. Build a crate out of QR codes or URL's. This is for in retro gamers homes or at the arcades/awesome space. They can browse through the webarchive like they would browse through their actual games inside the crate. Or something like bookmarkers.
The collection of gamewebsites can be stored as physical QR codes, lasercut, and

Time Travel Machine

Gaming Wheel

Collection of errors

QR maze

Time Travel Route

Storage Cube

The archive hunt

Because of the research on libraries and archives in the digital age, and this image, I came up with the idea to make a digital interface, where you can wonder through the "hallways" of the archive/library. And to involve the winning or loosing aspect, the pathways are also a "Pacman maze". It's an online game/archive, and you can choose a character at the beginning, so if you want you can be one of the ghosts and have the possibility to 'hunt' the Pacman. It really looks like you walk through the hallways, and when one of the ghosts pops up from behind a corner it is really kind of a jump-scare. This excitement and of course the curiosity towards what is in the archive makes it great for retro gamers. It might even be interesting for the gamblers too, because of the chance that you get caught by a ghost if you go around the wrong corner. I would like to include a point system. So when you reach a goal, for instance you get safe to a selected point of the archive, you get points. Maybe you can unlock certain parts of the archive, or win new characters to play. This way there will always be some motivation to play a little longer, and then you can win these achievements.

Inspiration

Concept

Sketches

Concept

Inspiration

Concept

Sketches

Concept

Sketches

Inspiration

Idea No 2

Idea No 3

Idea No 4

Idea No 5

Idea No 6

Idea No 7

Concept

Inspiration

Sketches

Concept

Inspiration

Sketches

Concept

Sketches

Inspiration

Idea No 8

Archive book

Concept

The retro gamers are very passionate about their hobby, and spent much time playing their games. In the questionnaire we asked them what websites they would visit if they could go back in time, and why or what they would do with this 'power'. And they said their passion for retro games is mostly because of the fun, and nostalgia, and they appreciate the style and the development in websites. So this concept is a game websites archive, in book format. There is a selection of websites stored inside, and if you unfold the page vertically you 'scroll' through the site. If you unfold it horizontally you go back or forth in time. It's mostly about appreciation and development of sites, combined with their passion for retro games. The book is in the shape of an old PC. It's about having this collection to yourself, and the fact that you can keep it forever. You don't have to turn on a PC and navigate towards the site and search for the particular one you want to see. It's all there in the book. There are actually a lot of books about games. Maybe I can include QR codes if they want to visit certain pages.

For this concept it can also be cool to only use blogs from the archive. So that it's a real book with text and images, which is written by the retro gamers themselves.

Sketches

Inspiration

Idea No 9

Card game

Concept

When reading the results of the questionnaire I noticed that some of them are also into card games, board games and puzzles. Either digital or physical. Maybe I can make the archive into a card game, where every website has their own card.

Inspiration

Idea No 10

Save the archive!

Concept

Save the archive! It's the retro gamers mission to capture their favorite sites as they are now. They contribute to this big task, keeping the retro gaming websites alive. The interface is the 'Way Forward Machine'. It's about thinking about the future and how we can store these amazing websites for our future retro gamers. A lot of the retro gamers have kids, so it's a big motivation to save their favorites for their own kids to watch and play when they are grown up.
Of course they can also see what's already collected, but the main thing is that they have to capture their sites.

The coincidental error games are the most fun, because of the situation. The website is simply failing, but they try to keep the user in a good mood and entertained by making the 404 page a game. So maybe the interface should not look like an error game, but once the gamers start playing it they will figure it out. And this can become a joke in the retro gaming community, you send a link to the app saying “check this app, some cool websites with retro games you should play” (or something) and then it turns out it’s errors only. An app kind of ruins the surprise, so maybe it should be a website, because from a website you expect everything to work.

Inspiration

"Save Page Now" option on the current Wayback machine.

Sketches

Conclusion, 'The Archive Hunt'

For my final interface I decided to go on with the concept 'the archive hunt'. This will be designed for the user group retro gamers.

It's a 3D gaming experience of visiting the web archive.
The games it's inspired by are the PC games in first person, like Half-Life and Duke Nukem 3D. These are favorite PC games from the actual user group retro gamers, from Awesome Space Utrecht.

They can choose characters, hero and villain. The hero has to run away from the villain and get to their mission safely. The villain must catch the hero (for points) and can also play missions.

So far, the retro gamers are mostly interested in websites related to retro gaming like blogs, forums and gameplay. So this will be
the content.

I can make a prototype by making a tiny version (shoebox size) from the archive, and 'walk' through it by making pictures or videos from the inside.

First I thought every time the gamers gets to a website from the archive, they get a point. And with a certain amount of points, they can unlock certain parts of the archive.

But Kimmy said I should think about whether this point system is enough reason for them to actually visit the websites.
So I kind of altered the idea. I can attach a mission to every website in the archive, for example: 'Go to the year 1998 and win 3 levels of pac-man, to earn 5 points. This way they get motivated to actually visit the website and do something on it, in order to collect the point. With the points they still can unlock certain parts of the archive.

Concept

Content

Prototype

Motivation

Questions

How can I use typography? > sketches
Can I make this (and maybe a prototype) in the form of a website?
(with help from Arjen and Maytal). > ask
Is the point system enough motivation? > test
Do they understand the game? > test
What am I trying to accomplish? > To make the experience of visiting the archive more exciting and motivating to visit the websites.
Do the hero and villain character have any value? > test
If they are the villain do they still want to do the missions? > test
Do they really enjoy this version of the archive more than the original? > test

Typography sketches

Welcome to the Wayback Huntings, a place where years and years of retro gaming websites are safely stored. It's your mission to find all of the hidden gems, that are locked behind the walls. But you must beware! The archive is haunted by its spirits. Make sure you do not get caught…

The original sketch I used as a base

The opposite sketch in layout and typography

The opposite also in color

Using a font from another student

Combining everything to a new hierarchy

Conclusion

Feedback - conclusion

For the concept I was asking myself if the users should be able to choose whether they want to play the hero or the villain. And I wanted to test this on the users to see if it has any value for them, and if they would still visit the websites in the archive if they were the villain. But Maytal told me that those questions are too conceptual to ask to the user. The testing should be really about the usability and if they understand how the game works.
We don't have enough time to go into details and see what conceptually works best. So on that note I decided to leave it the way it is. The gamer is the hero, and the spirits in the game are the villain.

Concept

By making these exercises I learned that by doing the opposite of what you would normally do, you get really interesting results that you would normally not come up with. When sketching the first three layouts I looked into what other games do with typography, and basically made my own version of that. So a lot is centered, the name is big, and the score and health bar are small and in the top of the screen. But when I did the opposite, the score was huge, and the name small. At first I thought hmm that isn't right, even though it looked good. But with my group we concluded that maybe it's not so strange because a gamer would rather know how he is doing than what the game is called.

Prototype

At first I wanted to make the prototype in 3D, and try to make pictures of the inside. And those pictures would be put on a website that I would code. But with Maytal we talked a bit about this, and she really emphasized how simple the first prototype can be. Maybe only four rooms/hallways with one website portal, and make one spirit pop up. So I changed my plan, and instead of building a mini version of the archive maze, I'm making digital sketches of what it would kind of look like, and place those in Adobe Xd. Then I can easily add buttons to navigate as well.

Questions

After the meeting with Maytal I realized I have to rewrite my questions for the user, because they were too conceptual.

New questions:
1. Can you start the game?
2. Can you find the hidden website?
- Does he understand how to move in the game?
3. A ghost pops up, what do you do?
- Does he try to fight it in some way?
- Does he go another way?
4. Found a website? Can you read the mission?
5. Can you enter the website?
6. Can you go back to the archive?
7. Can you pauze the game?
8. Can you quit the game?
9. Did you see and or use the map to navigate?
10. Did you see the hidden websites were on there?

- Open the original archive
1. Can you search for your favorite retro gaming website?
2. Can you open it?
3. Can you go to another year?
4. Can you go back to the archive?

Prototype sketches

Scene sketch

Home/opening screen

Caught by spirit scene

Healing heart

You found a screen!

Mission introduction

Favicon

Logo

For the logo I wanted to spent as little time as possible on the design, because it's not the most important aspect in this phase of the project. So instead of creating a whole new logo, I made a redesign of the current Wayback Machine logo. I used the old Wayback Machine logo as an inspiration source. So the letters are also placed in a wave, this also looks spooky which suits the game's vibe very well. The triangles represent the gaming part (referring to the playstation symbols used in the game), the letters represent retro and digital, and the arrow in the 'G' is a save/download icon, which of course represents the archive/archiving. The G / arrow also reminds me of a maze, which links to the archive an the hallways again.

The blue and green colors make the letters look glitching or hacked, which is the same that happens when the player encounters a spirit in the game. It also again looks very digital. I also made sure that the logo works in black and white, and in this case the colors blue and green just aren't there.

For the favicon I chose to use the letter 'G' only, because this represents the archive.

Logo concept

Colors

Favicon

Mission

Caught by a spirit, made my own glitch screen

Inside a mission / website 2016

Inside a mission / website 2012

can stand on the gamers desk for example or on a shelf as decoration. So when they are in their game room/environment, the games are stored close to their physical games, and they can just scan the code and they go to the archive site. The real big gamers with a big collection already have a nicely displayed storage, so they don't need the actual crate, rather something small and decorative.

And instead of different shapes like clubs diamonds hearts and spades, it's four different captured years. When you have a complete set of one website, you can unlock the code that gives you access to the website.

Design round 2 prototype

Arcade hall

Arcade machines VR

Arcade interior

Arcade machines

Arcade interior

VR arcade game

Feedback prototype 2

Megan her feedback with the online meeting, was if I could incorporate the websites of the archive into my interface design a little bit more. She mentioned the health bar, heart and the spirit. Right now they are gaming elements, but not really connected to the archive yet.

When I was writing this down in my notebook it reminded me of the errors game idea, one of the 10 ideas we had to come up with in the beginning of the design phase. I was very enthusiastic about the idea of using the errors from the archive but didn't know how and mostly why this would attract the gamers. Now this seems to fit in.

Conclusion

Feedback

The 'new' idea is the following. What if when you encounter the spirit, you get 'redirected' to the dark side of the web.
I can make use of the environment, normally it's green, but when you get on the 'dark side' it becomes red. Immediately you'll know something is wrong. You'll get the notification that the wifi-connection is gone. The arcade machines don't work anymore, and now display the collection of errors from the archive. In order to be able to play the missions on the arcade machines again, you'll have to restore the connection. Instead of collecting hearts to restore your health, you have to find the wifi symbol to reconnect to the wifi.

This way I'm including the collection of errors, and making use out of the spirit and the 'health' which is now connection. Also what I like is that wifi is a pretty modern thing, so it's a retro game, but with a modern twist.

So what needs to be changed?

+ Wifi icon
+ Navigation arrow U-turn
+ Interactive colored grid
+ Error to an arcade machine
- Back button
- Health bar
- Heart

Design round 3 prototype

No wifi icon

U-turn arrow

Red grid = danger

Pop-up overlay menu of the "levels"

Pop-up overlay "Lost connection"

New arcade machine with error

Error screen

Reconnecting screen

Orange grid

Searching for wifi

Wifi connection