logoPortfolioBenchmarksArtikel
nomitri/nomitri-hero.webp

Establishing self-checkout in Germany

This case study describes the evaluation and optimization of Nomitri's retail self-checkout app. The analysis was based on a comprehensive performance review of over 250 items. The app's overall UX performance is poor. Its UX is mainly counteracted by usability issues related to visually missing hierarchy, non-transparent communication, and non-existent design system methodology. Therefore, we created a scalable design system following the analysis, and the product's current MVP was redesigned based on it.

Innovator Nomitri develops sophisticated AI solutions that run intelligently compressed on any smartphone. The startup, founded in 2019, focuses on retail solutions for its first product. Visitors use their cell phones to conveniently and quickly add products to their purchase and then release payment via an app - autonomously and contactless. The advantage over Amazon Go & Co? No cameras or large server structures are required, and the video data remains on the user's smartphone. So retailers have a clear cost advantage, and users benefit from high data protection.

Results

Metro

as a partner

Edeka

as a partner

2.5m

funding

Metadaten

Industry
AI
Size
10-20 Employees
Value
10.000€
Tasks
    User Experience
    Design System
    User Interface
Tools
    Adobe XD
    Framer
Date
2021 - 2022
Website Link

The goal

Nomitri faces the challenge of selling the app as a solution in an upcoming presentation to retailers. At this point, the team does not have a designer. The app's interface was co-designed by the developers. The founders realized that the app needed to be more visually appealing and transparent. Nomitri needs to have a targeted and attractive design for the end-users.

Analysis

Procedure

We dove deep into Nomitri's vision during a one-day workshop with the founders and developers in Berlin. How should Nomitri be perceived on the market? Who is our target group, and what do they expect from the app? What data exists on user behavior that we can use for the design? Going into detail here is particularly exciting, as the workshop provides the basis for the subsequent success of the design.

Excursus: Dev & UX

The founders' goals were clear: they needed a solution that could be quickly adapted, focusing on aesthetics and a design that would increase the most valuable KPIs. However, it was equally important to learn how we give that design to the development team. After all, the most beautiful and thoughtful design is worthless if it disproportionately impacts development. Because of my prior experience in software development, we quickly gathered aspects to consider for development.

The current solution

Following the positioning, we worked together through the current solution of the app to understand and test all current and also future application areas for their functionality. We concluded the workshop with a definition and collection of user stories that would define the scope of the project:

  • Design Guidelines
  • Component Library
  • Content Guidelines
  • Journey & Wireframes
  • User Interface & Presentation

Design System: Communication

Basics

In the first step I created a design system that communicates with playful and colorful elements. Simple shapes for the components provide high intuitive understanding for the end user. The design system should help to make the app scalable and consistent. This is ensured by a color palette, a description of typography and spacing rules.

Colors
Colors

Communication Guidelines

The topic of communication has a high priority for the app. Since the user not always looking at the smartphone when scanning groceries and the AI still scans incorrectly on a few examples, different types of feedback are necessary.

Communicating feedback is one of the most important steps in ensuring that an artificial intelligence can effectively communicate its state and intent to its users. Integrity and openness in communication not only increase the perceived level of safety and compliance for users sharing information, but are also necessary to breathe life into data and add a sense of empathy to complex calculations and formulas.

Animations

At Nomitri, animations embody the startup's style, emphasizing the connection between elements, pointing out states and actions, and providing feedback. Furthermore, we use animations to convey emotions and allow artificial intelligence to communicate in a light-hearted way, increasing trust, safety, and compliance.

Scan Animations

QR Code Scan

QR Code Scan

By including a subtle animation, a scan function is perceived as more active. Nomitri uses the typical animation associated with scanning. A thin bar that moves from side to side, leaving a transparent rectangle.

Scan Dots

In animation, circles are one of the most advantageous elements, as their simple geometric shape makes them easy to understand and allows a variety of shapes and movements. In /nomitri/nomitri solutions, status and progress are communicated through sounds and dots accompanied by different motion paths.

Scan Blur

The Scanning Blur consists of two 45° rotated, highly blurred, cone-shaped radial gradients with 30% opacity, 75% of which are placed outside the top or bottom of the screen. They change and emphasize the current state.

Image feedback

Feedback Clouds provide a visual representation of scans that could potentially be improved. Users can see these when they need to clarify or correct an unknown event. This increases the learning curve for using the app correctly.

Design System: Components

Contrast as a challenge

While selecting the color values and creating the component, one difficulty in particular was highlighted: For the most part, the app displays the camera screen, which in turn faces the shopping cart from above. Supermarkets have different cart and floor colors, from light to dark. Through numerous contrast tests, I was able to find the best result: The UI is in a Dark Mode by default, with a darkening overlay above the camera and strong contrasts raised in color from white/light brown and black. Important elements are additionally framed.

Unique background

To create a sense of movement and liveliness, blurred moving ellipses are used in the background. Their structure consists of several circular geometric elements in the primary colors of the design system, which can be moved together and separately. However, movements should be used with great care when it is used with movement to keep the user's attention.

Atomic Design

For the development of design systems, atomic design provides a clear methodology. The ability to move from the abstract to the concrete is enabled by atomic design. This enables us to design systems that promote consistency and scalability while illustrating things in context. By putting a system together rather than deconstructing it, we can construct it from the beginning rather than picking out patterns after the fact.

Select Input
Select Input

Results and outlook

Prospects

Following the principle that "The best UI is no UI," improving AI can help reduce error rates and thus require users to interact less. In addition, large-scale testing of the app can help gather feedback from users and use it to improve the app.