Project Status

The project was successfully completed and handed off to the client for both v1 and v2. There are a number of UI changes suggested to streamline the interactive experience that weren’t incorporated and some that in hindsight I wish to update for a future version. Some changes I wish to make include:

Correcting the function of the breadcrumbs to show where someone is in the interactive experience. Currently, it communicates that the user is always one step behind in the overall experience.

Utilizing the car selection process at the beginning to start the interaction. Each car would be a separate category that when dragged onto the track would start the experience at what is currently the second step. This would allow the interaction to scale up for future iterations to be a lot easier.

Work

About Me

Resume

Work

About Me

Resume

Work

About Me

Resume

Work

About Me

Resume

Work

About Me

Resume

Revisiting the UI

A few months after handing off the final deliverables, the client asked us to make some updates to the UI for the next Congress Pitstop would be on display. This requested change revolved around an update in the information being provided which influenced the number of choice possibilities available to a user. The previous solution for the UI was not designed to accommodate this need, so the team needed to make updates to the Art and overall user experience.

#1: Race car choices influence user journey

The race car choice at the beginning of the interaction was changed so that each represented a different choice. Depending on which car a user picked, there would be a different set of choices to make.

#1: Race car choices influence user journey

The race car choice at the beginning of the interaction was changed so that each represented a different choice. Depending on which car a user picked, there would be a different set of choices to make.

#1: Race car choices influence user journey

The race car choice at the beginning of the interaction was changed so that each represented a different choice. Depending on which car a user picked, there would be a different set of choices to make.

UI updates for v2

#2: UI updated to integrate more choices and fewer steps

The client requested a small update to the experience that involved more choices. The maximum choices a user could make were increased to eight for certain paths. To solve this, tabs were introduced on the final screen and the interaction was reduced to three steps/taps.

#2: UI updated to integrate more choices and fewer steps

The client requested a small update to the experience that involved more choices. The maximum choices a user could make were increased to eight for certain paths. To solve this, tabs were introduced on the final screen and the interaction was reduced to three steps/taps.

#2: UI updated to integrate more choices and fewer steps

The client requested a small update to the experience that involved more choices. The maximum choices a user could make were increased to eight for certain paths. To solve this, tabs were introduced on the final screen and the interaction was reduced to three steps/taps.

Art Layout v2

Environmental Challenges

Environmental Challenges

Challenge #1: Environment

This interactive piece was shown at an in-person conference during COVID. Outside of the normal COVID concerns, finding a way to draw people in and get them to interact was something that needed to be taken into consideration.

Challenge #2: Engagement

At medical conferences, attendees, typically healthcare professionals, seek current insights on diseases, conditions, and drugs amidst numerous vendor offerings. The challenge here was to deliver valuable and enjoyable content succinctly, facilitating quick information retrieval and seamless navigation.

#1) Overlay Window

The proposed orientation for the overlay window was changed to horizontal versus vertical. By doing this, more of the screen real estate is utilized allowing for more interface elements to be used.

#1) Overlay Window

The proposed orientation for the overlay window was changed to horizontal versus vertical. By doing this, more of the screen real estate is utilized allowing for more interface elements to be used.

Wireframe to Layout

#2) Marketing Concept Integration

During team meetings, there was a discussion of highways and exits in relation to the road that the car was traveling down. This was reflected in the wireframe with splitting roads and road signs. This was changed with the increase in fidelity. The lanes were kept and the road was changed to a track to align more with a race track.

#2) Marketing Concept Integration

During team meetings, there was a discussion of highways and exits in relation to the road that the car was traveling down. This was reflected in the wireframe with splitting roads and road signs. This was changed with the increase in fidelity. The lanes were kept and the road was changed to a track to align more with a race track.

#3) Breadcrumbs and ‘Reverse’ Button

Breadcrumbs were introduced along with a ‘Reverse’ button to support it. Due to the number of choices and paths that a user could take, these were added to give more control of the experience to the user and prevent the need to restart the experience to explore different paths.

#3) Breadcrumbs and ‘Reverse’ Button

Breadcrumbs were introduced along with a ‘Reverse’ button to support it. Due to the number of choices and paths that a user could take, these were added to give more control of the experience to the user and prevent the need to restart the experience to explore different paths.

#4) 3D printed Car to Onscreen Car Graphic

The original idea at the start of this project was to have a 3D-printed car be used to start the interaction. A 3D race car would be present at each station and users would place the car at an indicated point on the screen. Due to timing, there was a pivot from this to a drag and drop action that would allow users to pick from four different cars that would be present on the screen in the bottom right corner of the overlay window.

#4) 3D printed Car to Onscreen Car Graphic

The original idea at the start of this project was to have a 3D-printed car be used to start the interaction. A 3D race car would be present at each station and users would place the car at an indicated point on the screen. Due to timing, there was a pivot from this to a drag and drop action that would allow users to pick from four different cars that would be present on the screen in the bottom right corner of the overlay window.

This reflects the different paths available for users to choose from. The levels of interaction refer to how many taps a user would need to get from the start before choosing either mechanism or disease to the final page that displays a more detailed breakdown of information.

Sitemap

Sitemap

Wireframe (Original Concept)

Wireframe

Project Brief

Project Brief

Our client was attending the ADPD medical conference and approached my agency to develop an interactive experience to serve as the centerpiece for the entire booth. The initial idea went through a few changes over the course of the project to align with the timing and resources available.

How might we create an engaging interactive experience that accurately reflects the client’s marketing concept and provides user’s with the information they are looking to receive?

2nd version: Our client requested we update this panel to reflect updates to the information presented in the panel. With it came edits to the UI to accommodate more choices in the user journey and the final panel screen.

Final Design

Final Design

Final Design

Final Design

Final Design

Final Design

Project Overview

Pit Stop is an interactive tabletop experience. Users select a car, place it on a track, and race around to reach the finish line avoiding other cars. By making choices, users move across different lanes to reach the goal receiving a detailed breakdown based on their choices.

Role: UX/UI Designer

Tools: Adobe XD, Zoom

Timeline: 3 months

Pit Stop consisted of 6 screens that connected together to play a attract loop in the back of race cars going around a track. The two end screens housed additional medical information while the four screens in the center served as individual stations for four users.

Equipment Specs

Art Layout v1

Pit Stop consisted of 6 screens that connected together to play a attract loop in the back of race cars going around a track. The two end screens housed additional medical information while the four screens in the center served as individual stations for four users.

Equipment Specs

Art Layout v1

Pit Stop consisted of 6 screens that connected together to play a attract loop in the back of race cars going around a track. The two end screens housed additional medical information while the four screens in the center served as individual stations for four users.

Pit Stop consisted of 6 screens that connected together to play a attract loop in the back of race cars going around a track. The two end screens housed additional medical information while the four screens in the center served as individual stations for four users.

Equipment Specs

Equipment Specs

Art Layout v1

Art Layout v1

Environmental Challenges

Challenge #1: Environment

This interactive piece was shown at an in-person conference during COVID. Outside of the normal COVID concerns, finding a way to draw people in and get them to interact was something that needed to be taken into consideration.

Challenge #2: Engagement

At medical conferences, attendees, typically healthcare professionals, seek current insights on diseases, conditions, and drugs amidst numerous vendor offerings. The challenge here was to deliver valuable and enjoyable content succinctly, facilitating quick information retrieval and seamless navigation.

#1) Overlay Window

The proposed orientation for the overlay window was changed to horizontal versus vertical. By doing this, more of the screen real estate is utilized allowing for more interface elements to be used.

Wireframe to Layout

#2) Marketing Concept Integration

During team meetings, there was a discussion of highways and exits in relation to the road that the car was traveling down. This was reflected in the wireframe with splitting roads and road signs. This was changed with the increase in fidelity. The lanes were kept and the road was changed to a track to align more with a race track.

#3) Breadcrumbs and ‘Reverse’ Button

Breadcrumbs were introduced along with a ‘Reverse’ button to support it. Due to the number of choices and paths that a user could take, these were added to give more control of the experience to the user and prevent the need to restart the experience to explore different paths.

#4) 3D printed Car to Onscreen Car Graphic

The original idea at the start of this project was to have a 3D-printed car be used to start the interaction. A 3D race car would be present at each station and users would place the car at an indicated point on the screen. Due to timing, there was a pivot from this to a drag and drop action that would allow users to pick from four different cars that would be present on the screen in the bottom right corner of the overlay window.

Work

About Me

Resume

Work

About Me

Resume