back arrow

Redesign of Chemical Company Website

B2B / UX Design / Strategy
Project Brief / Issue

The current structure of having four separate B2B websites for our chemical company client creates inefficiencies and inconveniences, particularly for their sales teams, who struggle to introduce products across different brands.

Solution

Consolidate four separate websites into a single platform to deliver a cohesive brand impression. The design also focused on enhancing user experience, improving brand visibility, and reducing maintenance costs while embracing the latest industry trends

Type
UX strategy, Stakeholder interview, UX Design
Team member
1 UX Designer, 1 UI Designer, 1 Project manager, 1 Back-end engineer, 1 Front-end engineer
Timeline
2023. April-September
Outcome
Played a pivotal role in winning a competitive pitch and led UX strategy throughout the project, successfully consolidating four B2B websites into a unified platform.
Implemented intuitive navigation, product comparison tools, and an advanced search system, improving user experience, and reducing maintenance costs while meeting stakeholder needs.

Impact

This project showcased my expertise in B2B website design, UX optimisation, and strategic leadership. By driving the successful pitch and spearheading UX aspects, I demonstrated my ability to address business challenges, deliver client value, and enhance my professional competitiveness in UX Design / Strategy.

Design Process

Design Strategy

I started by conducting B2B trend research to help understand how the website can adapt to market dynamics and stay current in the evolving B2B landscape. This research identified three key trends:

1. Moving Towards B2C Shopping Behaviours: B2B companies are increasingly adopting strategies from B2C e-commerce, focusing on creating more personalised and customer-centric experiences.

2. Omni-Channel Sales: Customers are increasingly interacting with brands through multiple channels, such as online, in-store, and mobile. To meet their expectations, companies are finding that a seamless, integrated approach across all these channels is becoming essential for success.

3. Customer Needs Help: Customer often require assistance during their purchase journey to make informed decisions, especially in the B2B buying journey.

Based on these findings, I defined our strategic direction to focus on a Customer-Centric Design. Customers expect relevance and an intuitive, user-friendly navigation experience.

Stakeholder interview

Me and project manager conducted extensive stakeholder interviews to ensure all perspectives are considered.

• 10 stakeholder interviews (involves 22 stakeholders) from various departments including LEAD, ESG, PR, Foundation, Finance, Legal, and HR.

• Interviews focused on user experience, corporate branding, content communication, technical maintenance, and desired features.

10 interviews
5  Key Findings

Key Findings / pain points 😣 :

1. Confusing User Experience: The current design lacks a user-friendly structure, with unclear information architecture leading to navigation difficulties.
2. Weak Corporate Image Presentation: The website fails to clearly communicate the company’s values and sustainability efforts, leading to a disconnect between the brand and its audience.
3. Inconsistent Content Communication: News, product details, and ESG initiatives are not clearly conveyed, leading to potential misunderstandings.
4. Disorganised Information Processes: Information gathered through the backend is scattered, resulting in inefficient workflows and a need for a unified data collection system.
5. Missing Key Features: The lack of product comparison tools, unified contact forms, and streamlined navigation creates a poor user experience, potentially driving customers to competitors.

Design Direction ✨ :

1. Prioritise User Experience: Ensure a user-friendly design with intuitive navigation to address issues caused by unclear information architecture.
2. Emphasise Corporate Image: Highlight the company’s values, sustainability efforts, and professional image.
3. Ensure Clear Content: Communicate news, product details, and ESG initiatives effectively.
4. Streamline Processes: Unify information collection to address disorganised data currently gathered through the backend.
5. Incorporate Key Features: Add product comparison tools, unified contact forms, and streamlined navigation.

UX/UI Design

Highlight 1

Mainpage Redesign

To develop the mainpage design strategy, I implemented the following approaches:
1. Current Analysis and Categorisation: Analysed the mainpage layout logic of 15 chemical company websites according to their scalibilty and brand reputation and then categorised them into 3 types:

A. Customer Acquisition-Oriented: Attract new customers and introduce them to the company.
Key Features: Engaging visuals, prominent CTAs, recent company updates, and comprehensive information layout to provide a complete understanding of the company.

B. Functionality-Oriented:Enhance usability and provide efficient access to information.
Key Features: Primary placement of the search function, detailed product and service sections, and streamlined layout to improve user experience.

C. Hybrid-Oriented: Balance engagement and functionality.
Key Features: Balanced page length, combination of engaging content and functional elements, recent updates, and detailed sections to cater to diverse user needs.

2. build up positioning matrix: Using matrix visually represented the anticipated strategic direction, helping us understand where to position the design in terms of in formation density and design focus.

Deconstructed these homepage designs to identify unique features and common elements, helping to pinpoint our brand's potential positioning.

My design decisions for three types of homepages: For each type, I created wireframe to discuss with the client.
I also referenced GA data, which revealed that many website visitors are interested in ESG content, so I adjusted the section layout accordingly.

Final UI
Design Highlights
✅ Simplify the homepage while ensuring key information is not overlooked.
✅ Use visual aids to make information easier to understand and enhance the company’s image.
Highlight 2

Product comparison function


Feature is to improve the user experience by providing a tool that facilitates efficient and informed decision-making.

Key Development Process:
1. Competitive Analysis: Conducted an analysis of similar features on competitor websites
2. Requirement Gathering: Identified key comparison criteria through stakeholder interviews and meeting with client.
3. Wireframing and Prototyping

Six use case wireframes. The RWD design should also be considerated.
Prototype: Start from detailed page to comparison page. When users browse products, they can select different product items and proceed to the comparison page to compare them.
Final UI
Design Highlights
✅  Users can easily compare multiple options without switching between pages, saving time and improving efficiency.
✅  Through intuitive comparison, they can select the most suitable materials based on their needs.
✅  Quickly access detailed information on various chemical materials.
Highlight 4

Contact Us Section Redesign


In the original design, each product page had its own 'Contact Us' section. However, this approach led to several issues such as misrouted Inquiries and increased workload.

Design Highlights
✅  Unified Contact Entrance:
  A. Centralised Contact Page: A unified entry point for all user inquiries. Now, users are directed to a central contact page where they can specify their needs and interests.
  B. Guided Inquiry Process: This ensures that inquiries are accurately categorised, reducing the  likelihood of misrouted requests and improving response efficiency.
✅  Enhanced User Engagement:
Floating 'Contact Us' Button: Makes the contact option highly visible and accessible, prompting user interaction at any point during their browsing.

Conclusion

Analysed the websites of 15 chemical companies for reference.
Conducted 10 stakeholder interviews (involves 22 stakeholders)
featuring 13 different templates across a total of over 50 pages.

The redesign of the chemical company’s website not only achieved a more cohesive and brand-aligned platform but also significantly enhanced the user experience through strategic feature implementations. By focusing on user-friendly navigation, detailed product comparisons, and a clear presentation of the company’s values, the new website positions the company as a leader in the chemical industry, prepared to meet the evolving needs of its customers and stakeholders.

Key Learnings

1. Development of Communication Skills: This project has trained me in communicating effectively with clients and across departments. Understanding how to drive design through effective communication is crucial.

2. Enhanced Design Consideration: It's essential to consider component reusability when designing CMS pages, which enhance my design ability after this project.

3. Cultivation of Design Strategy: I have accumulated the ability to conceptualise website strategies through competitive analysis and stakeholder interviews.

Other projects