Creating an intelligent digital experience, tailored to customer needs

Client: ABB
Role: Product Design Lead
Agency: Wunderman Thompson
Year: 2020

Designing a cutting-edge, industry-leading, and future-focused website experience for a platform that hosts hundreds of thousands of products and pages is no mean feat.

ABB aimed to significantly enhance their web channel's ability to market services and products and boost sales. To achieve this goal, it was essential to understand the needs of the customers and assist them in navigating through the extensive website.

Objectives

Performed thorough functional and experiential audits of the current ecosystem, comparing it against industry competitors for benchmarking purposes.

Implemented a comprehensive UI overhaul, incorporating an atomic design system that aligns with the revitalised ABB brand, to enhance the overall user interface and experience.

Developed intelligent solutions to provide personalised and tailored user experiences.

Auditing the ecosystem

We crawled and audited 11,000 pages to gain a general understanding of the current ecosystem and page hierarchy. We identified and assessed 32 websites, subdomains, microsites, and portals.

We observed inconsistent experiences and navigation across the ecosystem, resulting in fragmented and disorienting user journeys.

This indicated a lack of order, rules, and governance on how sites and pages were being assembled.

Analysing the page experience

AI eyetracking analysis and clarity mesurement was performed on key ABB pages and similar templates on competitor websites.

Other metrics were benchmarked, including accessibility and page speed to form an overall picture and how the ABB experience currently compares with others. This helped us identify priority areas for improvement,

We meticulously identified the essential components necessary to craft a cohesive and engaging user experience. Where necessary, we developed new components to fill any gaps, ensuring a comprehensive solution that met the evolving needs of the ecosystem.

Wireframed specifications for each template and component detailed anatomy, purpose, interactions & editorial requirements.

Through our analysis, we found critical issues to be prevalent across the ABB ecosystem

01 The cluttered and noisy content on the page overwhelmed the user experience.

02 A fragmented and disparate ecosystem caused significant disorientation in many customer journeys.

03 Users found it frustrating to navigate the numerous site pages to find what they needed.

Design system creation

In close collaboration with the ABB internal team, we created an atomic design system that aligns with the revitalized ABB brand, ensuring efficient and quick scalability to meet the needs of all users and editors across the ecosystem.

Our design approach was guided by Swiss design principles, emphasising objective simplicity through clean and unadorned visual communication.

A tailored experience

Site visitors can effortlessly self-identify, promptly find their relevant industries and solutions, and consume information in a concise and easily digestible format, enhancing their overall user experience.

A multi-level navigation system was developed to offer users a quick and comprehensive view of ABB's offerings within specific industries.

Locating relevant and interesting content

On-page signposting was utilised to provide context through engaging imagery and succinct copy descriptions, facilitating user orientation and decision-making across ABB's extensive portfolio of products and services.