‍

I joined the Ford Design Project in November 2020 following the completion of UR findings by the UX Lead. The team had been tasked with designing templates needed for a bespoke Shopify migration for the US Ford Store. My role was to design multiple templates for the store.

‍

The Process

‍

Defining the problem

At the start of the project, the current Ford store proved difficult to use, creating a complex and dull customer journey. Our job involved creating a simpler experience for users that allowed them to navigate the vast product catalogue, in order to find and buy the desired part or accessory.

How can we create an impactful and simple experience for a vast range of customer journeys and behaviours?

After receiving the renewed Information Architecture, we had a solid foundation to understand the sheer depth of the project.

‍

What are the goals?

As a team we decided that the main goal was to ensure the purchase path accounted for the most important scenarios and consumer journeys.

The 2 main purchase paths on the site were for Accessories or Parts. Within those paths, customers fell into 3 categories:

• Authenticated.
• UnAuthenticated.
• UnAuthenticated with Cookies.

‍

In the scenario that a customer is Authenticated, they have logged in and have stored Car Details (VIN or Model info) within the site's virtual garage. An UnAuth user has not entered any car model details or signed into an account and an UnAuth cookied customer has only entered Car Details into the virtual garage. Creating experiences around the scenarios were pivotal as a large proportion of products required specific Car Model Details when ordering, to ensure that it would work for the intended car.

‍

The scenarios also aligned with business goals, as we wanted to reduce the number of returns and negative purchase experiences due to misinformation regarding Model details. As we were working on a large part of the Ford Company experience, we needed to utilise and follow the Ford Design System (FDS) to create our wireframes and full designs. We did this in order to ensure that users had a unified journey across the whole brand. Below I describe the process and solution of the templates I worked on the most.

The Solution

‍

Homepage

As with many e-commerce experiences, we focused on making the path to the product page as simple as possible. The homepage balances the VIN/ Model Type Modal with product category up-sells and reviews for social proof. The homepage now feels more usable, sparks interest and is a lot clearer in displaying key messages and helping the customer to navigate the site.

‍

Homepage States

It was important for me to think about business scaleability and the future of the site when designing for the Homepage states. By building templates that factor in most scenarios, we are providing the building blocks that customers can use in the way that suits the business. An example of this is creating different homepage templates to reflect the 3 scenarios explained above. Customers on each journey have tailored landing pages that help them along the purchase journey.

‍

‍

In order to create a trusting and accessible journey, we ensured that we applied the best UX practices for e-commerce sites. One example is to ensure that users are kept informed of progress when completing a task. When a user is completing a task and has no further information about what is happening, they may develop a negative association with Ford and are more likely to leave or be less trusting (leading to less conversions). To account for this, we iterated between different ways to clearly communicate with the user when using the main VIN / Car Model feature.

‍

Search

Search and navigation are vital to enhancing the customers journey through the site, so extra care was needed to design for this in order to create a frictionless and usable experience; after all, ‍you can’t sell a product that your customers can’t find.

Search autocomplete suggestions assist and guide customers to better search queries, while giving the customer room to exercise autonomy on where to go next.

When a user searches a site, they are most likely aware of the product they are looking for, so by including the product grid customers can go directly to the product page.

‍

‍

Account

The biggest set of templates that I was responsible for is the account region - this region is where customers come to accomplish tasks. It's very rare to find a user wander to the account region spontaneously, as users who come to the account region usually do so with a specific task in mind. With that in mind, my question for this region then became:

‍

How do we help users achieve tasks within the account region?

‍

The 4 main sections for this region are the Dashboard, Account Settings, My Garage and Order History. As some key functionality of the account are was to be handled externally by the Ford Company, I had to design the rest of the Shopify Plus Managed regions. The first step in solving the HMWE question was to create high-fidelity wireframes of possible solutions to allow for quicker feedback from the stakeholders involved in this project. Following the successful round of wireframe iterations I went on to build the full designs.

When designing the dashboard, specific focus was placed onto helping customers navigate to the area they are looking for. Users should be able to easily find out where key tasks are located and even complete some within the dashboard.

The My Garage area is where users can set which vehicle is used for their tailored site experience. For example if a user sets the default vehicle as a Bronco 2020 in the My Garage, products shown on the site are ones that can be utilised with that model. Therefore when designing this section, focus had to be placed on messaging and helping the user understand how the garage area works and the impact it has on the purchase journey. The order history and account settings regions were designed to follow the best e-commerce UX principles.

‍

‍

‍

‍

Quick Buy

I was also responsible for designing the Quick Buy experience for collection pages on the site. It was important to design the feature as a quick overview rather than mimicking the product page, as we didn't want to mislead users into thinking that it was the product page, or to redirect them away from the product page. In order to design the best Quick Buy I made sure to:

• include payment links for the product page in case the user needed a more detailed explanation of the product.
• keep the overlay in one viewport so users can still see the collection page.
• included a clear exit CTA to take them back to the collection.

‍

‍

Mobile

With a predicted 72.9% of all e-commerce sales to be made on mobile, ensuring that the mobile experience is the same standard as desktop is as important as ever. In order to translate the improved desktop experience to mobile we made sure to review and alter the desktop designs to make a frictionless experience on mobile.

The following images show the final mobile screens.

Other pages

Aside from the design tasks above, I was accountable for numerous other aspects of the project; notably, the FAQ, Standard Content Template and 404 page. Within the design process for all the templates mentioned above, I strived to follow the key e-commerce UX principles;

• Ensuring the site remains usable for all users.
• Ensuring accessibility guidelines are followed so no user is alienated.
• Information is communicated clearly so trust with the user can be built.
• Keeping the purchase journey in mind so users can easily interact, find and buy a product.
• Ensuring designs follow the Companies brand and design guidelines to increase desirability.

Reflection

Even as this product is yet to launch, I feel a great sense of pride for what I and my team were able to achieve in such a short amount of time. Especially with such big stakeholders, I feel content knowing that we were able to push through and champion the needs of the user where necessary.

‍

I am incredibly grateful to my team for all that I was able to learn from them during the entire project and I will certainly be putting my learning to use as I go forward in my career.

‍

Learnings

Design Systems make the world a better place -

I was very fortunate to be able to use the FDS during the project and by taking the time to understand and go through the intricacies of the system, I developed a deeper understanding of how beneficial the design system is from end to end development.

‍

The key to stakeholder management -

4 words: share early and often. With such a big project stakeholder, management was required both internally and externally. I found that sharing work daily and keeping communication as clear as possible helped to make the entire design process a lot smoother.

‍

Adopt an agile mindset -

Things change - a lot. By keeping an agile mindset, it is less painful when a design I've worked on doesn't make the cut as I am able to focus on the bigger picture.

‍