UI Design & Design System

Migusto

Brief: Migusto, Switzerland Migros' innovative cooking platform, is a paradise for food enthusiasts, offering a wide range of recipes, expert tips, and interactive features. With a commitment to making cooking accessible and fun, Migusto's playful design elements engage users and create an exciting culinary experience. The vibrant colours and whimsical illustrations contribute to an inviting atmosphere. Migusto approached us to help with a design relaunch, aiming to streamline and enhance the interface while preserving its unique personality. The goal was to ensure easy navigation while maintaining the essence of the Migusto brand.

Approach: For the redesign, we seized the opportunity to transition all of their designs from Sketch to Figma. This strategic move opened up a fresh perspective, allowing us to view the project with an entirely new lens. Moreover, it empowered us to rebuild their Design Library from the ground up. By starting from scratch, we were able to refine and optimise the design elements, ensuring a cohesive and efficient workflow. The transition to Figma not only enhanced collaboration among the design team but also provided a robust platform for seamless integration and future scalability. This shift marked a significant milestone in the design process, enabling us to elevate Migusto's user experience to new heights.

Year:
2023

Role:
Design System
UI Design

Live Website

01. Design Refresh

Old Vs New
The brand team provided us with new fonts, colours and a Style Guide which helped us define the new design. As part of our optimization efforts, we eliminated the colored backgrounds and certain images on the stages to improve page loading speed. Additionally, we minimized the number of fonts used and made adjustments to the spacing and styling of dashed underlines, while also giving the recipe tiles rounded corners to create a more streamlined appearance across the pages. While the swirl and paint splashes are still incorporated, we implemented them strategically to have a greater impact and reduce visual clutter.

A touch-up here and there...
On some pages we replaced the order and the components to optimise the user experience to be more relevant to the user’s current needs. For instance, on the inspiration page, we have implemented collections that enable users to explore topics directly, rather than navigating through sliders as in the previous design. Additionally, we have incorporated a search function on the inspiration page, making it more convenient for users to find what they are looking for without having to leave the page.

Creating an overview
To enhance the user experience on the recipe detail page, we made specific modifications. Firstly, we resized the stage image to a smaller size, which allowed us to allocate more space above the fold for important details. This adjustment ensures that users have a clear and comprehensive overview of the recipe without the need to scroll. By providing this clear overview, users can easily access key information such as nutritional information and cooking times, enabling them to make informed decisions and take immediate actions, such as saving or printing the recipe, without any inconvenience or additional scrolling.

02. Design Library & Sketch-Figma Migration

Due to the challenging deadline we were working under and the need for parallel work, we made the decision to divide the library into three separate Figma files: Foundation, Components, and Templates. This approach served multiple purposes. Firstly, it helped us reduce the file size, making it more manageable and easier to work with. Secondly, it allowed us to prioritize tasks and work systematically within the limited timeframe we had. 

The Foundation file contained all the necessary elements to construct the Component files, while the Component file encompassed everything needed to build the Templates file. By breaking down the library in this way, we ensured a logical and efficient workflow, enabling us to focus on essential components and progressively build upon them.

Together with the development team, we also developed a comprehensive handover template in Figma. This template served as a centralized documentation platform for all our components, ensuring easy access and clarity for future projects. The handover template has proven to be a valuable resource, streamlining communication and facilitating knowledge transfer within our team.