Ford Vehicle Configurator

UX/UI

With the Ford Configurator Web and Mobile app, users can build, design, and share their dream vehicle with ease and best-in class 3D visualization. It’s powerful yet easy, engaging yet minimal. Most of all, it puts users in the driver’s seat, ensuring that they always feel in control and empowered to buy the vehicle they want.

Design Role: UX/UI, UX Research, Visual Design, Animation, Development, Unreal Implementation

Deliverables: User Research, Feature Planning, Competitive Analysis, Wireframes, Prototyping 

Software: Adobe XD, Unreal Engine, VRED, MAYA, Adobe CS

Challenge:

At Ford, I was tasked to create an Unreal Engine based app that would improve design reviews. I took this one step further and reimagined what the client facing version would look like. Most configurators are slow and tedious, taking away the initial interest quickly. Pair that up with a confusing, over stuffed UI and the drop-off ratio increases with unresolved decisions between options. My goal was to look at this problem from the user’s perspective and find ways to inspire the user to explore the product, driving business success.

Goal: 

Create an interactive digital vehicle configurator that pushes the boundary on interactivity, improves ease of use and drives user engagement.

  • Help user configure an existing product to match needs
  • Drive engagement with “improved visualization” compared to competition
  • Gain trust with accessible interface and support users interest/ support business goals

Solution: Redesign and improve existing Ford Web and Mobile configurator with research-driven design decisions.

Competitive Analysis & Research:

Before conducting competitive analysis, I needed to find out what the limitations and challenges were with the current configurator on Ford’s website. Here are a couple things I noted.

  • Vertical challenge, too much side menu info to dissect
  • Don’t like image based carousel, slow, not easy to visualize vehicle
  • Too much scrolling, and price is hard to access

After looking into the current implementation on Ford’s Website, I looked at top competitor’s configurators to find out what works well for users and what still needed improvement. I performed usability testing to discover what design patterns and user flows created an engaging, simple experience.

For example, Tesla has a nice, clean interface that feels very linear. This linear user journey helps direct the user towards the end goal of purchasing the vehicle. I incorporated this same linear journey into my user flow.

“I want the user to share, explore and purchase a vehicle through this app.”

Wireframes:

 After a few rough sketches, I created mid-fi wireframes that defined UI elements, design patterns and visual hierarchy. A couple challenges I encountered was including the side control bar in a clean fashion. This control bar is essential as it includes 360 and stationary camera angles for the user around the vehicle. Additionally, despite the linear user journey I wanted the user to be able to go back to any section at any time. Thus, the inclusion of the top and bottom nav bars. 

Visual Design:

After finalizing the information architecture and visual layout, I moved into creating a style guide that incorporated a clean, modern approach while keeping the accent blue as a pop of color. My aim was a clean, modern interface that focused on ease of use.

  • Interface that provides guidance & support in decision making
  • Reduce complexity/ scope of options
  • Users expect some form of “play” or gamification
  • Reduce friction between navigation & customization
  • Make price summary easy to access
  • Visual feedback confirming request change
  • Responsive UI that stays out of the way