In November 2019, Ford unveiled its first all-electric vehicle, the Mustang Mach-E, and sought to establish an online platform for customers to reserve their vehicles. This initiative marked a significant shift for Ford as it transitioned towards a global e-commerce model, fundamentally changing how customers would interact with the brand and purchase vehicles in the future.
The primary goal was to develop a comprehensive online purchasing journey that would enable customers to personalize and pre-order their ideal Mustang Mach-E from the convenience of their homes. This platform needed to be adaptable for future growth and empower customers throughout their purchase process by offering straightforward access to product details, multimedia content, and relevant data through a user-friendly interface.
As the Senior UX and UI designer for this project, I collaborated closely with numerous designers and business analysts from both European and North American teams to create the complete pre-order experience.
Commercial Vehicles: Interactive tools allowed businesses to virtually match their needs with the perfect Ford vehicle.
Mustang Mach-E: An immersive experience brought the Mach-E's innovative features and exhilarating performance to life.
Ford Owners: Interactive guides empowered existing Ford owners, fostering brand loyalty and strengthening the customer relationship.
The initial challenge
Ford's existing infrastructure was not originally designed to function as a customer-centric, digital retailer.
The initial research phase involved multiple stages focused on analyzing Ford's existing third-party online sales platform and developing customer profiles. Techniques like empathy mapping and clustering were employed to translate existing data from market research and user testing into actionable insights. Alongside this, continuous benchmarking of successful e-commerce websites, particularly those with similar offerings to Ford, provided inspiration and identified effective user experience patterns.
Limited Support: The online journey lacked sufficient supporting content, such as tailored search options and model comparisons. This hindered users' understanding of the product range and led to frustration when they couldn't find the information they needed.
Fragmented Customer Experience: Customers who navigated from product discovery to the online purchasing process felt disconnected, as if they were being redirected to a separate website. The inconsistency in visual design and poor navigation created uncertainty and confusion.
Subpar Mobile Experience: Many users found the mobile experience unintuitive due to its non-linear structure. While the convenience of using their phones for purchases was appreciated, configuring the vehicle proved challenging, with key actions often missed or causing confusion.
Initial Concepts
Lifestyle-based "Help Me Choose" tool
Budget-driven search leading to a virtual showroom
Comprehensive product pages
These initial concepts were developed into tangible prototypes for user testing. The early feedback focused on facilitating product discovery, aiming to provide users with clear and engaging starting points for the purchase process. While some concerns were raised, particularly regarding the product page and inventory display, the immediate priority shifted to developing the reservation journey for its launch in late 2019.
Overcoming Key Obstacles
Integrating Configurator and Inventory: A core requirement was the inclusion of a live inventory feature, allowing the sale of both new and existing vehicles. Despite numerous iterations, users initially struggled to understand the purpose and functionality of this feature. An early concept involved a split screen displaying both the configurator and the live inventory, aiming to cater to different customer preferences. However, after extensive internal focus on this single-screen format, a decision was made to separate the two experiences. This resulted in a more focused and linear journey, where users could customize their vehicle without the immediate consideration of available stock. The inventory display itself underwent significant refinement based on user feedback and business needs, eventually achieving a clear and appealing layout.
Establishing Design Direction: The Mach-E reservation journey was intended to be the first implementation of Ford's new 3.0 design system. However, at the start of the UI development phase, the availability of design components was limited, making it challenging to visualize the user experience. To address this, I took the initiative to develop a temporary UI library. This indicative library bridged the gap until the official design system was released and facilitated discussions around design practices. It also served as the foundation for the European component library, which is now utilized across various projects.
Aligning with User Expectations: Ensuring a clear and intuitive journey that instilled confidence in users was crucial for successful pre-orders. Multiple rounds of user testing highlighted areas for improvement. Affordability emerged as a key consideration for users, even though final pricing wasn't available at launch. To address this, I proposed displaying indicative pricing throughout the journey, replacing the initial deposit price with clear breakdowns. This critical adjustment was well-received and implemented. The configuration summary, intended for users to review their selections, initially lacked clear functionality. Improvements were made to provide a digestible overview of the vehicle specifications and pricing, along with access to payment options. The inability to test drive the vehicle before reservation was a common concern. While a fully immersive experience couldn't be provided due to content limitations, interactive 360-degree images were implemented as the best available alternative. Further exploration into WebGL technology was planned for a more immersive experience in the future.
The Result
The new online pre-order experience for the Mustang Mach-E achieved significant success:
A 30% increase in configuration completions.
5,700 pre-orders within the first 48 hours.
A successful global launch in six European markets and North America.
This initial phase of Ford's online sales platform introduced a completely redesigned configurator, which was slated for adoption across all Ford vehicles by 2022, followed by the integration of a reservation flow and order management features.
Key Features of the Solution
Personalized Customization: The customization phase offered users numerous options to explore sequentially or independently, with clear visibility of the estimated cost and a detailed breakdown. High-quality rendered images of the exterior and a full 360-degree view of the interior were provided.
Guided Decision Making: Key data points and feature highlights were incorporated to facilitate easy comparison, while mandatory initial steps in the configurator aimed to simplify the process and minimize potential conflicts later on. This approach was designed to be scalable for Ford's entire vehicle range.
Comprehensive Information: Before proceeding to the purchase stage, users could review their customized Mach-E, including indicative pricing and key specifications. Detailed information on dimensions, infotainment, and maintenance was included to address any remaining uncertainties.
Personalized Interaction: The first step in the purchase process involved selecting a preferred dealership. Clear explanations were provided to guide users through this requirement specific to the European market. Consistent visual design from the previous steps aimed to build user confidence and create a seamless experience.
Streamlined Checkout: The final steps involved providing personal details and paying a deposit. Familiar components like a basket summary were included to instill a sense of security and confidence. Upon confirmation, key information and next steps were clearly displayed.
Order Tracking: Users could monitor their pre-order status through Ford's secure online dashboard, accessible via the new "Your Orders" section. Key details about the order and the vehicle, along with tracking updates, were readily available.
