Versioning and Data-Migration UI

Enterprise Software - Web Design

Project Overview

Customer:
Role:

Methods:

Automotive Industry
UX / UI Designer & Frontend Engineer for Lufthansa Industry Solutions
Design Thinking workshop with Users, Prototyping in Sketch, User Acceptance Tests, Focus Groups

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

My Contributions

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Development of information structure & workflow based on requirements & user research ⏤ Creation of Design Thinking workshop ⏤ Moderation of the workshop ⏤ Specifying the user requirements based on workshop results & usability standards ⏤ Creation of different interaction & UI solutions as screens or prototypes in Sketch ⏤ Evaluation of solutions with users.

Final design

Final UI of the Change Report.
Problem
The creation of the feature "change report" was the first implementation of a user centered design approach within my development team. First I conducted a design thinking workshop with stakeholders & users to gain insights about there daily business and tasks. Their current work reality was getting datasets in form of excel sheets. When there was an update by another department of the company for the data, they needed to check their excel sheets line-by-line to see if their current work complies with the updated excel sheet.

Concept
The main part of the design concept was to figure how to simplify these changes and how to support the user by working through hundreds of them. The main approach was to automate changes by the system but keep the user informed and in control as much as possible.
I created different combination of components & interactions. These variations where evaluated and prioritized by the users during a focus group session. Another difficulty in the design was not to repeat the functionalities we already had implemented of their main tasks to adjust the data. After changes where received, we needed a smooth way to use the interfaces & interactions the user already knows and to combine them with the new implemented change report.

Design Process
I started the first iteration with Wireframes in Miro, which were then turned into high-fidelity screens using Sketch and the customer's Design System.
We priorized the features needed for the MVP based on user evaluation of variants of different interaction concepts. At the same time, we explored all the user requirements to define the vision of the whole feature. On the following screens, you see the process of optimizing the user workflow & the related task objects.  After the screenshots of the concept phase, you find a screen of an iteration.
Change Report
Web Designer
Nov 2021 — Mar 2022
A user feedback technique of a Miro board using votings for different ui elements for selection.

User feedback on components

The users voted on their most wanted UI-element to switch between lines in a Miro board session.

Evaluating the right structure of the task objects

This Miro screenshot shows my placeholder-based concepts which I used to evaluate with other designers and the team which interaction structure we want to choose.

A view from the concept phase. The different parts of the task are structured with different layouts using placeholders. So we can focus on interaction and workflows.An iteration of the change report showing a stacked view of lines as a selection feature and quick action buttons.

Iteration with Low-Fidelity Prototype with CI Design System

This iteration included the whole user journey of the user. We did a Cognitive Walkthrough of the interaction and removed the feature "Quick Action" for most of the use cases and the repeated view of the detail informations.