RJ VILLAFLOR
  • Design Portfolio
  • Resume
  • About me
Picture

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.

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.
Picture

Ideating / Wireframing

"Let's get rid of the bad ideas sooner than later"

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.
Picture
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.
Picture

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.
Picture

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
Picture
Picture
Sample Screen for Chevy Silverado's Kiosk
Picture
Return to Portfolio
Copyright © 2021
  • Design Portfolio
  • Resume
  • About me