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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
Results and outlook
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.