Data-driven design for a digital supermarket
Using eye tracking and data analysis to create targeted design solutions for a more efficient Migros homepage.
Initial situation
Many people in Switzerland visit the Migros homepage daily. The homepage itself has room for
improvement. It lacks a clear focus for visitors, as it is a collection of things that have grown iteratively over
the years, and it serves several purposes at once. In addition, the information architecture is rather complex and not customer-journey orientated.
With a focus on online visitors, Migros would like to have insight into customers: their current needs, habits, and interests. In order to gain these insights, different tools and sources can help. New
data will also be collected. A tool that will be used to learn more about customers is eye-tracking technology.
Project goal
The overall goal is to make the homepage a digital companion for Migros customers and their daily
grocery shopping experience. Based on empirical data, the homepage should provide value for
different types of users and their requirement profiles. It should also serve as a good starting point
for their continued user journey.
By analysing the current user behaviour and usage patterns with analytical data and eye-tracking
technology, the aim is also to provide the client with several possible design proposals and prototypes.
Heatmap
Heat maps visualise where users looked and for how long. Colour coding is used to show the intensity of the gaze: red areas indicate a high attention span, while green areas indicate a lower attention span.
Fixation Points & Saccades
Fixation points (blue dots) show where users paused their gaze to view content, indicating areas of high visual interest or cognitive load.
Saccades (orange lines connecting the dots) represent rapid eye movements between fixations, highlighting how users scanned the page.
Initial Homepage View
The redesigned Migros homepage introduces a new, more visually appealing and thematically focused entry point.
Products & Teasers
The reduced number of items displayed ensures that the presentation remains clear.
Additional/Secondary Content
Users have quick access to different product types. Users can switch between "New products", "Regional products", and "Organic products" by clicking on the corresponding badges.
Solution developed and its benefits
The main outcome of this project was the collection and analysis of empirical data on user behaviour on the Migros website. Usability tests, eye-tracking analysis, and think-aloud protocols provided valuable insights for targeted website optimisation.
Based on these findings, new design concepts were developed to address existing weaknesses while introducing a new perspective on user experience and interaction. The combination of empirical insights and data-driven design decisions provides a solid foundation for future optimisations and digital developments.
- Optimised homepage with clear user guidance
- Data-driven design solutions
- Long-term usability of data and designs
- Homepage with a clear purpose and user focus
- New design perspectives for Migros
Key terms
- Data-driven DesignA design approach that uses empirical data (e.g., eye-tracking, user analytics) to improve the user experience.
- Eye-TrackingA technology that tracks users' eye movements to analyse the distribution of attention and interaction patterns.
- Usability TestingA method of evaluating usability by observing participants as they perform specific tasks.
- Think-Aloud SessionA technique in which users verbalise their thoughts as they interact with a system to identify usability issues.
- PrototypeA first interactive model of a design used for usability evaluation and feedback collection
Customer
Migros Online AG
Yves Bilgerig
Limmatstrasse 152
8005 Zürich
Migros Website
Team
Noel Burkard
Salvatore Cuppuleri
Advisors
Prof. Dr. Anton Fedosov
Dr. Elif Gurcinar