Process Overview
Showing off for Delphi

This was a professional project for Delphi's marketing team. This was a two-person project within approximately three weeks in February 2014. This project shows-off my early work in Interaction Design and my experience in coding and prototyping. This project was displayed at Delphi's 2014 Investor Show.

section 1/4
Context
Five Informational Kiosks Next to Five Vehicles
This was the basic set-up for the investor show. Five vehicles would be on display:
  1. Ford Fusion
  2. Ferrari 458 Speciale
  3. Chevrolet Silverado LTZ Crew Cab
  4. Mercedes-Benz E-350
  5. Buick Lacrosse
Each vehicle would have its own corresponding kiosk, as shown here.

The kiosks consisted of two parts: a white encasing stand and an all-in-one touch-screen PC built inside.

section 2/4
Ideating / Wireframing
"Let's get rid of the bad ideas sooner than later"
​
Iteration #1
I made some early models of what the interactive kiosk display could look like. This was to get some ideas out, weed out bad ideas, and identify the good ones. A good example of a "bad" idea is show here. My manager told me "never do something that looks like this again."

However, it did demonstrate how a user could touch a product line and progressively disclose how different technologies are embedded into the vehicle.
Iteration #2
Here, I pick up momentum. The product lines are more easily communicated. A blue arrow drops from the top bullet point near the vehicle name to also communicate what product line inside the vehicle one is learning about.

Additionally, at the bottom, you can see an opportunity to communicate more specific products.

​I decided to prototype this in HTML/CSS/JS/jQuery and develop this design further.

section 3/4
The Last Design
Refining the Visual Design

With the help of another designer, I reached this latest design. We still use the moving arrow concept at the top to communicate which product line the user is seeing. We also kept the more specific products chunked at the bottom. 

Additionally, we included a summary screen before reaching the screen you see here. And, there is also a more brief summary at the top of the screen.

section 4/4
The Delivered Products
Kiosk Display Designs for the Five Vehicles

I designed the interaction as well as developed the HTML/CSS/JS/jQuery for these final products. As mentioned there were five final products for the five vehicles on display. Here, I show three of them.
Sample Video for Ford Fusion's Kiosk
note: this was a touch-based interaction design
Sample Screen for Ferrari 458 Speciale's Kiosk
Sample Screen for Chevy Silverado's Kiosk
Copyright © 2021