METRO Delivery Service — Native Why GmbH / Strategic Brand, Product & Service Design

Designing an online grocery platform for hotels, restaurants and cafés

Digital Transformation

METRO’s HoReCa grocery e-commerce platform was 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.

Responsibilities

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.

Lean UX

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.

Field study

A METRO customer filling out his METRO fax order form in a hurry, just a few minutes before the lunch crowd arrives.

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).

Information Architecture

Don’t organize 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.

Intuitive & responsive UI

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. 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. 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.