Portfolio

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.

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.

Interactive Multimedia – Year 3 (Semester 2)

Interactive Multimedia – Year 3 (Semester 2)

The Interactive Multimedia module included a project that required us to add functionality to a program using Processing. The program was able to sketch coloured lines on the screen. Once the user pressed play the lines would emit a tone. The main functions added were:

  • Help menu
  • GUI (see picture)
  • Line colour indicator (orange box under GUI)
  • Undo/Redo function
  • Limited volume control

These functions could be accessed using either the GUI or keyboard keys. Below are some example screenshots.

processing lines

Different coloured lines correspond to different tones

codedraw

Sample of code in Processing

Solidworks Project – Year 3 (Semester 2)

Solidworks Project – Year 3 (Semester 2)

This semester included a module teaching the use of Solidworks. Various exercises were completed throughout the year to build up the skills required for the final project. Below are examples of the final project, which was modelling a handheld screwdriver with internal parts.

drill render

Drill render

drillexplodedview

Exploded view of drill and parts

rightside

Photo of actual drill

 

Product Communication – Year 3 (Semester 2)

Product Communication – Year 3 (Semester 2)

Below are the final compositions of project 3 for the Design Visualisation module. The objective here was to photograph various design aspects of the product using photography, as well as present them as if they were in a product/tech magazine. Photos were edited slightly in Photoshop. The overall layout was done in Adobe InDesign.

xboxmag1

xboxmag2xboxmag3