Edmund Optics
Divisional Sites

Introduction: Objective and Goal

Edmund Optics faced a branding issue where many customers in the industry only recognized them as a vendor and were unaware of their manufacturing side.

The goal was to create individual manufacturing websites with the primary purpose of attracting high-volume customers based on the key product types of Precision Optics, Optical Filters, Imaging Optics, and Laser Optics. Pricing for custom orders or bulk purchases was customized on a per-customer basis. Therefore, it was crucial to differentiate between the e-commerce (low-volume) site and the manufacturing-focused sites. The sales team needed materials and credibility throughout the website to showcase their capabilities.There was also a tight deadline to launch all four sites within a two-month time frame.

To ensure a successful project, we followed a general process:

• Requirements and Research
• Branding, Wire-framing, and Design System
• Content Gathering from Engineers and Sales
• Implementation
• Linking, A/B Testing, and Iterations

Requirements, Research and Content gathering

As part of the project, we needed to develop a header system for the new manufacturing websites that would link back to the main marketplace sites. The goal was to create a cohesive look and feel across all four sites, ensuring each had its own unique branding, while still being clearly part of a larger brand system.

To accomplish this, we conducted a competitive analysis and formed a small committee to determine the best approach for the header design. As the lead of the committee, I assembled a team that included input from content engineers and key sales personnel. We also analyzed competitors and non-competitors who had implemented similar divisional changes.

After compiling our findings, we created a presentation for the header design, which I presented to the VP of Marketing. The concept was approved, and we moved forward with implementation.

Here is the final wireframe and menu system we would utilize for the four sites:

Following that, three content engineers were assigned to create the site’s content. I collaborated closely with each of them to ensure the content was well-organized and easy to read for customers. Some engineers were more experienced in structuring content effectively, while others needed more guidance. The content I received mostly came in the form of Word documents and PowerPoint slides for the five-page websites.

We also had a potential SEO issue with redundant content. Content Engineers were on the job and part of the team to make sure content was tailor to either marketplace or manufacturing and appropriate messaging was tailored on each separate site depending on personas and likely visitors.

Sample Personas:

• High Tech Start-ups
• Supply Chain Manager
• Buyers
• Operations Managers
• Procurement Professionals/Director
• R&D Engineer

Sample Industries:

• Imaging Industries: Factory Automation, Harsh Environments, Measurement, Metrology, and Gauging, Life Sciences and Diagnostics
• Precision Optics Industries: Life Sciences and Medical Devices, Industrial Inspection, Research and University, Defense and Security
• Optical Filters: Medical Diagnostics and Devices, Agriculture, Food and Beverage, Environmental
• Laser Optics: Biomedical Laser, Materials Processing, Security, Communications, and Defense Systems

Branding, Wire-framing, and Design System

Once the header system was finalized and content was being made and gathered by the content engineers, the next step was to focus on branding. In collaboration with the art director and a graphic designer, we discussed potential logos and branding concepts. Colors were selected for each division, as logos were excluded due to business requirements. The initial branding and color schemes were finalized.

The next step was coming up with a design system based on the new branding and color schemes. I put this together and all was approved:

Implementation

Once we received all the content, we moved on to the design and programming phase. I worked closely with a graphic designer and the art director, collaborating with our photography and video department to bring the design to life. The website was built using .NET Razor Views, and I personally handled the coding, leveraging our CMS system, Umbraco.

For the internal pages, I used JavaScript, jQuery, CSS, and HTML to implement the functionality. To maintain consistency across platforms, our art director created print brochures that mirrored the website’s content. I translated many of these print designs into interactive web elements, ensuring a seamless cross-platform experience.

Linking and A/B testing/Iterations

We needed to find a way to link the manufacturing and marketplace sites without causing confusion for customers. We conducted A/B testing within the main header to determine the best word to guide key personas. We tested terms like "Custom," "Manufacturing," and "Services." A competitive analysis was also performed to see what similar companies were using, ensuring we stayed industry-focused and avoided introducing unfamiliar "lingo." After gathering the research and A/B test data, we settled on the term "Manufacturing" and decided where these new sections would be linked on the main site.

Linking Manufacturing and Marketplace Sites

On the main website, we needed to add linkage over to the new sites and to announce our new divisional sites in a permanent matter. Adding the dropdown menu with the clear product divisions. We added a divisional message directly in the dropdown. As well, on the main about us page, we added the language and separation. We also added a large callout on the main homepage of the website for customers seeking manufacturing services.

Lastly, of course, websites are never done and always evolving. After launch we already started thinking of ways to improve and gather feedback for the next round of changes!