Complete redesign of the Mercadona supermarket app with a focus on improving the layout and the user flow of the current site, and on creating a modern interface that is very user-friendly while allowing access to a lot of information easily.
This redesign aims to add value in terms of functionality and image where the current site is lacking.
While other supermarkets have created or improved and their apps to improve the user experience, Mercadona has remained with a very outdated website.
The site lacks design and functionality, and the shopping process become very tedious and difficult, due to the lack of base design principles like visibility (no pictures in each produtc) or feedback.
CURRENT MERCADONA SITE
My proposal uses a minimalist aesthetic based on material design, creating an experience where the information is clearly separated and presented in a way that facilitates the interaction and improves the user experience.
The new design focuses on unifying the variety of products and brands showcased and adds visual elements that help the user navigate the app interface.
Before the wireframing stage, I created a comparative among the available supermarket apps, looking for strenghts and trying to find the potential issues that the user may encounter during the interaction in order to translate those concepts into features.
After pinpointing the buyer personas and their goals I created frameworks and prototypes to explain the design principles and the content strategy.
Based on the potential user of the app, the current workflow can be a little bit misleading and confusing. As this site is targeting a broad spectrum of very different buyer personas, the user experience must be easy, intuitive and capable to adapt to the user needs during the interaction.
The app is based in a duo chromatic model, mirroring the primary and secondary corporative brand colors and their palette.
The redesign type scale provides the typographic variety necessary for the app content. All items in the type scale use Roboto as the typeface, including Medium and Bold.
To create consistency, all of the icons share the same grid structure and are constructed to remain legible and clear at all sizes.
The elements on the main site have been reorganized and redesigned to give all essential information at a single glance improving the visibility of the current site.
The app is designed with overlapping sheets, where the bottom sheet has the menu and navigation elements, the middle one includes the main information, and the top sheet presents the cart, giving the user a clear hierarchy.
HOMEPAGE
LATERAL MENU
The shopping cart can be accessed through a sheet found at the bottom right of the screen. As items are added or removed from the cart, the sheet dynamically updates to reflect the changes, giving the user clear feedback during the interaction with the app.
This sheet expand easily to show its content, and shows the cart in an -one click- always accesible button.
ALWAYS ACCESIBLE CART
OPEN CART
INITIATE PAYMENT
