German food retailer REWE is undertaking various initiatives to minimize their environmental impact, promote social responsibility, and ensure long-term viability. This includes efforts to reduce waste, use sustainable packaging, source locally, support fair trade, and implement energy-efficient practices. REWE Sustainability Website is a platform that showcase REWE sustainability measures and how their customers can contribute to sustainability. REWE is aware that to achieve more environmentally friendly and socially responsible food system for the future, they and their costumers need to work actively together.
Sustainable food retailer Website Launch
Client
REWE - German Food Retailer
Roles
Lead Visual Designer | Accessibility
Methods
Workshop…
Visual Design Kickstart Workshop
REWE.de vs REWE Print/Social Media Style Guide
REWE Markt didn’t have aligned style guide for digital, print and social media platforms.
REWE.de is minimalistic, practical, accessible color contrast for digital usage but cold.
REWE Print and Social Media Style Guide is colorful, friendly, organic but unaccessible for digital usage.
Since it’s one of the most important Project for REWE this year, there are a lot of stakeholders involved, we decided to facilitate a workshop that will aligned different department teams vision on the visual image of the website.
In the workshop we defined those essential points: The REWE Sustainability Website should follow the print style guide - colourful, friendly, organic. But the colour contrast should be iterated and aligned to digital accessibility needs.
Desktop PENNY & REWE Job Search Platforms
Strategy
From the data collected from Tracking after the relaunch we learned that 70% user traffic came from mobile devices and only 25% from desktop devices. We showed the data to the client and proposed a strategy to optimise the Job Search Platform on mobile devices. Since we already have the Recordings from the Heatmap Tracking on the PENNY Career Website, we proposed to the client to use it and analyse the platform cost efficiently.
Goal
Reassure the efficiency of the current design for mobile devices.
Do research that will back up the efficiency of the current design.
Provide alternative solution if needed.
Use methodologies that are cost effective.
Research 01
We observed multiple recordings and learned user behaviours with Mouseflow. Mouseflow is a behaviour analytics platform used to optimise website experiences towards improving conversions. We used it to draw conclusions and shared heatmaps and session recordings with stakeholders to add visual context to our recommendations.
Behavioural Analysis
Difficulty in navigating between verticals. Search Field and Search Result was too far from each other.
Issues with discoverability.
Numerous clicks to achieve simple actions.
Users had a hard time finding the search results, after interaction with the filter. A significant number of users had to refresh multiple times their search result after using the filter which affected the time to task and the drop off rate.
Research Findings
Mouseflow
Research 02
Competition Analytics & Best Practices
After learning about the struggles of our users, we decided to do benchmarking beyond the direct competitors - beyond the Job platforms of discount retailers based in DACH region. We looked for search-filter-result features of well know platforms with big user traffic. We also did a research on best practices that are already well tested and have stated proves. In total we benchmarked almost 20 Websites with search-filter-result.
Lorem Ipsum
Research Findings
Mouseflow
Ideation
Since mobile devices have smaller screens but should not less informations than on desktop devices, we gathered research and had a quick ideation workshops involving open discussion with team members. We defined in the workshop our higher priority features and lower priority features.
Define
Filters and categories are a necessary standard that allows excluding unnecessary items from massive search results. That is why in status quo the filter was placed prominently after the search field and before the search result. The challenge is to present the most important information to the users clearly and coherently. We decided that options that allow users to personalise their search result should not interrupt the users with achieving their goal. The options of personalisation should be discreet but easily findable.
Solution
Interface Design
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
With the new UX solution we wanted to update the Visual Design of the Job Platform since it was adapted from REWE launch in 2019. We proposed a more fresh and young elements to the design guideline.
Mouseflow
Accessibility
We also paid attention to the European Accessibility Act (Directive 2019/882) which requires some everyday products and services to be accessible for persons with disabilities.
Mouseflow