Ecomix
Ecomix is a team-based UX/UI academic project focused on redesigning the online shopping experience of a supermarket chain. The goal was to create a more intuitive, efficient, and trustworthy e-commerce platform.
The goal was to design an intuitive, accessible, and secure digital platform that improves the way users search, buy, and manage products online.
This project explores the full UX process, from early sketches to medium-fidelity screens and interactive prototyping.
Ecomix faced the challenge of an outdated and inefficient website that did not support a smooth online shopping experience.
The existing platform negatively affected usability and limited the effectiveness of online sales.
Users struggled to navigate the site, find products, and complete their purchases, which created frustration and prevented Ecomix from meeting customer expectations.
This project aimed to redesign the website to create a reliable, responsive, and user-centered digital platform that supports both customer needs and business goals.
A comparative analysis of Pingo Doce, Continente, and Lidl was conducted to evaluate how existing platforms approach usability, information design, and user support.
Key evaluation criteria included interface consistency, micro-information, warnings, dashboards, and session management.
These findings were used to define priorities for Ecomix, shaping the information architecture, visual system, and feature set.
User research was conducted to better understand online grocery shopping behaviors, needs, and expectations.
The research process included online questionnaires and interviews, which helped define the target user and identify key habits, frustrations, and motivations.
This phase guided the overall design direction and ensured a user-centered approach.
The study involved 12 participants from urban environments who regularly use online supermarket platforms.
The research focused on how users search for products, choose platforms, and experience the purchasing process.
The collected data revealed common behaviors and recurring usability challenges.
๐ Key Insights
The research revealed that users value fast and efficient deliveries, clear product information, intuitive navigation, and reliable payment methods.
Frustrations were often related to complex interfaces, lack of transparency, and high delivery costs.
These insights directly influenced the platform structure and feature priorities.
Based on the user research, a primary persona was created to represent the needs, goals, and behaviors of typical Ecomix users.
Sara Santos embodies the time-conscious shopper who values clarity, efficiency, and reliability when buying groceries online.
This persona guided design decisions related to navigation, content structure, and checkout flow.
An empathy map was created to synthesize the research findings and better understand user behaviors, perceptions, frustrations, and motivations when shopping online.
This tool helped organize insights into what users say, do, see, and feel, allowing the design to focus on real needs and emotional drivers.
Wireframes were developed to translate research insights and user needs into a clear structure. This phase focused on defining layout, navigation, content hierarchy, and core user flows before applying any visual styling.
Low Fidelity Screen Sketches
Medium Fidelity Test Screens
A website map was created to define the information architecture of the platform and organize content in a clear, logical structure.
This step helped identify main sections, navigation paths, and feature priorities based on user needs and business goals.
Color Palette
The color palette was defined to reinforce clarity, trust, and freshness, aligning with Ecomixโs brand values.
The use of green communicates freshness and sustainability, while dark blue supports contrast, hierarchy and readability across the interface.
Typography
Roboto was chosen for its versatility, readability, and wide range of weights.
Its clean and modern appearance supports accessibility and ensures clear information display across different devices and screen sizes.
UI Components
Core interface components such as buttons, inputs, forms, and system states were designed to ensure consistency and usability throughout the platform.
Establishing these components helped create a cohesive experience and simplified interaction patterns across different sections of the website.
Iconography
A consistent icon set was designed to support navigation, actions, and product recognition.
Icons were kept simple and intuitive to enhance usability and reduce cognitive load during the shopping experience.
These high-fidelity screens present the final solution and illustrate how the interface supports the complete shopping journey, from discovery to checkout.
The focus was on clarity, efficiency, and trust throughout the experience.
The home page highlights categories, campaigns, and featured products, allowing users to quickly understand the platform and access what they need.
The layout prioritizes promotions and clear navigation to support fast decision-making.
Users can browse or search for products and apply filters to compare options. This screen was designed to make product discovery efficient and reduce the time spent searching.
The product detail page provides essential information such as price, unit, and related products, supporting informed purchase decisions and encouraging continued browsing.
The user can add the product to the basket and then decide whether to proceed directly to the purchase or continue searching for other products
The cart allows users to review selected items, adjust quantities, and prepare for checkout. The goal was to create a simple and transparent step before purchase confirmation.
Users can securely log in or create an account before completing their purchase.
This step was designed to minimize friction and clearly guide users toward checkout.
The checkout process focuses on clarity and trust, enabling users to confirm delivery details and choose a preferred payment method in a straightforward and secure flow.
A high-fidelity interactive prototype was developed to simulate a real online shopping experience and validate the main user flows, including browsing products, adding items to the cart, and completing checkout.
This prototype was used during usability testing to identify issues, refine interactions, and improve the overall user experience before final validation.
View the interactive prototype
Or visualize it below.
After developing the high-fidelity screens, usability tests were conducted to evaluate the experience and identify usability issues.
One test was carried out in a classroom environment and two with individual participants.
These sessions helped validate design decisions and highlight areas for improvement.
๐ Key Findings
The tests revealed important insights related to navigation clarity, visual consistency, and the product discovery process.
Some users experienced confusion on the landing page, where the browsing flow did not always match expectations. Feedback also highlighted opportunities to improve interaction clarity within the payment and checkout process.
๐ Interaction & Improvements
Based on these findings, adjustments were made to improve visual hierarchy, strengthen navigation cues, and refine the checkout experience.
These iterations aimed to reduce friction, improve accessibility, and create a more intuitive and coherent shopping journey.
Conclusion
This project aimed to improve Ecomixโs online shopping experience through research, design, and usability testing.
While users were able to complete purchases successfully, the tests revealed opportunities to improve visual coherence, navigation, and interaction.
The project highlights the value of user-centered and iterative design in creating clearer and more effective digital experiences.
