Creating an Effortless Online Shopping Experience.
We redesigned MPreis's online grocery store, introducing a fresh concept and design which brought their digital shopping experience to a whole new level.
Our Challenges
Transforming online supermarkets
Unlike traditional e-commerce platforms where you might order a single item lof clothing, an online supermarket requires managing multiple products in various quantities. Each product must be displayed with numerous options, ensuring a smooth and user-friendly shopping experience.
Managing product availability
Depending on whether you choose delivery or self-pickup, some items may not be available. Also, product availability can vary between different store locations. Therefore, we needed to ensure users understand the importance of checking stock based on their chosen delivery method and store.
Seamless mobile navigation
We aimed to create a user-friendly interface that simplifies online shopping across a wide range of products, each offered in different quantities and options. Our focus was on ensuring ease of use, even on smaller devices, to enhance the overall shopping experience.
Product Strategy
A Modern Approach to Grocery Shopping
UXi Package
The vision of the digital storefront was to meet the aesthetic and functional demands of digital product markets. This new platform harmonizes familiar user behaviors with innovative digital experiences, ensuring a seamless shopping experience whether customers are buying online or in-store. The design also integrates the client's core values: fresh, open, and responsible, ensuring these principles are reflected in every aspect of the platform. Now, shopping at MPreis feels perfectly in sync everywhere.
Product Design
Revitalizing Tradition:
A Fresh UX/UI Design for MPreis
UX Design
Imagine transforming your online store with a design that simplifies and enhances the customer journey. In our conception phase, we laid the groundwork for a comprehensive design draft that prioritizes a seamless shopping cart and checkout process, with a sharp focus on the mobile experience. We focused on intuitive onboarding and easy store selection to make the experience as smooth as possible. This foundation allowed us to transition into production mode efficiently. This meant integrating key features like an innovative filter system that lets users effortlessly navigate through categories and find exactly what they need. On the other hand, a simplified navigation menu ensures products are always just a tap away, creating a user-friendly experience that keeps customers coming back.
UI Design
A design characterized by simplicity and a clear focus on products can transform your brand's visual identity. Our approach incorporated a diverse color palette with subtle accent colors and soft tones, conveying a modern and high-quality impression. We applied these colors with restraint and precision to create a high-end, contemporary atmosphere.
The round shapes we went with contribute to an open, friendly, and emotionally approachable visual identity. Generous spacing and plenty of white space evoke a sense of openness, giving the layout a modern and inspiring look. This design strikes a balance between effective space utilization and aesthetic appeal. The sans-serif font "Eina 01" enhances this effect with its geometrically clear typography, ensuring a high-end, modern feel and excellent readability.
Motion Design
We used Protopie and After Effects to animate our design concepts, bringing them to life with micro-interactions and complete flows. These tools allowed us to test and refine our designs thoroughly. Not only did this help us better understand the flow of interactions, but it also gave developers a tangible understanding of our design intent. Moreover, these prototypes smoothly guided the transition into development, ensuring that precise animation specifications were met.
Meet the Product
Want to explore the Mpreis Online Shopping experience? Visit the website here.
Ulrich Theilmann
Senior Director Digital | MPREIS
