Graphic Design

VR Design & Development

VR Design & Development

The following projects were completed as part of the M.Sc Human-Computer Interaction course in Bauhaus-Universität Weimar.

Virtual Reality

This module involved learning about the concepts existing in current Virtual and Augmented Reality. For all projects we used an in-house system called Avango Guacamole to create 3D environments and implemented various interaction techniques useful in an immersive 3D environment. The programming language was through Python. The video shown below is our team of two’s final project.

Behind the Mask 360 (Virtual Reality Design)

This course was an elective and involved the creation of various low-cost virtual reality assets. These assets were often centralised around the Google Cardboard, a cheap VR solution. Early on in the course we were allowed to think of different themes or scenarios where the discussed concepts could be used. I decided on a Sci-Fi exploration adventure theme that would be central to the completed assignments. Multiple technologies were used to create VR assets like photospheres, 3d models and special effects. The below list is a short summary.

  • Google Photosphere, Photoshop and Spherecast (temporary online Viewable VR images)
  • TouchDesigner (3D environment spheres and special effects)
  • Blender, 123DDesign (3D modelling)
  • Unreal Engine (360 3D environment and game engine)

Many of the techniques learned through using these technologies went into the final assignment. Here a 3D environment was modelled using Unreal Engine. Due to the lack of rendering and processing power it was not possible to create a seamless video of the 3D scene. Thus, a 360 viewable video slideshow was edited that showed the most notable spots in the environment. This assignment also involved designing a wearable mask with the Google Cardboard suitable for the Sci-Fi theme. Samples of the work can be seen below. A 3D model of the mask can also be spotted in the 360 video!

Photosphere

Evaluating Experience around Public Interfaces

Evaluating Experience around Public Interfaces

This was the second semester project and involved the creation and evaluation of an interactive public interface. The interface could be controlled using a person’s movement. The project was led by two students and one Research Associate from the Urban HCI Lab. Two quantitative studies were completed with 60 people.

The final version made use of Processing, a gesture control program made by Wout Standaert and a projector. Images and the summary poster PDF can be found below.

FULL PROJECT DESCRIPTION (PDF – 2.2 MB)

Early version

System overview

Leaflet for advertising the user study

Wild Type – Interactive Web Logograms

Wild Typography – Interactive Web Logograms

The course Wild Type – Typography Ex Natura was given as an elective in my first semester of M.Sc. Human-Computer Interaction. The course, offered by Media Art and Design, gave insights into the construction of fonts outside of just graphics, svg and ttf editors. Abstract representations, generative and programmable fonts were among the topics discussed and explored. Processing was used to complete most of the assignments during the semester.

For the final assignment we were allowed to each individually create a language or font system. I created the logogram system “Geks”, which was a continuation of one of the earlier Wild Type projects. The interactive webpage can be found here with more details in the menu:

http://markeisenberg.org/WildType/index.html

NOTE: As of writing, this site does not work fully in Firefox, as it uses a drag and drop function not supported by Firefox.

Wild Type – Geks

Cinestar Usability Prototype & Evaluation

Cinestar Usability Prototype & Evaluation

As part of the Usability Testing course of my Master’s degree we were asked to analyse a website we felt was not very usable, built iterative prototypes and subsequently do a quantitative usability evaluation.

Our team for the project chose the Cinestar.de website. The first part of the course was analyzing the chosen Cinestar website including picking out violations of Norman’s Usability Principles. Personas were created to explore the potential variety of users of the system.

Persona for cinestar website

Next was requirements analysis, building of two low-fidelity prototypes and then quantitative analysis. Two low fidelity prototypes were made using Moqups.com, each one created by one half of the team.

One Low Fidelity Prototype

To close off the course a mid-fidelity prototype was made and then analysed with users. The mouseflow Javascript library was used to gather visual data on how the user traveled through the website, how long they took and what were the most viewed and clicked sections.

Homepage Mid-Fidelity

Movie info Mid-Fidelity

Ticket purchase Mid-Fidelity

Mouseflow analysis Mid-Fidelity

The Investigators Project

The Investigators Project

This project was part of my M.Sc in Human-Computer Interaction and took place between April – September 2016. The project was worked on by more than 15 people, 10 of which were students from Computer Science and Media Architecture. Two workshops were completed with the artist Krzysztof Wodiczko in preparation for the final event. The project was included as part of the Kunstfest Weimar event.

One of my main responsibilities in the project was managing and reconfiguring the WordPress website and writing content. Most of the processes and events have already been documented on the website which cn be found at:

https://www.uni-weimar.de/projekte/die-ermittler

Explanation of the installation

PicDo – Mobile App Mockup

PicDo – Mobile App Mockup

Created using Sketch 3 for Mac and Photoshop for the 3D card effect. UI demonstrating simple, flat and minimalistic designs. Idea originated when coming up with ideas for my Final Year Project. I had the idea to create a nice looking and useful to-do list app that utilised images. Useful for things like shopping lists (“which brand of washing up liquid did they ask me to get again?” *checks image in app*)

PicDo Isometric

Below is another gallery for your viewing pleasure!

FYP – Lifeguard Examination Animation

Final Year Project – Lifeguard Examination Animation

The purpose of this animation was to help the participants of the exam understand the exam process on the day. The examiners can see what the queuing process is like. In essence it is an instructional video. All of the icons and characters were created in Adobe Illustrator. These were then imported into Adobe After Effects for animation. Once I had completed these animations I did some further editing and post-processing in Final Cut Pro X to arrive at the final product. The two most useful resources for creating this animation were the Creative Cow Youtube playlist and this video on Puppet Pin animation.

FYP – Lifeguard Examination Application

Bachelors Thesis – Lifeguard Examination App Design

Team Size: 1 (me)

Type of Project: UI Design / UX Research for Education

Timeline: 8 months (Final Year of Bachelors thesis)

As part of my Final Year Project I created an Android application that could be used during the Pool Lifeguard Exams. The application can be used by the examiners for marking the students, and the participants can review life-saving techniques.

The key benefit from the design and development of this application would be the digitalisation of the laborious and inefficient manual examination process. Calculations and filtering help to expedite the process and with the addition of features like the double stopwatch, additional user benefit is added.

The following screenshots show the key screens and functionality of the application.

Approach:

Twice During development I involved close friends, colleagues and family in the testing of the application. I conducted several guided user tests to validate the user flow and usability of the interface.

Tools:

The Android application was coded within the Eclipse IDE using the Java and XML programming languages. A MySQL database was created and separate PHP files allowed the database to communicate with the Android application. The information read by the Android application was parsed as JSON.

Final Notes:

I like to think that I made this project through the process of “patchwork programming” (or to a certain extent agile development). By following tutorials and videos I was able to build my very first *proper* Android application. The two most useful were MyBringBack and AndroidHive.

StackOverflow was also a very useful resource.

DocuPal – Applied Interaction Design

DocuPal – Applied Interaction Design

For this college module, we had to choose a topic that we wanted to explore. We were allowed to choose any topic. This topic would then be explored using either a ‘design game’ or ‘design probes’. Our team of two decided to do a design game on the software product development process.

This game was based loosely on the concept of Apples to Apples. The video below demonstrates how the game worked.

The sticky note solutions from the design game were all collected and analysed. After getting inspiration from these solutions, we had to come up with a final design solution. After brainstorming ideas and sketching a simple graphic user interface I ended up with this final design concept and prototype:

This video was made using Axure RP, Final Cut Pro X and Adobe Illustrator.

A brief description of how the interaction was prototyped:

  • A clickable prototype was made in Axure RP.
  • I then took a video of the screen as I was completing a task normally in Microsoft Word.
  • I edited a GUI into this video and placed it back on the smartphone.
  • Finally, I filmed myself pretending to use the application.

The final result is DocuPal, a prototype of an application that can assist people in using documentation for software.