METRO’s HoReCa food delivery service was recently rebuilt by software company freiheit.com technologies. From online ordering, to order processing, to "picking" orders in the warehouse with hand held-devices and truck loading, every process in the journey has been digitally transformed. Microservices now release automated live updates on a daily basis and the system is being rolled out internationally.
UX meets Agile
As the "UX/UI design team" on this project, John Grøtting and I worked in close collaboration with all vertical engineering teams, integrated into their agile development process. We communicated directly with international stakeholders at METRO.
included qualitative user research, the definition of overarching UX principles, interaction design, digital brand and UI design. While John worked with the teams building the back office and order processing systems, my focus was on the customer experience.
At the beginning of the project we collected insights and pain points through field research and interviews with our users: HoReCa customers and METRO employees. Throughout the project we conducted usability tests in Germany and France. We first used low fidelity prototypes (sketches, wireframes), then high fidelity prototypes (clickable and designed prototypes) and later the working software, depending on the development stage of the specific piece of software.
Key Insights & Solutions
HoReCa customers are constantly under time pressure, they order 2-3 times per week and usually know exactly what they need (key entry points = personal lists, search, previous orders, category browsing!). They often order while sitting in the restaurant off-hours (not at office desks), hence many still used fax order forms. Mobile devices make a lot of sense for them (mobile first!). Also, because they’d love to check inventory while ordering (offline mode!). Many HoReCa employees don’t speak/read the language of the country where they are working (requiring visual browsing, thumbnails in lists!). METRO employees on the other hand deal with many orders simultaneously and process massive amounts of information, at their desktop computers (expert users demand keyboard shortcuts).
Don’t organise chaos, eliminate chaos! We removed distraction that is not productive to the user flow. On every screen, we made certain data the center of focus. Together with the UX expert at METRO I created a concept for a global taxonomy master, which supports category specific faceted navigation. This is especially relevant in staple categories, like fish and meat (being able to filter by cut and origin), and strengthens METRO’s positioning as an expert partner.
Responsive UI design
The best UI is no UI at all! Speedy interaction equals user satisfaction, so the UI should never get in the way. A lighter UI means focus on the core task or information. We pushed for for intuitive technologies (speech, gesture, touch) more AI instead of UI. Typing on smartphones is a hassle so search suggestions (while typing) ordered according to defined boosting/relevance criteria improve the experience dramatically. Internationalisation was a special challenge for the UI design. For example, different countries display different types and numbers of prices. The lengths of prices (and words) differ quite a bit depending on the language and the currency.
Digital brand design
"METRO exists to champion independent business", offering an attractive blend of price, quality, service and expertise, tailored to the business owners’ needs. METRO is also a place where the business owner feels welcomed and valued, fueled by ideas that make his business thrive. This brand promise was paramount in our UX decisions and also the basis of a new functional and friendly digital brand design I created. The new UI design with its typography, icons, colours, use of photography and components resulted in an effort to build a global pattern & style library, driving consistency for branding across channels and countries. On atomic level it is based on the newly introduced font combination Roboto/Noto, which supports numerous languages, has great legibility and a friendly aura. It comes preinstalled in many operating systems and is license-free, which is an important consideration for an international rollout. The colour palette was updated to fresh and friendly. I also put together a global master library for visual category browsing, and provided art direction in a photo shoot.
While the MVP of this project focused on HoReCa clients, the next step is to bring these services to smaller B2B and B2C customers. Till Hinrichs and I created a concept and HiFi-prototype which integrates the efficient user experience built for HoReCa clients with the product features needed for a broader audience: various delivery options (e.g. Click & Collect), personalised promotions and relevant content.