MY ROLE

Information architecture, Research, UX Design, UI Design, User testing, Design system.

CHALLENGE

The challenge was to redesign the overhaul website for a vastly diverse 70-year-old global organization which reinvents itself daily. Capture its constantly evolving personality, its customer experience along with maintaining the familiar face of a company. As improve the Information Architecture, Usability along with the Navigation. And give a totally new User Interface and provide a Style Guide.
(KPIs: Lead increase via search by 45% more topic page visit and 15% more calls to hotlines. )

Target audience

The client provided a very thorough research analyses with extensive user persona listing. Its result clearly showed that their target audience – mainly technical engineers and technical managers – are in a need of a highly efficient and extremely clear usability solution in an innovative, modern style.

Research and analyses findings

Information challenges

• Lacking the information the user needs to produce high-quality output in an efficient manner, therefore productivity suffers.
• Collecting an abundance of data that cannot easily be interpreted or used.
• When it comes to enhancing productivity, ensuring that they have the right information in order to be successful is crucial.

Massive Product Catalogs

• Product catalogs are usually massive in size, meaning extra time and effort is required for the user to find the required information. This can cause stress to the user producing a negative user experience.
• Due to the highly technical attributes of many of these products, the average catalog is stuffed with large volumes of information requiring more active searching required by the user than the average.

Difficult Navigation

• Having a complicated navigation confuses the user, making it more difficult for them to search for and find the right information that they require.

Information architecture

Discovering the main problem in the user journey by creating information architecture of the current user journeys. It clearly showed the inefficient UX design or the lack of it.
One single user action needed up to 32 steps.

Wireframes & iterations

Working with wireframes took the majority of the mission. As we had to declutter the usability glitches and create a smooth and simple way of content handling.

Moodboards and Design

Typography & Colour Usage – Light Vs. Bold interface elements are Inspired by the line stroke, and rectangle shape of the company logo. Using these elements to reflect the brand styling across the website.

Design system & Colour scheme change

Building a totally new design system was also challenging as breaking down the overflowing content, along with the inconsistent icon usage what needed restructuring and simplification.

The idea to reflect their motto: “Adaptable to Change” was to create a special colour scheme. To visualise the diversity of the brand the site receives a new look once a day, by changing the highlight colour throughout the website. This ensures that the user experiences the diversity but retains the recallability of the website.

Design

MODULAR ATOMIC DESIGN SYSTEM
By creating individual modules that can be implemented as needed we keep the site structure highly efficient and flexible.

• Navigation / Full Screen Menu: Improved usability through reduced 3-Level navigation. The main navigation should be reduced to key points as well as the search, everything else should be hidden behind hamburger menu to simplify the navigation.
• Reduced Navigation: hamburger menu and search as central navigation point.
• Header Slider: giving the slider hierarchy and focus. Gives the opportunity to lead targeted focus in news and areas in their services.
• Main areas of expertise: creates clarity and structured visibility of the services with easy processing.
• Personalised content and recommendation: unique content creation and personalisation based on the users’ needs.
• News section and app slider: easy to find useful content on a daily basis.

The New Look – Responsiveness

As the previous website wasn’t built responsive, one of the main challenges was to fit the enormous content to a responsive solution.

The New Look – Desktop

As per client request, unusually, we started with designing the desktop version first and focused on the mobile only as a next step. What turned out made our life much harder.

The New Look – Mobile

Creating the mobile version was a real challenges, especially working after the desktop version. The enormous amount of content handling on mobile was a test for the modular structure and design system too.

Results in numbers and key takeaways

• Regarding one of the user journey mapping the initial 32 steps-action has been reduced to 3-5 steps.
• KPIs has been reached 86%.
• It would have been more efficient to follow the way of ‘Mobile First’ approach.
• Initiate more UX research and testing.