How We Combined Innovation with UX for ZEON SMI’s New Website

When ZEON SMI set out to redesign its website, the goal was clear: Create an online experience that reflects the company's high-tech brand, clearly communicates the differentiating qualities of its specialty materials, and provides easy access to critical documentation.

However, achieving this required overcoming multiple challenges—including blending two separate brands, streamlining access to technical resources, and crafting a site that effectively supports multiple audiences in B2B sectors of the chemicals industry. 

Our approach centered on building a website that looks the part while also functioning as a powerful tool for B2B audience engagement, information delivery, brand positioning, and business growth.

Project Goals and Objectives

The redesigned website needed to blend intuitive functionality with Zeon SMI’s innovative product offerings and diverse business sectors. The aim was to improve the overall user experience, elevate the brand, and optimize the site for growth and efficiency. 

Ultimately, the new website’s design needed to showcase the company's advanced Cyclo Olefin Polymer (COP) technologies and high-quality COP products.

The new site’s architecture had to be scalable and administered in an easy-to-manage platform, ensuring it would expand with the business.  

The project focused on building a high-performance website with a measurable impact that can handle the company’s growing list of products, applications, industries, and expertise.

Strategic Clarity, Operational Confidence

Our collaborative planning process is a step-by-step approach to redesigning websites, with unique phases that each build upon the next phase to form a solid, strategic foundation.

Beginning with defining the brand, this process explores and brings the company’s values and goals into focus, which then guides every subsequent decision.

The lengthy strategy process relies on significant collaboration with the client to define personas, user stories, and user flows, each of which highlights the specific needs and behaviors of the target audience.

“When clients gain clarity on their brand and audience, every decision becomes easier. Our role is to guide them step-by-step so their new website reflects their vision, connects with users, and drives lasting success."

- Steve Fowler, Director of Client Marketing, DBS Interactive

A strategy workshop develops the fuel for the visual identity and voice of the brand.

These initial strategy workshops ultimately inform the creation of the site map, wireframes, and mockups, which serve as the website's blueprint.

Each of these steps takes time, but the benefits and insights gained from such a thorough process cannot be overstated. Methodically addressing every aspect of the website’s design ensures a cohesive, user-centric product that aligns with the business’s goals and sets the stage for long-term success.

Addressing Key Challenges Upfront

We knew there would be hurdles to overcome at various stages for Zeon SMI’s redesign. We identified multiple challenges that could derail the project. 

Addressing these challenges early helped us keep the project on track, ensuring it remained in scope and met deadlines. It also helped us set clear expectations, allowing the team to manage risks effectively and avoid disruptions.

Crafting a New Design 

Objective: Crafting a modern website that aligns with ZEON SMI's brand while engaging a diverse audience encompassing varying levels of technical expertise.

Why it mattered: A misaligned design would weaken brand credibility and trust.

Solution: We conducted multiple stakeholder interviews to discuss aesthetic preferences and examples of the overall vision for a new website. The style tiles exercise focused on components—type, color, and images—rather than specifics, which influenced design decisions. We and ZEON SMI used these data-driven insights in early mockups to define clear directions for the redesigned aesthetic.

Avoiding Technical Overload

Objective: Find the balance between technical detail for engineers and scientists and not overwhelming project managers and procurement professionals.

Why it mattered: Too much or too little information could lead to confusion, frustration, and ultimately, a lost opportunity.

Solution: Through workshops, the project team determined the key pieces of technical information each persona needed. The eventual wireframes highlighted intuitive pathways to display each product's critical technical data and paths to detailed technical information.

Centering Value Propositions

Objective: Communicate the unique benefits and value propositions of ZEON SMI products clearly and compellingly—and fast—to resonate with each of personas. Success rested on the effective communication of the differentiators.

Why it mattered: Without clear and compelling messaging, potential customers might overlook ZEON SMI’s unique advantages.

Solution: Through audience research and stakeholder interviews, the DBS project team created messaging informed by user stories that spoke to the goals, motivations, and pain points of business prospects.

Merging Old Websites

Objective: Integrate two separate entities into a single, unified website that feels seamless and intuitive to users. A disjointed website could create confusion and undermine the brand's credibility.

Why it mattered: A fragmented website experience could confuse users, dilute brand authority, and reduce engagement.

Solution: A new sitemap created a consolidated primary navigation to allow each user to find the solutions that would fulfill their goals. The site also created a hub for users to view ZEON SMI's and ZEONEX's materials.

Differentiating Raw Materials vs. Applications

Objective: Clearly communicating that ZEON SMI manufactures raw materials while showcasing their diverse applications across multiple industries and business sectors.

Why it mattered: Without clear positioning, potential customers might not understand ZEON SMI’s role in the supply chain, leading to confusion about how its materials fit into their specific industry needs.

Solution: Navigation was structured to distinguish the company's products and materials from the uses and the industries that rely on them.

Addressing these challenges prepared everyone to meet business goals and audience needs.

Developing User Personas for a Focused Website

User stories, rooted in persona research, captured the unique needs and motivations of Zeon SMI’s website users. These brief narratives reflect common website use cases, focusing on what each persona hopes to achieve and how they interact with the site.

At this stage, persona-based user stories don’t always align with the defined project scope. Still, they highlight the ideal outcomes and prompt discussion about what is feasible within the website project's budget and timeline. 

For example, a user story for an R&D scientist visiting the new site might look like this:

“I need to access detailed technical specifications and data sheets on materials so that I can evaluate their suitability for high-performance applications.”

This user story identifies the persona’s need for in-depth technical information, but does not specify how that information should be displayed or integrated within the existing website architecture.

It opens the door to exploring whether additional design and technical resources should be included now, or perhaps reserved for a future phase of website development.

Through user stories, the similarities and differences between the website’s user personas become clear, allowing the project’s designers, developers, and marketing team to prioritize key needs in things like page layouts, design features, or brand messaging in headlines and calls-to-action.

For instance, while a scientist may prioritize detailed material data, a project manager might need information on product availability, and the purchasing manager may focus on cost and inventory management tools.

The ZEON SMI team ranked every user story based on importance. Higher-priority themes were positioned more prominently or moved higher on a key page. 

Wireframes and User Flows Support Action-Oriented Designs

User flow mapping brings the prior project work into focus, shaping the roadmap for final designs and page layouts to match the needs of each high-priority user story.

Just like a travel app that identifies the fastest and most efficient route, user journey mapping identifies every page type and the most efficient, purposeful pathways through the website.

This process is essential for enhancing user experience and ensuring a smooth and intuitive journey. We map the steps users take from their first interaction with the site to successfully achieving their goals—whether that’s accessing product specs, industry applications, or reaching out for support.

Every aspect of the flow is carefully considered and thoughtfully applied to guide users with minimal steps.

User flow mapping is like the blueprint for a house, and wireframes are the framing.

Just as a builder starts with a detailed plan and then frames the house, wireframes establish the structure and functionality of ZEON SMI’s website.

Wireframes lay the foundation for how each page will look and work, ensuring users can navigate effortlessly.

We created wireframes for desktop and mobile views for maximum usability on any device.

This stage turned insights into tangible design, ensuring the site served users in the most effective way possible.

New Designs are Sleek, Modern, and Powerful

The design goal was to create a bold, user-friendly experience that adhered to the parent company's brand standards.

Though the design had to follow these guidelines, there was still ample space to reflect ZEON SMI’s cutting-edge, industry-leading products and image.

Website Design Features

• Modern Aesthetic: A clean, contemporary look that mirrors ZONE MIS’s innovation and high-tech market positioning
• Dynamic Visuals: High-resolution product imagery and materials that effectively showcase the performance and applications of their products.
• Interactive Elements: Animations and engaging visuals designed to simplify complex technologies, making the content more accessible and compelling for users.
• Consistent Branding: A unified tone and style that seamlessly integrates ZEONEX and ZEON SMI brands, reinforcing their authoritative voice across all content.

We presented two distinct style tiles offering a unique approach with elements that could be mixed and matched to define the site’s visual identity.

The user-centric designs reflected the technical sophistication of the brand.

• Sleek and Tech-Forward: Focused on deep blues and metallic tones to evoke precision and modernity, paired with clean, minimalist typography to reinforce the high-tech and professional feel.
• Vibrant and Engaging: This style features brighter accent colors, bold fonts, and interactive elements to draw attention to key features. It emphasizes user engagement and a dynamic, approachable feel.

The two style tile options provided creative flexibility, maintaining an innovative and user-friendly experience within brand guidelines.

Mockups Blend Style and Substance

The discovery phase of the website project demanded patience and meticulous attention to detail.

Like any major undertaking, there was always the urge to jump ahead to see the finished product, to immediately see the website in all its glory.

But containing that natural urge and methodically working through each phase proved crucial to the project's ultimate success.

Each piece, each building block, and each minute detail was carefully ironed out and defined, ensuring a cohesive and high-performing final product.

The design process then progressed through crucial stages that emphasized the visual identity, usability, and content structure. 

Contact Us for Web Design and Development

Now, the mockups brought all the website planning to life. Derived from the wireframes, these visuals served the ZEON SMI team and our developers. They reflected the clean, modern layout using the style tiles. The realistic mockups balanced images and whitespace.

Equally important, DBS tackled the critical challenge of effectively tying ZEON SMI's products to their relevant industries and applications. The mockups demonstrated how the company supplies the high-quality raw materials that manufacturers use to create high-performance end products.

The mockups highlighted the quality and versatility of their raw materials, solidifying ZEON SMI's role as a trusted supplier of high-performance materials.

Strategy Eliminates Uncertainty. We guide you step-by-step to ensure your website reflects your vision and drives success. 

Schedule A Discussion

The Development Trifecta: Fast, Secure, and User-Friendly

With the design framework completed, the project transitioned to development – an equally important phase focused on maximizing user experience, SEO, and overall effectiveness.

The work shifted to translating the mockups into a functional, high-performing website, but with a crucial additional element: adhering to the latest Google performance standards.

Many website projects fail here. Bold designs, great visuals, and compelling copy aren’t enough. Development supports what’s referred to as technical SEO. This work also supports AEO, the tactics required to appear in generative AI platforms like Copilot, Perplexity, and ChatGPT.

"ZEON SMI needed more than a beautiful design. They needed a site that was fast, accessible, and trusted by Google and AI sites. Our job was to build a platform that put users first and delivered performance for lasting results."

– John Golden, Lead Developer, DBS Interactive

This stage involved creating a technically sound platform that would meet the needs of ZEON SMI and its users but also excel in the eyes of Google's algorithms and AI platforms. This meant prioritizing elements measured in Google's Core Web Vitals and verified using Google Lighthouse audits. These are Google's way of identifying how users experience a website.

Every technical decision, from the CMS choice to image handling, centered on delivering a fast web application. The site was made to be fast, accessible, and easy to manage, keeping the user experience front and center.

Craft CMS delivered the perfect blend of flexibility, security, and ease of use. The user-friendly control panel also empowers ZEON SMI's team to manage and update content easily.

The CMS met both technical requirements and team usability requests, thus making it the ideal pick for this part of the project.

"We built this site to run fast, stay secure, and be easy to manage," said John Golden, Lead Developer. "Every decision was about making the experience smoother and stronger."

Optimized for achieving "good grades" based on Google’s Lighthouse test, we ensured the site loads quickly, responds smoothly, and operates without delays—performance elements that reflect ZEON SMI’s brand promise of speed and quality.

The website launched with high scores on Google’s test, demonstrating the team's commitment to the project's success.

In simpler terms, we made sure the site delivers fast loading times, seamless interactions, and a responsive experience, keeping users engaged while boosting search engine rankings.

ZEON SMI’s new website can be added and updated, and the intuitive content management system makes it easy to grow traffic and demonstrate thought leadership with the ongoing publishing of articles, case studies, and other content.

The new website provides the scalability needed to grow and evolve with the business. It is easy to administer and revise or add content as needed.

Making It All Future Proof

The new website is positioned to be evergreen and offers growth and scalability as Zeon SMI adds new products, applications, and content as the business offerings evolve with the advancement of materials manufacturing. The steps taken to develop this website ensure that the best practices set it apart from competitors.

Design Is Just the Beginning. We turn bold visuals into high-performing websites that meet Core Web Vitals and scale with your business.

Let's Talk Website Strategy

More than a Website, It’s a Foundation for Digital Growth

The ZEON SMI website represents a strategic investment in the company's future digital presence and marketing hub. The project's meticulous planning and execution, from initial strategy through development, laid a solid foundation for sustained SEO success.

Design thinking prioritized the user. Creating a modern and intuitive design and adhering to the highest technical standards positioned the new website to deliver business results.

The Project's Winning Formula 

• Enhanced User Experience: The website provides a modern, intuitive, and user-friendly experience tailored to the needs of key personas like Eric, Kate, Zheng, and David.

• Elevated Brand Image: The new design effectively communicates ZEON SMI's premium brand, expertise, and professionalism.

• Optimized Content Delivery: The website facilitates easy uploading, display, and organization of diverse content types, ensuring optimal usability.

• Accessibility and Technical Excellence: The website meets WCAG 2.1 AA accessibility standards and incorporates a Progressive Web App (PWA) architecture for enhanced performance and offline access.

• Scalability and Growth: The Craft CMS platform and the website's architecture provide the scalability needed to grow and evolve with ZEON SMI's business, allowing for easy addition of new products, applications, and content.

The digital foundation positions ZEON SMI to maximize its reach and awareness in online search and generative AI platforms, positioning the company as an industry thought leader.

Let's discuss opportunities for enhancing your B2B website to offer users an optimal experience and elevate search rankings.