RÚCKER LYPSA: INFOTAIMENT

The Cupra Experience project is born as a proposal from the HMI department at SEAT aiming to create a simulator that would allow users to know the features of the new Cupra León 2020 and its Web App system.

Client: SEAT - Cupra Brand | Sector: Automotive

My Role: Project Manager & UX Designer.

Deadline: Two months.

Team: SEAT Engineering Team, SEAT Digital Lab developers, SEAT HMI Design Department.

CHALLENGE

To design a user experience and interface that:

• Allows the user to interact with the Web App of the Cupra León R Sportrouter ST in a simulation environment.
• Impress the Directive in order to get approval for the budget needed to develop the actual Web App.

SOLUTION

The project and interface allows the user to virtually drive the Cupra León through the Nürburgring circuit, interacting with the Cupra brand. Therefore, I designed this interface based on the Cupra's visual identity look&feel, as well as an integration to the MIB3 screen design from the León cars.

Cupra's Branding & Visual Identity

Concept:

LIVE THE CUPRA EXPERIENCE

Once we had these user’s defined, we explored different possibilities applying a concept wall approach, where we brainstormed about the best solutions to show each user’s specific needs and ultimately, how the UI of the car will help them to achieve their daily goals. We did basic wireframing and built a basic MVP (minimum viable product), from which we were able to build an interactive Sketch prototype and later on a full UI design. Within my specific role in the project, I was in charge of wireframing (by hand and Sketch), as well as building the Sketch prototype.

VISUAL BENCHMARKING

My project starts with a thorough research in order to create a visual benchmarking of graphic elements that constitute the visual universe of Cupra:

• Copper & Carbon Fiber textures
• Speed
• Digital and Tech environment
• Simplicity
• Functionality

RESEARCH

Research is divided into four phases: map, explore, build and test.

1. Map: From the definition of the project's scope and its goals, I begin by establishing its limitations analyzing how to enhance the user's interest through the experience and brand's values. The idea is to find a way to create a desire for the exclusive car app's interface.
2. Explore: In this phase, I gathered information in order to learn and define how the visual identity of the Cupra brand could be translated into the digital environment of the Web App. I studied the look and feel and the graphic universe of Cupra and synthesize a visual atmosphere for the materialization of the first prototype.
3. Build: In my role as Project Manager I was in charge of defining the elements of the digital product. Along with the developers' team, we build a prototype that allowed us to evaluate the idea and its functionalities. We visualize and assessed all the tools from the prototype and made sure to have a working prototype.
4. Test: After building the prototype we embarked on using the simulator in an iterative way, so we could identify errors and fix them in a timely fashion. We were on a very tight schedule... Thanks to tram work, we were able to get a final digital product with a properly tested behavior and performance.

To live the experience of virtually driving a Cupra on a professional circuit was the perfect alignment of the brand's values to a real context. Through gamification, we managed to offer an experience in which our users can get closer to the product and engage with the brand on a digital environment.

THE PROCESS WE FOLLOWED WAS

1. Design of sitemap and user flow (navigation and interaction).
2. Lo-Fi wireframes.
3. Evaluation of wireframes and navigation test.
4. Medium-Fi wireframes
5. Evaluation of functionalities.
6. Hi-Fi wireframes.
7. Again, evaluations of functionalities and each individual context.
8. Prototype creation.
9. Live product testing.

INTERACTION FLOW

The visual interface is created from the visual identity elements, as well as the use of aesthetic and functional references associated with conceptual and emotional values.

Copper texture and colour, carbon fiber, simplicity and elegance are some of the most important elements on this identity. They were key factors we used to design and merge the new interface to the existing car radio infotainment system.

Doing it this way we managed to create a Cupra interface that allows the user to identify when the Cupra Web App is being used.

The experience consists on driving a Cupra on a professional circuit, to actually feel the power of the car, and to finish the race in fastest possible time.

It is a live competition between users that, regardless of knowing a Cupra beforehand, can navigate, observe and interact with the Web App data in real time. From beginning to end, the user is identified and his name and timing will appear on a 180º screen around him. This is when the experience begins.

Render of the Simulation Setup: 180º screen around the car.

VISUAL ELEMENTS

UI Styleguide - Buttons, Colours, Components, Icons, Lists, etc.

Software: Sketch

Coordinating the project from the HMI department meant that I needed to work in parallel the four phases of the design project, integrating into the research different designers from the Engineering Team and developers form the Digital Lab.

With a very tight deadline we defined a group dynamic focused on the daily revision of production, ideas, wireframes, design, prototype, development and testing.

This method allowed us to evaluate every advance and to define each concept and functionality of the Web App on a fast and safe fashion.

CONTEXTS

MONITOR / SCREEN

POSITION

CIRCUITS

TRIPS

SETTINGS

START COMPETITION

CAR SELECTION

As mentioned before, an important part of the project was to apply a coherent look and feel, engaging the user with the Cupra Brand:

• Wireframes.
• Look and Feel.
• Colour Palette.
• Icons and Textures (Carbon Fiber as the main texture).
• Buttons and Interactions.
• Information Architecture.
• Context and Circuits.
• Maps and Graphics.
• Interaction.
• Backgrounds.

My role as Project Manager, coordinator and Designer on this project was to me just another proof that teamwork and good communication are the angular stones of a design process.

Understanding that a multidisciplinary team's effectiveness relays on the ability to give and receive feedback, as well as acknowledgement of each discipline's role on the project, is paramount to achieve a successful design.

Empathy on the project management.

Adherence to the very strict deadline.
Collaboration with other departments.
Fostering good relationships among team members.

We achieved the project's main goal:

Approval of budget by offering an experience that communicates the brand's values and engages with potential users.

The success of the project was such that the simulation has been shown in different events, congresses, etc. both internal (SEAT) and external as PR actions

Hello,

Want to know more?.

Want to talk about your next project?. 

I will be glad to hear from you.

Thanks.

Say hello.

Barcelona, Spain

+34608525986

jhonatanmedina@caguana.com

Linkedin

Instagram

500px

Twitter

Shop

© 2016 Jhonatan Medina Caguana. All right reserved.