UX/UI audit

I initiated the project with an in-depth UX audit of Mondi’s main site and the Mondi Jobs microsite.

The findings were documented in Figjam, facilitating collaborative review and feedback.

Each page was scrutinised, resulting in tailored recommendations to enhance performance and usability. These insights were pivotal in crafting our strategic roadmap for the redesign.

Key takeaways

• Inconsistent and poor navigation design making it difficult to navigate seamlessly.
• Inconsistency across page layouts, component design, and behaviours.
• Limited use of shortcuts to access key information efficiently, making user journeys cumbersome.
• Issues with accessibility, use of space, hierarchy and too many text heavy areas on critical pages.
• Access to help and support across the site was poor.

Discovery

Market research

I reviewed direct and indirect Mondi competitors, examining their feature sets, information architecture, UX/UI practices and visual style. My findings were presented to the client highlighting the best practices to adopt and things to avoid, enabling us to make informed design decisions going forward.

User research

Together with the UX Researcher, we analysed existing user research documentation from the client to identify the key behaviours and attitudes that we needed to design for.
‍
Under the guidance of the client we prioritised packaging buyers, investors, and job seekers from an initial persona pool of 15+. We then performed interviews with customers and employees matching these profiles to gain further insight.

Armed with all the insight we designed user flows for each persona.

Wireframing

Our initial step was to map out the existing website by creating a mind map, including all pages and actions. Analysing the scheme, we identified structural inconsistencies and made refinements to the hierarchy and site map.
‍
Working with the digital strategist and project manager, we identified 40+ templates, all of which I created wires for.
‍
All templates were designed with a component-first approach to give the client maximum flexibility when creating new pages in the future.

Design validation

I developed three approaches for the contact flow. Given the importance of this journey, I conducted prototype testing to compare the two options and evaluate the new UX against the old one. Mondi provided us with 5 users of varying proficiency levels, and we also recruited 3 users who had never used Mondi before.
‍
Based on the user testing results, we selected one approach that demonstrated the best task completion rate and user satisfaction.

Creating the high-fidelity prototype

Together with a Junior Designer we designed all pages across desktop, tablet and mobile devices in Figma, fully prototyped with advanced functionality built into the designs.

Selected UX/UI improvements

• Moving away from text in light colours and text over images to improve accessibility.
• Layouts making the most out of the space on the page, showing key content above the fold.
• Modules to display content in more visually engaging ways to help break up potentially large chunks of text to enable users to scan more easily.
• Predictive search across the site to help users find content or products faster.
• Breadcrumbs were added to all pages to allow users to navigate quickly through pages.
• Contact flows were embedded into core user journeys to enable faster conversions.
• Using Jacobs Law principles I followed best practice page layout design throughout, particularly on the product section.
• All UI elements behave in a consistent fashion and specific colour was used always to signify interactivity.

Design system

Following the ATOMIC framework, I developed a comprehensive design system that included all design assets, such as colours, typography, icons, modules, animation guidelines, responsiveness guidelines, and interactive elements behaviour.

Summary

After the redesign was launched, Mondi continued to grow content on the site, utilising modules from the design system to craft completely new page designs.

The response from Mond stakeholders was overwhelmingly positive and the site witnessed record engagement and conversion metrics.