UX Design Portfolio - Kimberly Gassner

Redesign Web Application for Communication Nodes

Category: Web Application • Time: 6 Months • 2022

Redesigned the UX and UI of a web application for controlling and configuring communication nodes, creating a new concept and visual design. Implemented selected interface components in HTML and CSS and handed over to the development team for completion. Due to the proprietary nature of the application’s functionalities only parts of it can be shown publicly.

Results

A new concept and responsive UI design were developed to simplify the user experience and reduce overwhelming information.

Problem Statement & Goals

Redesign of a web application for controlling and configuring communication nodes. The goals of this project were to improve the usability and visual design by creating a new concept and applying the CI of the company in the UI design

Users

Technical personnel of police, fire departments and disaster management

Role in Project

Sole UX Designer within the Software Team.

My role was to create the new concept and design of an exisiting UI with the objective of improving usability and taking into account the new corporate design. Additionally I implemented parts of the responsive UI in HTML and CSS.

Design Process

UX Review

As a first step the existing application was reviewed and potential improvement points were identified.

User Research

After that I planned and carried out three interviews with fire department personnel.

Additionally the development team was asked to contribute to the creation of the new concept by explaining the functionalities and defining user requirements.

Based on platform reviews and user interviews, several improvement points were found, some examples include:

Low contrast and small fonts affected visibility in outdoor use   → Increased the contrast and font sizes to enhance readability in all lighting conditions
Overwhelming navigation due to too many options being visible at the same time → Redesigned the navigation structure and chose an accordion that can open and close depending on the users needs
Help section wasn't visible at all times and users had to search for it   → Help is aways visible in a section on the right side providing information about the technical details and options
Most users were either regular employees or professionals familiar with the platform. → Expert mode option depending on knowledge was moved into the settings menu

New Concept

Based on these insights I created a new concept and the project manager as well as the developers were included in the review of the paper prototypes. After further iterations, wireframes were created and discussed by the team.

UX Review

As a first step the existing application was reviewed and potential improvement points were identified.

User Research

After that I planned and carried out three interviews with fire department personnel.

Additionally the development team was asked to contribute to the creation of the new concept by explaining the functionalities and defining user requirements.

Based on platform reviews and user interviews, several improvement points were found, some examples include:

Low contrast and small fonts affected visibility in outdoor use   → Increased the contrast and font sizes to enhance readability in all lighting conditions
Overwhelming navigation due to too many options being visible at the same time → Redesigned the navigation structure and chose an accordion that can open and close depending on the users needs
Help section wasn't visible at all times and users had to search for it   → Help is aways visible in a section on the right side providing information about the technical details and options
Most users were either regular employees or professionals familiar with the platform. → Expert mode option depending on knowledge was moved into the settings menu

New Concept

UX Review

As a first step the existing application was reviewed and potential improvement points were identified.

User Research

After that I planned and carried out three interviews with fire department personnel.

Additionally the development team was asked to contribute to the creation of the new concept by explaining the functionalities and defining user requirements.

Based on platform reviews and user interviews, several improvement points were found, some examples include:

Low contrast and small fonts affected visibility in outdoor use   → Increased the contrast and font sizes to enhance readability in all lighting conditions
Overwhelming navigation due to too many options being visible at the same time → Redesigned the navigation structure and chose an accordion that can open and close depending on the users needs
Help section wasn't visible at all times and users had to search for it   → Help is aways visible in a section on the right side providing information about the technical details and options
Most users were either regular employees or professionals familiar with the platform. → Expert mode option depending on knowledge was moved into the settings menu

New Concept

UI Design and Implementation
Afterwards the UI design was created based on the CI and design guidelines of the company. The final design (responsive for laptop, tablet and mobile phone) was implemented by me using HTML and CSS and handed over to the development team for completion.

Conclusion

Con

clusion

An improved concept and UI design of the web application was developed. The challenge for this project was that gathering information from users was limited. For this reason, I tried to collect as much information as possible, from the engineers and developers working on the product.

Especially important was to acquire an understanding of the technology of the communication nodes and the use cases. Further feedback from users currently working with the product would help refine the UI and ensure the application continues to meet operational needs.

The web application was developed and is currently being used by technical staff of police, fire brigades and disaster management.

Location

Copenhagen, Denmark

Munich, Germany

Contact

LinkedIn Profile