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 to possible customers, and existing customers found it difficult to locate datasheets and technical specifications for individual products. My focus was on simplifying the product structure, clarifying content hierarchy, and creating clear user flows for accessing critical technical information.

The project 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.

The design process began with a sitemap informed from earlier user research. I then moved into mid-fidelity wireframes that could be used for testing. The feedback from users helped to identify any areas where the navigation and content hierarchy could be fine tuned before I moved onto the visual design of the site.

Using the insights I moved into high-fidelity designs where I focused on creating flexible content blocks that could be used for a wide range of content types. The client had chosen to writing the copy so the layouts needed to be resilient to varying content length and support easy scanning and quick comprehension.

A key UX challenge was designing a scalable system for managing and presenting product datasheets. Documents were to be hosted externally, so the solution needed to support simple upload process for stakeholders while allowing users, often accessing the information on the move, to find the documents quickly.

To address this, I designed a dedicated datasheet hub that brought all technical documents into a single, searchable area. The structure also supported clear paths for users who preferred navigation over search.

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.

I created custom reusable content blocks that allowed the client to add pages and content in a simple and controlled way. This enabled the site to scale over time while remaining simple to use and easy to maintain.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

Improve the user experience of our website.

Learn more

Nissan Manufacturing

Reduce the admin time spent updating our website.

Learn more