Sara Darian - Digital Strategy & Innovation

Project In A Nutshell

This is a strategic web design proposal to enhance online presence and increase conversions!

Research

Heuristic Evaluation

Layout

Information Architecture

Personalization

Research

Heuristic Evaluation

Layout

Information Architecture

Personalization

My Role

Solo Designer and Project Lead

Team

Sales Representatives, Customer Service, Order Desk, and IT teams

Deliverables

Strategic Plan, Design Roadmap, User Journey Map and Wireframes

Duration

3 Months

INTRODUCTION

My Journey To Rebrand & Redesign The Website!

A strong online presence plays a crucial role in the credibility and success of businesses today. In my current role, when I started managing the website and helping clients with web order issues, I noticed the following issues, which led me to dig deeper and propose a redesign and rebrand of the website:

An inconsistent look and feel across the site
Lack of a user-centric and minimal website with a good information architecture that facilitates easy navigation and finding items faster
Numerous bugs and functional problems
Customers' dissatisfaction and complaints regarding the order processing and account management options

LET'S GET TO KNOW THE BUSINESS FIRST!

A Trusted Business Serving Customers Coast-To-Coast In Canada!

A wholesale company (B2B e-commerce) selling automotive, industrial, hardware, security, and sporting goods.

1964

Since

Warehouses

Divisions

2,500+

Products

2,000+

Customers

PROBLEM BREAKDOWN - CAUSES & EFFECTS

How Can I Come Up With A Consistent, High-Performance Web Design That Is Easy To Navigate, Customizable And Tailored To Users' Needs?

I identified 4 major problems and their effects on users and the business.

Problem 1

Inconsistent Design

Leads to user confusion and a disjointed experience.

Problem 2

Difficult Navigation

Leads to a higher abandonment rate and brand damage.

Problem 3

Lack Of Personalization

Leads to less engagement and raises concerns about loyalty, retention and user satisfaction.

Problem 4

Poor Performance

Leads to lower traffic, fewer leads and fewer conversions.

GOALS

Enhance Online Presence To Increase Credibility, Attract New Buyers And Create A Smooth User Journey Path For A Better User Experience!

I took a look at our customer acquisition path to see how design could support it and come up with more strategic solutions. So, these goals will help the business grow and make users happy.

Redesign the website to enhance online presence and credibility to acquire new customers.
Design a straightforward and smooth user journey path to decrease the website abandonment rate.

SUCCESS METRICS

We Estimate An Average Increase In Traffic By 70%, Lead Generation By 50% And Conversion By 20%!

Then I thought about how I could measure these goals and show the impact.

Traffic, Engagement & Conversion

Expect increase in:

Website traffic by 70%
Lead generation by at least 50%
Conversion by 20%

Expect increase in:

Website traffic by 70%
Lead generation by at least 50%
Conversion by 20%

Expect increase in:

Website traffic by 70%
Lead generation by at least 50%
Conversion by 20%

Average Order Value

Expect increase in:

Average order value

Expect increase in:

Average order value

Expect increase in:

Average order value

Time Spent On The Landing Page

Expect increase in:

At least 50% more time spent on the new landing page vs the old one by making it engaging

Expect increase in:

At least 50% more time spent on the new landing page vs the old one by making it engaging

Expect increase in:

At least 50% more time spent on the new landing page vs the old one by making it engaging

Customer Satisfaction Score

Expect increase in:

User satisfaction with the new design and features

Expect increase in:

User satisfaction with the new design and features

Expect increase in:

User satisfaction with the new design and features

QUICK OVERVIEW OF THE RESULT

Let's Take A Look At The Old Vs New Versions!

To get an overall view of changes, the old and new versions of the two main pages, the landing page and product page, are shown below.

A Glimpse of The Outcome!

I created a quick prototype to show the changes. Once the wireframes are approved, I will complete prototyping and start testing

Now Let's Dive Into The Design Process!

First, I gathered all reported issues from various sources and then mapped out my approach. In the meantime, I asked some questions to help me strategize and prioritize business and user needs.

My Approach

Conduct heuristic evaluation on the current website

Conduct secondary research

Conduct competitive analysis

Plan strategically

Design, develop and deliver

Collected through

Sales representatives' insights and feedback

Phone calls, emails and tickets from users

Study user journey path

Design audit

USERS ARE ALWAYS OUR PRIORITY!

Our Users Are Retailers, Corporate Buyers And Sales Representatives!

First, I explored users’ needs through a user journey map and key questions, prioritized them into a strategic plan, then created a site map. Also, I need to mention that some technical issues, like broken links, bugs, and errors, were fixed before the redesign started.

What is the purpose of the website?
Read products' information
and view images
Search items
Check prices
Request quote
Order items
Manage orders
Manage account
What are must-have pages?
Landing page
All Products
New products
Product
Promotion
Digital catalogue
Account management
About Us
Contact Us
What actions should be taken?
Good multi-dimensional
images
Detailed product information
Customization & personalization
Straightforward checkout
Natural language search
Strong search bar
Feature promotions
Feature suppliers' brands
Catalogue browsing
Payment versatility

What is the purpose of the website?
Read products' information
and view images
Search items
Check prices
Request quote
Order items
Manage orders
Manage account
What are must-have pages?
Landing page
All Products
New products
Product
Promotion
Digital catalogue
Account management
About Us
Contact Us
What actions should be taken?
Good multi-dimensional
images
Detailed product information
Customization & personalization
Straightforward checkout
Natural language search
Strong search bar
Feature promotions
Feature suppliers' brands
Catalogue browsing
Payment versatility

A GLIMPSE OF DESIGN AUDIT

Lack Of Visual & Content Hierarchy, Consistency, Filtering, Sorting, And Auxiliary Content Are Major Problems!

I conducted a UX/UI audit to see which parts needed more attention regarding functionality and conversion issues.

I found some general issues on every page like:

Lack of rich content
Lack of smart CTAs
Lack of standard spacings
Lack of consistency in content and design
Lack of visual and content hierarchy
Lack of filtering and sorting on the product pages
Lack of user-friendly paginations and breadcrumbs
Lack of personalization which drives more engagement & leads to higher loyalty
Lack of auxiliary content like Q&A/FAQs, help instructions, and messages
Lack of cross-sells and cross-navigation elements like “Recently Viewed Products” and “You May Also Like”

The detailed shortcomings with the level of importance and priority to change for different pages are shown in the slides below.

I found some general issues on every page like:

Lack of rich content
Lack of smart CTAs
Lack of standard spacings
Lack of consistency in content and design
Lack of visual and content hierarchy
Lack of filtering and sorting on the product pages
Lack of user-friendly paginations and breadcrumbs
Lack of personalization which drives more engagement & leads to higher loyalty
Lack of auxiliary content like Q&A/FAQs, help instructions, and messages
Lack of cross-sells and cross-navigation elements like “Recently Viewed Products” and “You May Also Like”

The detailed shortcomings with the level of importance and priority to change for different pages are shown in the slides below.

View Audit

USERS & BUSINESS PROBLEMS

Users And the Business's Problems Were Addressed Through Secondary Research And Competitive Analysis!

After analyzing, summarizing, and organizing the findings and problems from the audit along with users' feedback, tickets, and comments, I came up with possible solutions through secondary research and competitive analysis for both users and stakeholders.

User Pain Points And Solutions

Landing Page Issues

Dissatisfaction with the current online experience, especially finding items and navigation.

Solution:

Make a strong search bar and straightforward navigation to facilitate finding items and decrease the website abandonment rate.

Dissatisfaction with the current online experience, especially finding items and navigation.

Solution:

Make a strong search bar and straightforward navigation to facilitate finding items and decrease the website abandonment rate.

Dissatisfaction with the current online experience, especially finding items and navigation.

Solution:

Make a strong search bar and straightforward navigation to facilitate finding items and decrease the website abandonment rate.

Lack of Personalization

No personalization under users' accounts.

Solution:

Facilitate online ordering, add a dashboard, and track orders in the account management section.

No personalization under users' accounts.

Solution:

Facilitate online ordering, add a dashboard, and track orders in the account management section.

No personalization under users' accounts.

Solution:

Facilitate online ordering, add a dashboard, and track orders in the account management section.

Domain Confusion

Users and the business struggle with two separate websites (main & division) with different pricing.

Solution:

Have one website that gives users access to their accounts with their unique customer number that is linked to the right pricing.

Users and the business struggle with two separate websites (main & division) with different pricing.

Solution:

Have one website that gives users access to their accounts with their unique customer number that is linked to the right pricing.

Users and the business struggle with two separate websites (main & division) with different pricing.

Solution:

Have one website that gives users access to their accounts with their unique customer number that is linked to the right pricing.

Non-Responsive Website

Difficulty for most buyers who are often on the go and are mobile users.

Solution:

Make a responsive website that enhances a strong relationship with users.

Difficulty for most buyers who are often on the go and are mobile users.

Solution:

Make a responsive website that enhances a strong relationship with users.

Difficulty for most buyers who are often on the go and are mobile users.

Solution:

Make a responsive website that enhances a strong relationship with users.

Business Needs And Solutions

Operational Efficiencies

Manual, inefficient quoting, checkout, billing and inventory processes.

Solution:

Add automation features that increase revenue and free up more time for sales and customer service teams.

Manual, inefficient quoting, checkout, billing and inventory processes.

Solution:

Add automation features that increase revenue and free up more time for sales and customer service teams.

Manual, inefficient quoting, checkout, billing and inventory processes.

Solution:

Add automation features that increase revenue and free up more time for sales and customer service teams.

Lack of Data-Driven Decisions

No historical web data and insights to analyze and use.

Solution:

Install data analytics to measure and track users’ behavior, get insights from marketing initiatives and design impacts.

No historical web data and insights to analyze and use.

Solution:

Install data analytics to measure and track users’ behavior, get insights from marketing initiatives and design impacts.

No historical web data and insights to analyze and use.

Solution:

Install data analytics to measure and track users’ behavior, get insights from marketing initiatives and design impacts.

Absence of Marketing Strategies

Lack of the right marketing initiatives and implementation.

Solution:

Use smart CTAs and rich-text modules for better conversion.

Lack of the right marketing initiatives and implementation.

Solution:

Use smart CTAs and rich-text modules for better conversion.

Lack of the right marketing initiatives and implementation.

Solution:

Use smart CTAs and rich-text modules for better conversion.

Customer Acquisition Challenges

Difficulty in expanding the customer base and finding more buyers.

Solution:

Enhance online presence, work on SEO, and run email campaigns and Google Ads to increase brand awareness and traffic.

Difficulty in expanding the customer base and finding more buyers.

Solution:

Enhance online presence, work on SEO, and run email campaigns and Google Ads to increase brand awareness and traffic.

Difficulty in expanding the customer base and finding more buyers.

Solution:

Enhance online presence, work on SEO, and run email campaigns and Google Ads to increase brand awareness and traffic.

FEATURE PRIORITIZATION

The Most Impactful Features Regardless Of Their Effort Level Were Put At The Top Of My To-Do List!

Here, I prioritized solutions and features based on impact and effort to create a plan and implement the roadmap. Also, I leveraged AI solutions like an AI-powered chatbot due to its reach (helping all potential and current clients) and its high impact on customers' decision-making process. This solution directly improves user experience.

FEATURE ROADMAP & PRIORITIZATION STRATEGY

Here Is My Strategic Plan In 3 Sections: Define, Design & Develop For The Wholesale Digital Transformation!

After getting a clear picture of solutions and prioritization, I needed to structure the action plan and visualize the steps to redesign. So, I came up with the project roadmap below:

Strategic North Star: Every feature must make it faster and more predictable for a buyer to place a large, correct order and trust it will arrive on time.

METHODOLOGY

Growth-Driven Design Was Chosen As The Methodology!

I selected growth-driven design as the methodology for the following reasons:

Lower cost investment (The owner preferred to invest in stages)
Agile and flexible method to see the results (It could help to show the design, iterate, and get approval from the owner faster)
Ongoing feedback from users (Could help to improve and meet users' expectations)

Then I Started Designing And Iterating …

After collecting all views and auditing the website, it was time to design wireframes with proposed solutions to resolve customers' pain points and fulfill the business needs and expectations.

Time To See The Results

The high-fidelity wireframes are shown below to give a quick look at the different pages designed.

Reflection

What I Have Learned

Flexibility and agility in designing and managing the project.
Inclusive decision-making and iterative design in creating solutions to satisfy diverse needs.
Tailoring my communication style to suit the different stakeholders.

What I Have Learned

Flexibility and agility in designing and managing the project.
Inclusive decision-making and iterative design in creating solutions to satisfy diverse needs.
Tailoring my communication style to suit the different stakeholders.

What I Have Learned

Flexibility and agility in designing and managing the project.
Inclusive decision-making and iterative design in creating solutions to satisfy diverse needs.
Tailoring my communication style to suit the different stakeholders.

Next Steps

After getting the final approval of wireframes, I need to prototype, then conduct a usability test and iterate it if necessary to implement the project.

Next Steps

After getting the final approval of wireframes, I need to prototype, then conduct a usability test and iterate it if necessary to implement the project.

Next Steps

After getting the final approval of wireframes, I need to prototype, then conduct a usability test and iterate it if necessary to implement the project.

How Can The Business Leverage AI In The Future?

AI-based Order Recommendations

Use machine learning to analyze past purchase behavior and automatically recommend frequently bought items or similar products. AI could suggest replacements or complementary tools.

Predictive Inventory Management

Implement predictive AI that forecasts when stock will need to be replenished based on historical data and usage patterns. This feature would automatically alert corporate customers to restock before running out.

AI Dynamic Pricing Optimization

Use AI algorithms to analyze market trends, competitive pricing, and demand to offer real-time dynamic pricing for larger orders. This could help corporate clients secure better deals and reduce manual price comparisons.

Sara Nabizadeh

Sara Nabizadeh