How do you design a key management app?
This was exactly the question we asked ourselves at the start of development. As a UX designer, designing the web app was and is an exciting and challenging task. Log+Key makes it possible to manage keys and other objects digitally – conveniently via smartphone, tablet, desktop or a terminal. Using NFC tags, objects can be scanned for checkout or return and recorded automatically, digitising the key management process.
But how do you design an app like this? This article aims to shed light on the challenges, requirements and approaches involved in designing such a web app from the perspective of a UX designer.
First challenge: something new with nothing to compare it to
How do you design something that doesn't yet exist? As there are hardly any comparable apps with a similar range of features, we had to start "from scratch" – this is a particular challenge, but it also offers new possibilities and a design process from a fresh perspective. What is especially important when designing on a blank sheet of paper?
User-centred design: This design method involves researching the needs and expectations of potential users in order to understand their workflow, pain points and wishes. This helps us to align the design process with users' actual requirements.
Early prototyping and testing: To validate our ideas, we test prototypes at very early stages of development in order to gather feedback early on and ensure that our design decisions are based on real user experiences.
Agile development: This allows us to respond flexibly to changes and to the requirements of our pilot customers while we continuously improve the application. In short development cycles, we can respond to user feedback and evolving requirements.
Usability for inexperienced users
Since Log+Key is used as an application within companies that have previously managed their objects or keys manually, and the app is intended to take the load off staff, one of the biggest requirements is to make usability as simple as possible despite the additional requirements and features. The following points are important here:
Intuitive UI: So as not to overwhelm users without app experience, we develop a user-friendly interface. This involves placing buttons and options in intuitive spots and avoiding superfluous elements or technical jargon. Above all, the app's terminal solution, which is also used on site at companies by external staff or third parties, must be pared down, clear and understandable for everyone.
Accessible design: We ensure that the application can be used by people with different levels of knowledge and ability. This involves clear and easily understandable elements, high contrast, legible typography with clear hierarchies and the use of colour as a supporting (rather than a necessary) element, as well as the use of plain language.
Onboarding elements: We introduce easy-to-understand onboarding elements that help users when they use the app for the first time. These elements guide users through the most important functions and show them, for example, how to scan keys or other objects. The whole thing is supported by explanatory animations and text.
Integrating new requirements and desired features
During the design and development process, new functions and requirements also arise before release that have to be integrated into the existing layout. This requires careful planning and a considered approach.
With Log+Key, for example, the original idea was geared towards managing keys. But over the course of development, new requirements emerged: customers wanted the option to scan objects other than just keys, and needed additional features such as the ability to capture signatures at checkout, to store photos of keys, to view changes to the keyring, the option to organise objects into groups or to define different role assignments for users. These additional requirements brought a challenge with them: how can we design the app so that any new features can be integrated easily and seamlessly, without compromising the usability and performance of the application? One important building block for us in making this work:
Modular elements: The application and individual elements were designed from the outset to be modular and extensible. This makes it possible to add new functions without major restructuring. The card element for objects, for example, can be used for the most diverse functions with slight variations. In this way, a card element for keys becomes a card element for the most varied objects or users through different icons and colour gradations.
Brand identity, aesthetics and other points
Uniting the aesthetics and brand identity of Log+Key with the web app is also a challenge: the goal is to design an intuitive, simple and professional user interface that is not only functional but also aesthetically pleasing, while at the same time matching the product's brand identity.
Consistency: Creating a consistent user interface across all platforms is an important factor. This involves designing responsive UI elements, colour schemes and interactions that feel good on different devices and screen sizes. Through highly modular and simple design elements with memorable typography and distinctive colours, consistency is ensured across all devices.
Micro-interactions: The relatively "simple" design elements are livened up with a clear use of colour and imagery. Micro-interactions bring an application to life and give users a sense of control and understanding. When designing Log+Key, the task is to integrate these micro-interactions skilfully in order to improve the user experience while also incorporating the brand identity. For example, there are explanatory animations during the login or scanning process.
Visual feedback: To give users immediate visual feedback, animations and visual effects are integrated. A successful NFC scan, for example, is accompanied by a green confirmation animation, while error states are shown with eye-catching warning symbols and red highlights. This likewise improves the user experience and offers the opportunity to stamp the brand identity onto the app.
Aesthetic design and consideration of the brand identity are crucial to fostering a positive perception of the Log+Key web app and building trust with users. The harmonious integration of aesthetics and brand identity is an essential step in creating a web application that is both functional and visually appealing.
Conclusion?
All in all, designing the Log+Key app was and is a holistic challenge. By carefully considering usability, accessibility, feedback, modularity and aesthetics, we can design a high-quality application that is both user-friendly and functional. The close collaboration between designers, developers and partners/customers was crucial to overcoming these challenges successfully.
The principle of iterative design is enormously important in this. Log+Key is always being developed further, tested, changed, improved and adapted to new situations in order to meet even the very specific requirements that our customers have of our app.
