Ford 'Save Basket'
FORD Europe
2022
Save your progress by saving your basket - making the user’s check-out journey easier by creating a smooth save experience.
Ford was founded in 1903 by Henry Ford and has been a vital part of the automotive industry since. Ford’s successful efforts to be innovative in the automotive and eCommerce space are well-reflected in experiences such as a fully online buying experience, a 360° vehicle configurator, or an all-in-one chatbot.
There are three ‘save’ journeys I’ve been working on - save a ready-to-buy vehicle from the showroom; save a configuration of a vehicle; save basket = save a vehicle as well as all additional options like payment method, delivery method, etc. All three journeys are designed to make the user’s check-out experience as smooth as possible: by saving their vehicle, configuration or basket, the user can return at any time and pick up where they left off without having to start their journey from scratch. The benefit of saving a basket is that the user wouldn’t have to go through the lengthy process of choosing their financing, adding their trade-in or selecting their extras every time they return to the website. This is all saved for them, ready to buy online.
Role: Lead UX/UI designer
Platform: Responsive web
Timeline: September 2021 - March 2022
Softwares used:
My Role
I lead the design, research and user testing. I’m also responsible for coordinating across teams (e.g. devs, authoring, POs client side) along with the project manager and BA.
The Problem
The current ecom flow on the website sets up the ‘save basket’ journey to fail. Due to unclear layouts and content, as well as a required authentication at a point where the user isn’t ready to commit yet, the legacy designs work against the user rather than for the user.
The flow and content are unclear and therefore users tend to abandon their task and leave the website altogether.
The benefits of saving a basket with all its content are not clearly communicated which is why the users don’t see any value in saving it - not to mention creating an account to do so.
Buying a vehicle is an expensive task that a lot of users aren’t ready to complete in one sitting. Even though the basket allows them to return to their progress when they’re ready (e.g. after consulting with someone else), the confusing design doesn’t communicate this the value to the user - contrary, the user feels pushed into committing before they’re ready.
The Goal
Redesign the layout of the basket, as well as the ‘saved items’ page to make room for content that explains to the users why it’s worth saving their progress.
Work within the constraints to move the authentication to a point in the journey when the user is more likely to be ready to commit and authenticate.
Provide an experience that is more in-line with what users are used to on other eCommerce platforms - use the familiar to create trust.
Create an easier check-out experience that feels safe, easy to understand and valuable to the user.
The Hypothesis
By creating a new layout that clearly explains the value of saving the progress of the basket and by moving the authentication to a later point in the journey, we’re hoping to create more trust in the ‘buy online’ process and the brand, reduce the drop offs and therefore increase online check-outs.
Background
The Process
As we’re working with legacy designs that are not yet released, the process is a little different - when taking the project over, I decided to test it to identify the pain points in what we already have. After user interviews, I did a competitor analysis to see how direct and indirect competitors make use of a ‘basket’ page and came up with three directions we could take the design. We’re currently in the stage of waiting on some more data and briefing the client on another round of testing the wireframes
The 'save basket' journey - through the showroom
The 'save basket' journey - through the configurator
Legacy designs
The save journey is as old as the whole ‘buy online’ experience - the first ideation started in 2020 and since then, the designs have been handed from one designer to another.
Testing
User interviews
By testing the save journey, we’d hope to explore how this could possibly contribute to user confusion with basket and vehicles but also basket abandonment. Users were asked to describe their overall thoughts on ‘Save Basket’ and also whether or not this is something they could possibly see themselves using.
Details
Methodology: User Interviews/ Usability Testing
Participants: 3x users who do not drive but own a license; 3x users who do drive but are not looking for a new car; 3x users who drive and are looking for a new/additional car
Markets: UK only
Device: Desktop (9)
DetailsResearch participants profiles
Research scope & focus areas
Do users see the ‘save’ button?
Do users find ‘save basket’ helpful?
What do users want to save?
When and why would they use the ‘save’ button?
Can users access their ‘saved items’?
Can users retrieve their basket?
Key insights
The ability to go over the price with someone is wanted
Users would like to be able to talk to someone to ask any additional questions they might have
Break down of costs looks thrown together causing frustration to users
User quotes
“I don’t feel ready to commit, I need time to think- purchasing a car is such a huge commitment” – P5
“I want to see a contact number here so I can verify and ask further questions” –P3
“Basket doesn’t seem like the right word, it seems like you’re purchasing already” – P4
Key insights
Confusion and no clear indication as to what is expiring
Users would’ve liked to have been told beforehand that something in their basket can expire
The language used is not welcomed by users, user mention it sounds very negative
Page is described as ‘intense’
Concern that users will need to redo their whole journey
User quotes
“Basket is an ambiguous word, I’d get rid of the negative words it makes it seems as though we’ve done something wrong” - P2
“I don’t really know what’s being expired and it is quite alarming”- P1
“I’m annoyed. How does a basket expire? This hasn’t been mentioned before” – P7
“I would abandon this” - P6
"Why would they do this? Seems like punishment for taking my time in thinking if this is for me or not” – P4
Outcome/insights
Save Basket was said to be only helpful if the user is fully committed to purchasing a Ford vehicle
The users also found the language to be negative and ‘pushy’ (e.g. expiring soon)
Testing also shows that it would be more useful to the users if no commitment was needed e.g. creating an account
The possibility of an expiring basket needs to be better communicated.
Pain points
Users that came from a 5 step configurator were confused why they had additional steps to fill out on the basket page
‘Saved Items’ page causes confusion to all users regarding why and how something can expire
Frustration and annoyance towards ‘expired basket’ due to no clear understanding as to what has expired.
Account creation at this point creates reluctance and subsequent drop off - users felt like they were pushed into committing to purchasing
Competitor analysis
In the research phase, I’ve looked at 16 ecom competitors - both direct and indirect - to identify familiar baskets and save journeys. The main topics to be covered by the analysis were:
How to make it clear what information is saved, when and why?
When in the journey is authentication required?
Efforts to reduce authentication reluctance and site drop-offs.
Reduce the number of calls, emails and chat uses due to confusion.
Improve customer advocacy.
Common themes
None of the direct competitors offers a basket journey - the steps necessary for an online check-out are included in either the vehicle summary page or in the check-out page.
Ecom platforms such as amazon or Argos let the user add a product to an unauthenticated list where they can configure the product, check out or save it for later at which point the user is more prepared to commit by authenticating.
The majority of ecom platforms offer quick glances at a basket at all times with a quick check-out CTA always on show.
Redesign directions
Work with the journey we already have but tweak it by: re-working the basket layout & re-working the ‘saved list’ layout
Use existing pages and skip save basket by implementing the elements from the basket in the summary page and check-out page
Set new journey: summary page - overlay with an additional option the user can choose - offering to check out or view basket - ‘saved items’ page - newest on top - offer to save for later - authentication
Wireframes & iterations
In order to find the best solution, I put together wireframes for the basket page as well as the saved items page addressing the main pain-points from the testing.
Due to the limitations such as stakeholders involved (e.g. finance, legal, etc.) and the importance of cross-market designs, the solutions are still not ideal and would need further testing and adjustment.
Saved Basket Page
V1
Adding a header to the page where we have space to explain what is being saved and why it’s beneficial
Showing the save and share CTAs further up the page indicates the whole page is being saved with all of the options selected
Easy link to ‘View full configuration’ that is not included in the legacy designs
Added steps tracker to indicate to the user that there are still steps to complete before they can potentially check out
Link to the saved baskets at the bottom of the page which is hidden in the legacy designs
As per the users’ request, link to contact added at the bottom of the page in case they have further questions
V2
Adding a header to the page where we have space to explain what is being saved and why it’s beneficial
All quick actions are included in a sticky bar above the fold with price overview, check-out, save and share
The breakdown was redesigned into a table with tabs for easy navigation in an effort to make the page more compact (no drop-downs) and easy to navigate
Added steps tracker to indicate to the user that there are still steps to complete before they can potentially check out
Link to the saved baskets at the bottom of the page which is hidden in the legacy designs
As per the users’ request, link to contact added at the bottom of the page in case they have further questions
V3
Adding a header to the page where we have space to explain what is being saved and why it’s beneficial
Sidebar with a summary of the basket and all quick actions such as check-out, save, share, link to saved items and contact
The breakdown was redesigned into tabs for easy navigation in an effort to make the page more compact (no drop-downs) and easy to navigate
Added steps tracker to indicate to the user that there are still steps to complete before they can potentially check out
Link to the saved baskets at the bottom of the page which is hidden in the legacy designs
As per the users’ request, link to contact added at the bottom of the page in case they have further questions
Saved Items Page
V1
Instead of pushing the user to save their basket right away, we could let them add their basket to a list first
The latest added item is saved within the session with no authentication needed - the user could browse the site, call someone and still return to check out without losing progress
Adding a header to the page where we have space to explain what is being saved and why it’s beneficial
The user can decide to save their basket for later at which point they might be less reluctant to authenticate as it’s their choice to keep the progress
Added functionality to compare multiple baskets/vehicles before committing to save one or the other
User sees they need to authenticate to access their saved items
V2
Quick overview of each basket as an overlay
The user is presented with drop-downs where they can adjust their options before check out without having to return to the basket - great for quick adjustments such as delivery method or payment method
V3
Adding a header to the page where we have space to explain what is being saved and why it’s beneficial
Further breakdown of saved items and saved baskets
By separating e.g. saved baskets into further sections, we have additional space to explain what each means - this could help the user understand what is expiring and why
Instead of disabling the basket completely once expired, the user is presented with a CTA to refresh the basket and revisit their previously chosen options
The latest added item is saved within the session with no authentication needed - the user could browse the site, call someone and still return to check out without losing progress
The user can decide to save their basket for later at which point they might be less reluctant to authenticate as it’s their choice to keep the progress
Added functionality to compare multiple baskets/vehicles before committing to save one or the other
Limitations & considerations
Due to the size of the company and the website, adjusting the journey is virtually impossible. Therefore the only way to improve the user experience is by utilising existing designs and tweaking where possible.
Ford’s design system is owned by a team in North America (the FDS team) and the design system in place is very rigid. The UI is constrained by the FDS and a thorough redesign is currently not possible.
Due to the ‘buy online’ journey being relatively new (since 2020), the development of the product is very slow - because of this, any innovations and bigger redesigns are either not approved by the product owners or are in the backlog.
Ford UK creates the mothersite for the rest of EMEA to implement - due to this, different laws and regulations in different countries require us to adapt the designs to all of these limitations so that we can keep the design as consistent across the markets as possible.
Future roadmap & next steps
Next month, the MVP design of the ‘save vehicle’ and ‘save configuration’ will be released - we will be testing these journeys on a live site. The markets will monitor the traffic to the saved list and the use of the 'save' functionality, as well as abandoned configurations and check-outs.
Once we learn more about the users’ preferences when it comes to saving items on an automotive website (which is a very different journey to saving a product on other eCommerce platforms), we can implement behaviours to the save basket journey and see if we can improve the whole experience - e.g. moving the authentication to a later point in the journey.