College : SRH heidelberg, Germany

Company : ABB, Germany

Timeline : April 2019 - Sep 2019

Course length : 1 semester

IMPROVING THE USER EXPERIENCE AND USER INTERFACE FOR BATCHINSIGHT APPLICATION

Project Overview

This case study presents a project conducted under a non-disclosure agreement (NDA) for ABB BatchInsight, a B2B web application. The project aimed to redesign the user experience (UX) of their existing web application. Through research, analysis, and application of UX principles, the study identified positive and negative findings and suggested improvement ideas.

My role

In the project, I had the role of UX designer (UI redesign concept implementation) and UX researcher (theoretical investigation, usability study, heuristic evaluation) in collaboration with the Project manager and 2 developers.

Research

Conducted extensive research on the core principles of UX and UI design, exploring industry best practices, usability guidelines, and B2B web application design trends. This research formed the foundation for subsequent phases.

Analysis of Existing Application: Conducted a heuristic evaluation (10 Usability Heuristics by Jakob Nielsen) of the current web app, resulting in identifying positive aspects and areas requiring improvement. I used a tailored template evaluation sheet for each heuristic rule, measured the severity of each principal, addressed the issues and 12 recommendations.

Severity Rating: The issues were reviewed and scored, based on severity to see what problems are more critical to be prioritized. To quickly illustrate to the team the areas in which the app succeeds and fell short, the findings in each principle were averaged and the results were placed into a Radar Graph.

Severity was scored on a scale of 0 to 4 as defined in the table below.

Radar Graph

Feature Ideation & wireframing

I started the design process with some sketches and low-fidelity wireframes to collaborate with my team on my design ideas. Starting the design process with low-fidelity wireframes helped me greatly to iterate through many design options quickly. It allowed for brainstorming and visualization of ideas, which is crucial in the design process.

Redesigning 3 features in the product

The severity rating helped me decide to redesign the top 3 features that needed the most attention.

  1. Login page: Enter valid user credentials to enter the application.

  2. Analysis page: Extends classic process by combining the data and the process trend data, to provide a
    holistic/ comprehensive analysis for batch production.

  3. Configuration page: Consolidates all collected data into one repository of information.

*Images presented here are not actual designs.

Problem

ABB BatchInsight (BI) is not following the company's design guidelines, resulting in a poor user experience (UX) that presents significant challenges for users when interacting with the application.

Goal

  • Analyzing the current UI of the BatchInsight application.

  • Redesigning screens of the top features.

Results

  1. Redesigned Wireframes: Developed new wireframes for the three identified features, focusing on critical severity-rated issues. Incorporated improved navigation, enhanced interactions, and streamlined workflows.

  2. Enhanced Usability: The redesigned wireframes aimed to improve overall usability, providing a more intuitive and efficient user experience. Pain points identified during the heuristic evaluation were addressed, resulting in an improved user interface.

  3. Consistency and Branding: Ensured that the redesigned wireframes maintained consistency with the existing ABB UX guidelines and visual identity.

Login page:

The redesigned login page of the application is designed accordingly as specified in ABB CommonUX guidelines.

Original design

Analysis page:

Configuration page:

Redesign

Original design

Redesign

Original design

Redesign

What I learnt

  • Designing according to ABB design guidelines (text, icon, images, etc.) was exciting to learn. However, the thorough research into the topic helped me gather the required knowledge and gain the competence to finish this thesis.

  • Feedback from team members can’t be overestimated; Combining the feedback from professors/academia and industry experts is a good development opportunity for the project.

Acknowledgement

It was the most challenging UX project I've accomplished. Thus, I would like to thank Dr. Chaojun Xu, my thesis advisor at ABB, for giving me the opportunity to do my master's thesis on a very challenging and interesting topic. I would also like to thank my other colleagues at ABB for all the help they have given during the thesis work period.

See other projects:

SaaS product

 

SFO Airport

WHCC website