Mondadoristore.it Redesign

ERGONOMICS FOR DESIGN OF USABLE WEB PAGES AND APPS
2021

THEMES
User Interface Design, Design System, Branding, Usability, Web Design

TEAM
Alex Landra, Federica Aulenta, Pietro Lezzani, Kilian Re, Chiara Resnati

Aimed to improve its usability and user experience by relying on web ergonomics principles, the team redesigned the main features of the Mondadori store website. Starting from the existing website, the team redesigned the flows and wireframes of the web pages, built a consistend and usable Design System and then assembled the UI mockups.

THE OUTCOME
The result of this project is an evident visual and usability improvement of the website, on which redesign interventions have been made on the basis of expert-based heuristic analysis, but also through user tests. The main challenges were to give a visual identity to the UI so that Interaction design principles such as affordances, feedbacks, visual and semantic hierarchies were respected. The site has not therefore been disrupted from a UX point of view, which is very aligned to ecommerce standards, but has been significantly redesigned from the point of view of the UI.

Previous
Next
Previous
Next

THE PROCESS
Before getting our hands on Figma, we carried out a heuristic analysis on the usability of the main tasks of the website, carrying out a parallel benchmarking with the major competitors of Mondadori. We carried out task analysis activities with real users, creating personas, empathy maps and User Journey Maps. We identified usability pain points and all the opportunities for design improvement at the interface level, and first we created wireframes (both low and high fidelity), which we validated in the same way before transforming them into detailed UIs. 

DESIGN SYSTEM
We realized that the site lacked a strong visual identity, lacking recognizable colors and effective typographic components. This was reflected in a strong lack of hierarchy and recognisability of the UI components, compromising the usability: we started from a branding activity, identifying effective colors, typographies, iconography, defining our visual language. Then we proceeded to build a scalable Design System to create all the new interfaces.

FUTURE IMPROVEMENTS
Up to now, the redesign activity has been limited to a desktop web version, but in the future a responsive and scalable mobile web version for each device is considered essential. Furthermore, there is the opportunity to design an effective native app that supports the ecommerce website, taking advantage of the possibilities that a native platform offers, such as innovative gestures and design patterns.