Research | Banding | Web & Mobile UI
Online Store For Automotive Parts
B2C e-commerce overhaul of one of the largest automotive companies for improved product find-ability.
Timeline
February 22 - June 2023
Industry
Heavy equipment & automotive
Tools
Figma, Illustrator & Photoshop
My Role
Research, Visual Design
Objective
In the May of 2022, the team was approached to revamp the e-commerce website.
$60M by 2024 in e-commerce revenue
Increase customer acquisition and retention
About the brand
A Fortune 500 engine manufacturing company powering thousands of vehicles and machinery over the past 100+ years.
Their e-commerce platform which sells equipment parts was launched in 2021 during the pandemic to reach customers through online channels.
Let’s understand why they needed a revamp.
Problem Statement
♟️ Our 2-step strategy
Our strategy was to have two approaches to create early impact instead of directly jumping into a revamp.
✴ Short-term approach
In the short term approach, we set small goals, chose relevant research methods to identify and implement quick fixes.
Our short term approach led to quick wins with emphatic numbers.
3x
Increase in Cyber Monday revenues
2x
Increase in overall revenues
2x
Increase in new sign-ups
🚩 How did we achieve this?
Using Google Analytics, we studied customer drop-off points and conducted competitor research and heuristic evaluation to pinpoint specific areas.
👥 User personas
We created 3 personas from the data we collected through research. They were based on the customers’ automobile related knowledge and purchasing patterns – Novice Pat, DIYer Greg and Expert Dan.
🕵️ Unpacking CRO research findings
We conducted a Conversion Rate Optimisation (CRO) exercise to synthesise the research findings. It was further developed for identifying customer behaviour patterns. We did a literature review and referred to sources like Baymard, Barilliance and NNgroup.
It helped us justify our recommendations based on qualitative and quantitative metrics.
We recommended methods to track customer behaviour patterns and define opportunity areas for design interventions. We found out that most drop offs happened on PDP, Cart and Search.
Design recommendations
Pinpointed for every module
Priority mapping
Opportunity Areas
Integrate Personalization
Create engaging content
Improve backend data sets
Methods to track customer behaviour
A/B Testing
Heat-mapping
Feedback collection
🎨 Visual design audit findings and outcome
We analysed the website and the brand to identify visual design inconsistencies and improve areas of concern. By examining colour schemes, typography, layout, and user interface, we pinpointed specific areas lacking consistency. We provided comprehensive recommendations, including creating accent colours, a dynamic text hierarchy, utilising consistent white spacing, standardised icon set and ui pattern library.
Through the findings we successfully developed a new cohesive and consistent style guide that encompassed all the essential elements that were missing and served as a valuable resource for maintaining a unified visual identity across the entire brand, ensuring a seamless and engaging user experience on the e-commerce site.
Visual Design Audit
Style Guide
🪄 Examples of quick fixes
Cart features for the price motivated customer
Some of the recommendations that we implemented in cart were:
Adding promo code and military discount in cart rather than checkout
Gave more prominence to free shipping for the price sensitive customers
Search features for finding the right part
We found that cart and search needed prior attention.
We made a few incremental changes in these pages and implemented them for a release.
⭐ Accomplishments: Impact of Go Live - October 2022
We had our first Go live in October 2022. Here's the impact:
We kept the revenues coming and increased them.
Built trust with the client by showing results early on.
A number of small changes done in retrofit led to 3X (Cyber Monday) and 2X (overall) revenue increase
Long Term Approach
Looking at this impact, we were ready for revamp in November 2022.
🎯 Revamp goals
This time, the mandate was to also align visually to the global brand website, migrate from Salesforce Classic to Lightning platform and integrate personalisation.
Around this time, The client partnered with Coveo, a personalisation platform. We did a two-day workshop with folks from Coveo to understand their different models. It gave us ample time to experiment with the different models and get the system ready to learn behaviours before revamp implementation.
🔎 Revamp discovery
We took findings from short term approach that fed heavily into the revamp, research methods and studied tech feasibility to refine problem statements, form design principles and narrow down on features.
📝 Quantitative survey for customer care executives
Customer care executives were a trustworthy source to provide answers to customer behaviours, assistance they expect and query resolution.
💡 Cross-studio ideation
We conducted a cross-studio ideation session with designers and gave them a one line brief for findibility - how will a customer find compatible parts?
7
Participants
30
Ideas
👨💻 Workshop with the tech partners
We did a workshop with our tech team to understand the possibilities and limitations of Salesforce Lightning.
We created a document to map OOTB vs custom features. It helped us negotiate custom solutions wherever needed. Collaborating through a single document helped align design, tech and business teams throughout the lifecycle of the project.
⛳ Goal-setting exercise and feature prioritisation
To set guard rails, we took the findings of the CRO exercise and the cross-studio ideation session to do goal-setting and feature prioritisation with the business stakeholders.
🔺 Refined problem statements and opportunities
✏️ Design phase: Our design principles
Design principles revolved around achieving an optimum experience leading to increased conversions
Find-ability features across the experience
We identified key places where finding a product can be made a cake walk.
Don’t browse, simply Search.
Customer care survey indicated that most customers know what they want and need it urgently.
So we made search prominent by having it in the hero banner. Also made it easier to find and buy products directly from search in just two steps.
All your equipment needs under one roof.
My Garage is an extension of an existing concept that most customers are familiar with - Wishlist.
We tweaked it for saving equipment and finding their compatible parts. This was an avenue to recommend hyper-targeted products to customers.
Taxonomy made less taxing
Study revealed that customers could only shop by brand. Customers who were not well-versed with brands, struggled to find products.
So we facilitated a taxonomy exercise for the client to enable shop by category.
We created hybrid CLP + PLP pages. It provided quick access to products and exposed the customer to the next level of categories.
Find the perfect match, always.
Competitor analysis highlighted that novice customers like Pat get confused due to similar looking parts.
To mitigate this, we introduced a Compatibility checker. It helped Pat feel confident about buying a compatible part.
Personalization use cases
Leveraged the partnership between Cummins and Coveo platform to integrate personalization. Identified places to craft 1:1 shopping experiences throughout the experience by studying Coveo models.
My homepage knows me
The goal was to engage different types of customers at every stage.
We designed a configurable homepage for the guest, repeat guest and signed in customer.
Guest user homepage
Repeat guest user homepage
Signed in user homepage
Little bundles of joy
The goal was to show complementary products to customers that are compatible with the ones they're purchasing.
We leveraged Coveo models like Frequently bought together, Customers also viewed, Recommended for you on PDP and Cart pages.
Legacy speaks a 1000 words
The goal was to bank on the legacy and expertise of Cummins for content creation.
We built Knowledge Hub as a one stop shop for anything related to diagnostics, repairs and maintenance.
We took an incremental approach. The larger vision is to build a community around knowledge sharing and rewards.
Visual communication interventions
We sought opportunities to improve the experience by communicating through visuals.
Mood-board & Style tiles
We put together mood-board & style tiles by taking inspiration from the global website. The current Classic website lacked the visual legacy of the brand. This new website needed to look like a derivative of the global website to establish trust and credibility.
The current site looked like a cheap knock off. Customers doubted its credibility.
So we revamped the look to match the parent global site.
Small features, big impact
The current site did not offer anything apart from selling products. Customers didn’t have any reason to engage.
So we introduced two new features - Knowledge Hub and My Garage and gave them a distinct look.
These features increased customer convenience without aiming to sell.
Keep It Simple Silly
Earlier, the communication was complex. It made the customer feel stuck and they abandoned the journey.
So, we provided a jargon-free tone of voice and gave the sentence a structure of context, effect and CTA.
The customer felt supported to move ahead in the journey.
More shopping for free shipping
In Classic, the system did not tell customers what to do to get free shipping in case they were ineligible.
We included a cross-sell link in the free shipping section that enabled customers to add recommended products to get the benefit.
Save time and increase efficiency
Reusable components save dev effort and let customers complete new tasks without making them learn a new way every time.
So we identified places where we could reuse and scale components.
Examples:
Sticky component on PDP, cart, checkout
Menu component in desktop and mobile
Product cards across different Categories, Orders, Cart, Checkout
Design System for Seamless Brand Cohesion
We crafted the Design System with the aim to bring consistency and continuity across the website while reflecting the overall visual design language of the parent brand. Clients and customers both found that the current website felt like a knock off brand which impacted the credibility and trust.
Having a Design System also allowed us to produce screens much faster and streamlined the delivery.
Transforming Ideas into Intuitive Wireframes
We designed the hi-fi wireframes with meticulous attention to detail and pixel-perfect execution. By incorporating advance prototyping and creating individual flows for each unique scenarios we enabled stakeholders to fully visualize the website's layout, content and interaction.