Web Develepment

IoT Design – Masters Thesis

IoT Design – Masters Thesis

My Master’s thesis involved the creation of an Internet of Things interface, which I entitled “HomeNodes”. The HomeNodes interface was projected on to to objects. Users could connect objects together using a touch enabled wall interface and by tapping their smartphone on different objects.

The following is a short summary of my project:

  1.  Conduct low-fidelity prototyping sessions with users to explore the IoT design space.
  2. Research existing interactive systems
  3. Construct a prototype
  4. Test with users and use observation and video analysis
  5. Build a list of topics from this analysis that outlines the important design considerations and feedback for my IoT interface.

Video of the system in action:

The following images are version 1 and 2 of my systems. The green elements in the second image are technologies that I added to make the system more scalable. The thesis can be read and downloaded in full at this link. The code will be available on my GitHub.

Version 1

 

Final System (HomeNodes)

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

Visualization

Data Visualization

For the Visualization course in the M.Sc. Human-Computer Interaction we were tasked with visualizing data in Java and some small parts in C++ and OpenGL.

The final project allowed individuals or teams to choose their own choice of visualization language. I chose to implement a two visualizations of Olympic medalists, a treemap and a dotplot. Both interactive visualizations use the same dataset. The visualization was developed using HTML, CSS, Javascript plus the d3.js library.

The link is live at: markeisenberg.github.io

Medal visualization d3.js

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

HungryBungry – UX Exploration – Find a restaurant

HungryBungry – UX Exploration – Find a restaurant

During my placement at Mosquito eCommerce in June 2013 I was asked to create wireframes for their up and coming food ordering website HungryBungry. The following images are the wireframes of the the ‘Restaurant Listing’ section of the desktop and mobile versions of the website. Some notes are included about the potential functionality of the website.

List page mockup desktop

List page mockup desktop

Listing Page Mockup mobile

Listing Page Mockup mobile

map page mockup (desktop)

map page mockup (desktop)

map page mockup (mobile)

map page mockup (mobile)

Photo page mockup (desktop)edit

Photo page mockup (desktop)

Photo page mockup (mobile)

Photo page mockup (mobile)

HungryBungry – UX Exploration – Create a meal

HungryBungry – UX Exploration – Create a meal

During my placement at Mosquito eCommerce in June 2013 I was asked to give feedback on their existing food ordering website HungryBungry. The following images are the modifications I made to the UX of the ‘Create a meal’ section of the desktop version of the website. One thought I had when going through the different iterations was that the user would appreciate a visual representation of their sandwich or meal being built on screen. I wanted to keep this in mind as a UX point of view while also trying not to over-saturate the screen or make the interface simple, but not boring.

Capture

My next task was to imagine how the responsive website would look on mobile and tablet screens. Click on the images to view a larger size.

MobileMeal

TabletMeal

Work Experience – Mockup Design

Work Experience – Mockup Design (HungryBungry)

Below are some mockup samples created during the placement. The first was a mockup for a mobile app interface. The second was a mockup of a restaurant’s unique page. Both were made in Axure RP. The mockup restaurant webpage was partially usable and was shared using Axure RP’s ‘Share’ feature. Other people could then try out a prototype of the webpage.

iPhone app mockup

iPhone app mockup

Restaurant webpage mockup

Restaurant webpage mockup