A new web platform for Panasonic Connect Europe

Panasonic Business Europe was in urgent need of a new retreshed website, that would not only make it easier for their users to navigate, but also ensure efficient content creation for almost 30 languages across European countries.

My role

UX Lead Designer

The challenge

A tight timeframe to deliver a complex and comprehensive CMS architecture, allowing the client to share content across multiple countries and regions without having to duplicate the original content, thus accelerating innovation and technology for users.

The objectives

Bringing the whole European region together under a single website instance, enhance the overall user experience by simplifying the IA, making it easier to find products and services, making the content creation management more simple and efficient.

A user-centred, mobile friendly multilingual platform.

This project focus was to design and develop a modern, customer-centric, mobile-first environment that would provide the ability to share content across the European regional area for Panasonic Connect, one of the most succesful tech companies in the world. I led the design of a scalable architecture, offering a delightful experience to the front-end user, while easing the work burden of the CMS administrators and standardasing the process for content creators.

You can find the website HERE.

%

Mobile traffic

%

Visitors to product pages

The process

An evolution of the Panasonic Connect Europe website homepage, from wireframe to UI

Research and discovery.

I started with a thorough analysis of the existing website, mapping the IA to identify obvious pain points to tackle, such as overly complicated paths to find basic product information.

I led the team – 2 designers, a project manager, a content strategist and a front-end developer – in the evaluation of look and feel, content and information ambiguity, as well as steps needed to achieve the user needs set by the client.

I conducted and facilitated a series of discovery workshops with the client, supporting the stakeolders groups to clearly define user needs, business goals, CMS content manager’s needs, and general expectations.

I interviewed SMEs at Panasonic and captured detailed information about the key audiences. I drafted core personas based of this information and validated them with the client.

Working as a united team with the client.

Working in close partnership with the client, I carried out an extensive competitor analysis. We (me and the client’s marketing team) identified the main competitors and a set of core criteria to evaluate.

I worked with inhouse SEO experts to audit both the experience and the technical side of all the competitors. I then synthesised the findings in an in-depth and comprehensive report, offering expert recommendations on how to best tackle the identified issues.

 

Another big piece of work in the discovery phase was to map out the Information Architecture (IA) of the new website. The initial analysis of the existing website had provided us with a good understanding of the main pain points that needed adressing. I worked on a new navigation structure, based on simplified journeys, and then tested the changes with the construction of userflows, connecting the dots and drafting realistic scenarios the users would have to navigate through (particularly useful for QA testing as well).

The biggest structural change, compared to the old architecture, was to bring together the different business units under a global navigation system. This helped prioritising the product pages, making it significantly easier for the user to find information.

Wireframes.

Wireframes of course are a simple visual representation of the actual interface structure. In most cases, this is the first visual asset the client sees, and it marks an important piece in the project advancement.

For this project I created wireframes with a high level of fidelty to properly deliver the vision, including the interactions. The task was vast: organising the pages based on the new IA, creating a skeleton of the interconnections and presenting to the client a realistic draft of the website navigation. Me and the team worked closely with the stakeholders at Panasonic, testing the flows, collecting feedback, and amending where necessary. 

Evolution of the homepage design

An evolution of the Panasonic Connect Europe website homepage, from wireframe to UI

Design, test with users, reiterate.

Such a complex architecture requires a refinement process when it comes to UI. With the support of the client me and the team worked on the interface design and proposed multiple variants of the final creative direction, flexing and adapting when needed.

Usability testing was vital during the whole design phase. It helped to balance out the business needs that could potentially steer the direction away from simplifying the experience, and enable us to find solutions that would cater for stakeholders and users alike.

The element we tested and worked on the most was the navigation. The old website(s) were fragmented and built in a siloed way. The user didn’t have any way to navigate back from specific sections to the homepage or navigate from section to section. Our proposal intended to resolve this issue by adopting a global navigation system and prioritising the product pages, making it easier for the user to find detailed information.

Before reaching a solution that would achieve this, as well as keeping the specific identities of the different business groups, we designed, tested and reiterated the navbars (on multiple navigation levels) three times.

Design System

I designed every element of the components built for this project, from the atoms up. Starting from the brand guidelines, with the primary and secondary colours, I added typography, theming, spacing, elevation, interactions, iconography, all the way to more complex kitchen-sink designed components.

Atomic elements of the design system at the base of the Panasonic Connect Europe new website