The current structure of having four separate chemical websites creates inefficiencies and inconveniences, especially for 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
Website link →The new website featuring a streamlined homepage, intuitive navigation structure, updated contact section, advanced product comparison tools, and a sophisticated search system. Each element has been carefully crafted to enhance user interaction and satisfaction.
1. Shift Closer to B2C Shopping Behaviors: Companies are increasingly adopting B2C shopping behaviors, providing a more personalized and customer-centric experience.
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:
2. Omni-Channel Sales: Omni-channel sales strategies are proving to be more effective, as customers engage with brands across multiple channels while expecting seamless interactions across all of them.
3. Buyer Needs Help: Buyers 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 Buyer-Centric Design. Buyers expect relevance and an intuitive, user-friendly navigation experience.
Me and my colleagues 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.
1. User Experience: Need for a user-friendly design with intuitive navigation.
2. Corporate Image: Emphasis on the company’s values, sustainability efforts, and professional image.
3. Content: Importance of clear communication of news, product details, and ESG initiatives.
4. Technical: Efficient content management and regular updates are crucial.
5. Features: Apply 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 websites and 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 our anticipated strategic direction, helping us understand where to position the design in terms of in formation density and design focus.
Feature is to improve the user experience by providing a tool that facilitates efficient and informed decision-making.
1.Users can easily compare multiple options without switching between pages, saving time and improving efficiency.
2. Through intuitive comparison, they can select the most suitable materials based on their needs.
3. Quickly access detailed information on various chemical materials.
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
The previous navigation was in an expanded format. This adjustment has improved the user experience.
1. Clear Hierarchical Structure: Users can gradually delve into product categories and details, avoiding information overload.By displaying products in a layered manner, users can gradually become familiar with the product hierarchy and classification, enhancing overall understanding and retention.
2. Simplified Interface: Prevents the display of too much information on a single page, making the interface cleaner and easier to understand.
3. Optimized for Small Screens: Hierarchical navigation is easier to operate on mobile devices, allowing users to click on menus to expand and collapse categories, thus fitting the smaller screen space better. Additionally, it could Avoids long scrolling sessions on small screens,
4. Flexible Expansion: New products or categories can be easily added to the existing hierarchy without disrupting the overall layout.
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.
Redesign Approach:
1. Unified Contact Entrance:
1.1 Centralized Contact Page: I created 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.
1.2 Guided Inquiry Process: This ensures that inquiries are accurately categorized, reducing the likelihood of misrouted requests and improving response efficiency.
2. Enhanced User Engagement:
Floating 'Contact Us' Button: To align with the business goal of encouraging users to contact sales, I designed a floating 'Contact Us' button. This makes the contact option highly visible and easily accessible, prompting user interaction at any point during their browsing experience.
By introducing a search system to
1. Enhanced User Experience: Users can quickly find specific products and information without navigating multiple pages.
2. Increased Efficiency: Saves time by providing immediate access to relevant results based on keywords and filters.
3. Improved Navigation: Simplifies the browsing process, making the website more intuitive and user-friendly.
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.
