REWE UI Vision

Creative freedom in a corporate setting

We designers seldom get the chance to re-invent the look of an established but antiquated UI. Most project managers are hesitant to believe that a fresh and cleaned-up look is worth the time investment, even if we all know that a cleaned space is an improvement in itself. At REWE the design team took it upon themselves to refresh the look and set fresh guidelines for all future UI updates.

 

Accessibility first, bias last

Even though they are quite well thought out, it is not enough to blindly follow the WCAG 2.1 guidelines. Designers need to mind the parts of society that may depend heavily on the services that they design. For online groceries, that's almost every adult. Average life expectancy in germany currently is 79/83 years, tendency rising.

Let's take my mother-in-law as an example: Woman in her 60s, technology novice, uses her smartphone and laptop for communicating with her family and some online shopping. Recently I asked her about her online shopping in general and what her experience with navigating different UIs is.

I never know where to tap, so I just tap everywhere. This mostly works. Mostly it's frustrating.

The statista data tells us that she will tap on UIs for at least the next 23 years, hopefully more. I want to design UIs for people like her, UIs that do not frustrate users for decades.

 

Shape recognition is most important to me, since our vision and memory works best on shapes. Interactive elments are clearly marked with a shadow or underline, to differentiate them from background shapes and container boxes.

 

Agreeing on UI

Anyone who worked with several designers knows the difficulty of getting agreement across all involved opinions. There are multiple valid solutions and convincing arguments for any visual decision. The designers at REWE got together and workshopped a solution: Every designer applies his expertise and best practices to a UI without external influence or constraints. The task was to build a mobile UI first for the shop start page, the recipe page, the basket view and an overview of all used elements. Then build the desktop breakpoint after figuring out what works on mobile.

When we all met again, we presented our designs to each other. Discussions quickly started about various decisions, like the corner radius and depth styling. We took a close look at every design and evaluated its strenghts and weaknesses. After the presentations we went through the separate UI element overviews to mix and align our best collective approach.

I wrote an UI element tester in codepen to test various settings and possibilities. Also for testing accessibility, which is currently impossible in most design tools.

See the Pen UI tester by David Jost (@davidjost) on CodePen.

 

The design system will get the new styling as a theme, which will be released after multiple rounds of user testing.