Since this page is merely a selection of highlights, I highly recommend to have a look at the „Process Document“ at the end of this page for the full impression!

This project was part of the „Interaction III“ course during an exchange semester to the Rochester Institute of Technology in the „New Media Design“ program.

RIT logo.png

The Project

The objective for this project was to choose a food or fashion brand that would benefit from having an interactive kiosk. This would streamline the ordering experience while allowing for a stronger brand impression.

I chose to develop the system for Jamba (formerly Jamba Juice) as I still have fond memories of their fresh and fruity smoothies from my childhood.

The Process

The focus with this project was on the UX-design process. Steps along the way included a heuristic evaluation of a similar system, a comprehensive requirements document, workflow diagrams for mapping out the experience, physical mockups to figure out the size of on-screen elements, wireframes to lay out all individual screens, functions and interactive elements, a detailed style guide, comps for a polished impression of the User Interface and a fully animated walk-through.

The Kiosk

physical_kiosk.png

For the physical kiosk device I chose the „Approach 32“ by FrankMeyer. With its generous 32 inch touchscreen at 4k (3840 x 2160 px) it provides plenty of space for a delightful and comfortable ordering experience.

Mockups

Mockups_2.png

The Result

Main Screens

Main Comps 1.png
Main Comps 2.png

This selection of screens shows the main ordering flow following the greased „menu“ path. The last screen shows the „mix your own“ approach that allows users to create their smoothie from scratch.

This is only a very limited selection of comps. To see all screens and additional features (pop ups, error messages, on-screen keyboard, product selection, etc.) please view the „Process Document“.

Workflow Diagrams

Main User Flow

Jamba_Workflow_Main.png

Mix Your Own |  Add-Ons |  Accessibility

Jamba_Workflow_3.png

Check-Out | Cancel Order | Time-Out

Jamba_Workflow_2.png

The Wireframes

Main Screens

Main Wireframes 1.png
Main Wireframes 2.png

To see all screens including detailed annotations please view the „Process Document“.

The Styleguide

Styleguide Selection 1.png

This is a very limited selection of the main contents of the style guide. For the full style guide please view the „Process Document“.

The Movement

The Process Document

Unfortunately, due to strict document size limitations posted by Incom, the document had to be split into 4 parts.

I’ll be happy to provide the document in high quality upon request!

Part 1

NMDE_Interaction_III_Jamba_Beil_Part_1.pdf

Part 2

NMDE_Interaction_III_Jamba_Beil_Part_2.pdf

Part 3

NMDE_Interaction_III_Jamba_Beil_Part_3.pdf

Part 4

NMDE_Interaction_III_Jamba_Beil_Part_4.pdf