The task

The CWB version 2 was launched in January 2017 and has been used throughout the year by the first customers. I evolved from a pilot project into an essential intelligent learning system that can be trained and configured highly specifically for each application.

With the project to revise the code and to rely on angular material, the frontend team gave the impulse for a conceptual revision. Based on the experiences and feedback from customers, we developed a series of improved concepts and a new style guide including our own standard components.

The team
& my tasks

I worked together with the Director of Design, a Senior UX Designer, three frontend- and one backend developer.
After the design process, I was involved in the development and continued to work on improving the tool.

Goals

We set up a couple of high-level goals, which we wanted to reach by August of the same year:

• improving frontend code to make changes faster in the future
• creation of a uniform and modern style guide
• conception of basic UI elements that can be reused
• improved navigation within the program

Pain points

• implementation often takes more time than expected
• UI components are not reusable / must be reprogrammed each time
• navigation via a breadcrumb menu is not understandable
• interface doesn't provide enough information about whereabouts, important metadata and states
• only one application can be open at a time
• switching between applications leads to time-consuming data reloads
• more complex configuration dialogs are still too difficult to understand

Inspiration

_{& the decision to use Google Material}

We were looking for a way to save design time and investigated existing design systems that work well with Angular. Atomic Design and Material Design were shortlisted and we quickly chose Google Material Design.

Material Design is a very advanced design system with a wide range of existing components and a modern visual language. At the same time, we knew that we had to make a lot of adjustments so the Cognitive Workbench wouldn't look like a Google product.
That's one of the negative sides: We didn't want to look like Google, Theming outside the default definition is very complex. Material Design was also mainly developed for apps that use standard components - buttons, menus, icons, and so on.
But we still decided to do it.

Brainstorming

Within the UX team we printed screenshots, hung them on the wall and started marking everything that needed to be improved. We brainstormed initial ideas for necessary changes and small adjustments that could really improve the experience.

UX & UI Design

Equipped with strategy, research and many new ideas, it was time to think of a few design solutions.
One of the main goals was to align the platform with the design system.

By using the styleguide based on Material Design, we could move quickly from the first sketches to Sketch prototypes and Invision click dummies.
This allowed us to get feedback very early.

^{The concept}

Navigation

For navigation it was important to get away from a breadcrumb menu. The menu was the only point of reference for the user to understand where he was. We also decided to extend the header and enrich it with more information. Next to the name further information like description, creation date, language etc. can be displayed.

^{The concept}

Scenario Interface

One of the most important revisions was the scenario configuration. It should contain much more information and give a better overview, but also be visually appealing.

^{The concept}

Scenario - Configuration

Outdated configuration dialogs in CWB version 2. Two different configurations were needed: One to create a component and a different to configure the component

The configuration dialogs are the most difficult part of the application and have not yet been simplified. Creation and configuration were separated for technical reasons, there was no obvious workflow for the user.
At this point it was important to avoid the technical limitations and to offer the user a system that was as simple as possible. We opted for a kind of wizzard that partly guides the user through the necessary steps.

New configuration dialogs in CWB version 2 - one configuration dialog with two steps: First select what type of analysis, second configure the method.

^{The concept}

Scenario - Sharing

Scenario sharing was intended to create different user groups and assign rights to them. Since this system was not successful and there were some conceptual gaps, the workflow was ambiguous. That's why we developed a simpler, more standardised release concept.

^{The concept}

Exploration

Access to the apps was only possible via the now removed breadcrumb menu. Anyway, this solution was not prominent enough for the orientation of this platform.
For us it was important that several apps could run in parallel to jump between them and compare results.

Development

The developers were also part of the conception process and involved in the process from day one. They provided valuable insights and were critical to avoid decisions that would be too complex to implement in the current project scope.
We created the screen designs using our evolving component-based design system and frontend library.

Side projects

Only a part of the total work that took place during this period was described here. Further components of this project were:

• UI Styleguide
• Component library
• Distribution Page for our different domains
• Login page
• Legal pages
• New Interface for the project overview

Problems

_{that arised during the project}

One of the biggest challenges is that the CWB is not one single application, but a combination of many different applications. Each one had to be converted to angular material and updated to our new visual design. Only when each application is converted to the new framework can we'll save time - but code refactorings are complex and could not all be realized during the project.
In addition, both designers and developers had to spend a lot of time developing and modifying and applying a design system.