Michael Mc.

Advanced Electronics Ltd

Helping users navigate a complex product line and easily access important data

ROLE

UX Designer

Responsibilities

Design, Wireframing, Usability Testing, Visual Design, Build & Delivery

Tools

Figma, WordPress, Elementor, Crocoblock

Background

Advanced Electronics is part of the Halma Company, a global technology company. The organisation designs and manufactures specialist fire safety systems, providing a range of products used in over 80 countries.

The problem

The existing site was no longer meeting the needs of either the users or the internal stakeholders. Advanced approached the project with a clear objective. To redesign the site that better supported their product line and customer base.

The project needed to address several challenges. Stakeholders struggled to update and manage content on the site. For users, the site did not clearly communicate a complex product range, and was difficult to locate datasheets and technical specifications for individual products.

The project also needed to address several challenges from the existing website:

My focus was on simplifying product structure, clarifying content hierarchy and creating clear user flows for finding critical technical information.

Product layout from wireframe to high-fidelity design

Process

Working alongside a dedicated UX researcher, I took ownership of the design and delivery phases of the project. Using insights from user research, I translated the findings into wireframes, evolved these into high-fidelity designs, and then built the site using Wordpress and Elementor, to finally launching the site.

To address the dificulty for stakeholders in updating the site, I created flexible content blocks and restructured how products were linked to documents.

To help users navigate products and datasheets I designed this area of the site into a hub where all information was accessible and easy to navigate, either by going directly to products or using specific search areas for documents.

The designs were reviewed with the client throughout each phase, and the final product received strong stakeholder buy-in, allowing me to move the project into build and launch.

Build

A key challenge for the build phase was translating the design into flexible structures that could support multiple content types. Each section of the site needed a clearly defined area that stakeholders could add and manage content without compromising consistency or useability.

The datasheets that the website stored was a more complex requirement. Each datasheet was associated with a unique product code that uses would need to be able to search for.

I created a dedicated datasheet search that supported the product-code lookup, along with a site-wide search for users that would want to search across all content of the site from wherever they were.

As I built, I focused on ensuring the team could manage and update the site confidently post launch, reducing the need of external support and ensuring the site supported both the stakeholder and user needs.

Search results & datasheets

Outcomes

The launch of the site was regarded as a major success. Stakeholders consistently praised how easy the site was to update, while reporting that users could now find the information they needed quickly.

After the success of the site, we were able to continue the relationship with Advanced for both online and offline materials. This included designing a dedicated section of the website for a new smart fire alarm system to support the product launch.

The continued relationship shows how the redesign not only solved the sites immediate UX challenges but also created a scalable site that could support future product launch campaigns.

Stakeholder Feedback

“A fantastic job in helping us to bring a fresh new style and simpler navigation to our website. The site is built in a way that makes it extremely easy to update and highly flexible, so it will adapt as we grow.”

“We needed an innovative way to showcase this innovative product. You delivered a simple, eye-catching solution that conveys the platform’s ease of use whilst giving potential customers easy access to everything they might need to make a purchasing decision.”

Visit Live Site

Other Case Studies

Advanced Electronics Ltd

Helping users navigate a complex product line and easily access important data

Learn more

Nissan Manufacturing

Attract potential employees to join in a competitive work force

Learn more

Nissan Manufacturing

Awareness campaign for a large recruitment drive.

Learn more

Jump Rush

Improving the user experience of a leisure client website

Learn more

Nissan Manufacturing

Reduce the admin time spent updating our website

Learn more