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.
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.
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.
Our primary users are chemical procurement professionals from industries such as manufacturing, biotechnology, and industrial solutions.
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 user-centric experiences.
2. Omni-Channel Sales: Users 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: Users 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 User-Centric Design. Users expect relevance and an intuitive, user-friendly navigation experience.
Me and the project manager conducted extensive stakeholder interviews to ensure all perspectives were considered. Given the B2B nature of this project, most interviewees were client representatives rather than direct end-users. However, we included one key user interview to gain firsthand insights into user experience.
📌 Interview Details:
•10 stakeholder interviews (involving 22 stakeholders) from various departments, including Lead, ESG, PR, Foundation, Finance, Legal, and HR. Stakeholders provided input on corporate branding, content communication, technical maintenance, and desired features.
•1 user interview conducted with a chemical procurement professional.
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.
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.
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/users 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.
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.
Final UI
Mainpage
🎯Goal : Enhance user experience by enabling efficient and informed decision-making.
Key Development Process:
1. Competitive Analysis: Researched similar features on competitor websites to identify best practices and gaps.
2. Requirement Gathering: Identified key comparison criteria through stakeholder interviews and meeting with client.
3. Wireframing and Prototyping
Final UI
Product comparison tool
The old navigation structure did not provide a clear product hierarchy, which led to difficulty in product discovery. It was also not mobile-friendly, making it challenging for users to browse efficiently on various devices.
Goal: Improve user navigation efficiency while ensuring a responsive and scalable design.
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.
🎯Goal: To enhance search efficiency and accuracy, making it easier for users to find the right chemical products.
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.
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.
