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

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.

Where I see myself in…

My Ideal Job

From the few years I have spent in the Digital Media Design course, I have gained a bounty of experience and knowledge relating to the ICT and design industry. The areas that have peaked my interest have been Web Design and and User Experience Design (UXD). I am intrigued by the theoretical aspects and design processes and how they go hand in hand with the likes of programming and video production to create a seamless usable experience.

From the study of human action, behaviour and sociology we can gain a greater understanding of how to make an experience more usable. Jakob Nielsen is an advocate for good usability, particularly for Web 2.0 where he mentions how:

“…users don’t return to sites that are difficult to use. Only if people get a positive user experience on their initial visit will they return.” (Thompson and Kemp, 2009)

I could see myself working in a company that sees the value in the cooperation between the developers and designers. Managing projects, prototyping, programming, maintenance and even consultancy are potential work areas that I would be interested in. To gain a better understanding of where my future lies I have done some research into existing companies…

Jam 3 is a digital production and design agency that creates multimedia works for the advertising and entertainment industries. They follow three core principles: storytelling, design/craft and technology. For storytelling they like to create interactive experiences, be they installations or film. They refer to their unique design touch as their ‘craft’, and they embrace workers who specialise in various design and coding technologies. This place would be a very interesting place to work, where creativity could flourish.

Jam3

Clickshape is another example of a company that would suit my interests and knowledge. Having worked for ‘eCommerce’ companies before I know that creating a fluid and efficient user experience allows for a greater conversion rate (i.e. customers that want to continue browsing the site and purchasing products or services) as well as overall happier users. Clickshape use multiple UXD methods including: Wireframing, IxD, Information Architecture, User Testing and Conversion Optimization (in particular for eCommerce websites).

clickshape

Modern web development and UXD take inspiration and aspects from many different fields of expertise. Clickshape mentions that video is becoming a more integral part of a multimedia experience, as technology advances and data transfer speeds increase. This can be seen in the web development showcase website Awwwards, where many of the listed websites play a HTML5 video in the background. I think many web developers can agree with Simon Collison, a designer from Nottingham UK, who believes that websites should be built to stand the test of time, be future-capable and at least be changeable.

During my last two work placements, I found myself using various wireframing tools to create website or mobile application mock-ups. Axure RP was the primary tool I used to create these prototypes. Axure allows the user to create working prototypes of websites which can then be shared with co-workers. The clickable mock-ups can show the concept in motion for whatever platform is being created. No programming skills are required, but some technical skills and practice is recommended. Moqups is a similar online-based tool.

axure

A designer that I would personally admire is Cennydd Bowles. At the time of writing he worked as a Design Manager for Twitter in London. Known for his work as a digital product designer he also writes for A List Apart, a website which writes articles on the creation and management of websites. He has public speaking experience, so he knows how to present various ideas and express his thoughts on various social and technological matters to like-minded technology enthusiasts.

cenny

On the UXD side of things I would be interested in the work of Joseph C Lawrence. As a UX Designer himself, he would know how to take an idea or prototype and guide it to be a viable business platform. He is able to combine various processes such as prototyping, business/requirements analysis and the overall design to create a fun, usable experience that customers or clients will enjoy. He works at the aforementioned Clickshape company, which resides in South Africa.

Joe

References

Thompson, A.-J., Kemp, E.A. (2009) ‘Web 2.0: Extending the Framework for Heuristic Evaluation’, in Proceedings of the 10th International Conference NZ Chapter of the ACM’s Special Interest Group on Human-Computer Interaction, CHINZ ’09, ACM: New York, NY, USA, 29–36, available: http://doi.acm.org/10.1145/1577782.1577788 [accessed 14 Sep 2014].

Intermediate Android Development

Intermediate Android Development

Below are some further examples of my work with Android Development. The Intermediate tutorial series at mybringback.com included information about communicating XAMPP, PHP and phpMyAdmin with a newly developed Android application.

Communicating between classes

Communicating between classes

Create a journal entry

Create a journal entry

Keeping a piece of text saved within the application

Keeping a piece of text saved within the application

phpMyAdmin database

phpMyAdmin database with comments stored

Posting a comment

After registering to the database or logging in, you could post a comment using the application.