Me Button- Time Machine

The 'Me Button' project required teams to sketch, design, implement and document an application where the central interaction is with a button, such that the interaction represents some aspect of our client’s personality or character.

Me Button- Time Machine

For the first stage of the design process, our team was required to produce 10 sketches, individually, of an initial idea for our Me Button. Our 10 best sketches from this stage focused on clients such as cartoon characters, the members of our team, and celebrities.

One of our ideas was a Time Machine button, as seen here.

The Time Machine button depicts an interaction in which the user clicks through a menu to select a time period to travel to, in which the scene changes depending on the time period that they choose.

We chose a Character Arc Game as another possible idea

Most sketches depicted buttons with clicking/tapping as the main interaction. The Character Arc game simulated a journey, in which the user clicks/ taps on landmarks on the path to travel through a character's story- in this case, the story of the character 'Eleven' from hit TV show 'Stranger Things'.

The 'Total Drama Roll Call' idea was another possibility

Total Drama Roll Call involved clicking on an image of the client's (in this case, cartoon character Chris McLean from the TV Show 'Total Drama Island') face, which would cause images of other characters of the show to pop up, with audio of their lines in the show playing simultaneously. Chris' facial expression also chaged depending on which sub-character popped up.

'Burning Textbooks' was one of our favourites

The Burning Textbooks button simply enabled the user to click on the fire and have a textbook image appear to fall into the fire and be burnt to ashes.

'Eating secretly in classroom' was another probable idea for the button

This next button would involve an animation in which the user would have to time their clicks/taps to enable the character to eat while the teacher's back is turned.

'Build that muscle' and 'Feed the dog' were also promising ideas

Build that muscle was a button that would help the user to stay motivated to exercise, while Feed the dog simulated feeding one's pet.

'Reaction Speed' was yet another possibility

The Reaction Speed button would enable the user to put their reaction time to the test.

'Dog Barking' (pictured as number 8 above) was our 10th idea

The Dog Barking button was a fun take on the pet-simulation idea seen in one of our earlier sketches, in the sense that the pet interacted with the user based on the user's decisions- if the pet was petted a number of times, it would react positively, but pet it too many times and it barks at you!

For the next stage of the ideation process, our team was required to create 10 more detailed/varied sketches based on the first stage. Our team decided to have each team member create their next 10 sketches based on one of our best 3 ideas from the first stage of ideation (Which were Time Machine, Total Drama Roll Call and Burning Textbooks). I chose to create 10 variations of the 'Total Drama Roll Call' idea for my contribution, outlined below:

Variations 1 - 4 of the 'Total Drama Roll Call' idea

For my variation/detailed sketches, I chose the 'Total Drama Roll Call' idea from the first stage of the ideation process and created 10 variations of the idea.

Variations 5 - 7

These variations focused on the client "Chris McLean", a cartoon character from the 'Total Drama Island' series.

Variations 8 - 10

As with the sketches from stage 1, most interactions sketched here involved clicking on elements of the screen. Two (variations 4 and 5) involved tapping and placing the device near the user's ear, similar to how a phone call works.

We ultimately decided to choose the Time Machine idea to create our final Me Button because, according to peer and instructor feedback, it was the most unique of our 10 ideas from the first ideation stage. Here is a video showcasing our finished project.

Our project repository can be found at https://github.com/sohaibnabeel15/TimeMachine.

Other projects: