After the previous conception has clarified what the application has to do, the next work steps will clarify the two other elementary conception questions before development can begin.
UX/Interaction Design: How the application will work
The elaborated user stories and the functional requirements derived from them form the starting point for the user experience and interaction design. Here we transfer the defined functionality into a suitable user guidance (e.g. in the form of a navigation) and optimal usability (User Experience/UX). Within the framework of interaction design, the usability of the application on mobile devices is also conceived (Responsive Design). Finally, we provide the results in the form of schematic application drafts (wireframes). If required, certain use cases (sequence of user steps) can already be tested with the help of the wireframes by means of simple click prototypes within the framework of initial user testing.
Use Cases
With use cases we describe the various user processes as a sequence of interaction steps. Use cases are represented textually, by means of a flowchart or usually by wireframes. They form an important part of the interaction design.
Moodboards
Mood boards serve to convey visual ideas and concepts by presenting initial taste patterns for the look and feel of page content or navigation elements at an early stage in the design process. The focus is not yet on details, but on an overall impression of the design that can be grasped intuitively.
Pattern Lab
With the Pattern Lab we create a digital style guide. In it, we collect all the UI components needed on the website. In this way, the Pattern Lab forms a defined construction kit ("atomic design"), from whose individual elements new page elements can be created.
UI/Visual Design: This is how the application will look.
In the third step, the visual design, we create the user interface of the application. This is usually created on the basis of the corporate design specifications. To this end, we adapt colour schemes, typography guidelines and other CD elements for use in the digital space. Missing components are developed on this basis. When developing visual concepts, we use mood boards to approach a common design understanding. The focus of the design is always on achieving an excellent user experience. Within the framework of visual design, the most important application components are developed and coordinated as screen design. In addition, we systematically summarise all the graphic principles and individual components of the application in a pattern lab and thus make them available in an optimal form for the technical implementation.