My role

UX Designer

I was the sole UX Designer on this project, responsible for all user research, interaction design and usability testing. My activities and deliverables included:

The design team within

Building a multidisciplinary team of designers and fostering collaboration

I realized early on that the project team was too big to effectively discuss design issues. So I rounded up the team leads and deputized them as official UX Designers. And this worked well for us, as my "design team" met every week to prepare for upcoming sprints.

Competitive analysis

Understanding the legacy admin system so we can improve it

The legacy admin system was a sprawling beast that no one on the team fully understood. In order to wrap my arms around it, I reached out to experts who helped me document its overall structure, navigation, key objects, and relationships between objects. This documentation (excerpt below) was invaluable as a reference throughout the project.

Initial thoughts

There were many elements of the legacy system that would not be needed in the new web app. 

User research

I brought a group of our target users together so the team could hear their experiences using the legacy system. 

Our users told us about their tasks

These tasks can be simplified in terms of creating and managing objects

Scenarios for creating and managing objects

Each object in the legacy system is created using a wizard, each is accessed via a list and a tree, and each is edited in a form. Understanding these fundamentals of the legacy system helped guide our design decisions. 

Contextual inquiry

Every object in the legacy system was jammed into a "child" window, as below. 

Specific pain points

• • Users forgot about minimized windows.

  • Users had trouble knowing which minimized window pertained to which object.

  • Users forgot that windows contained unsaved data. 

  • Users worked more slowly when dealing with the windows.  

Clearly these little windows were causing big problems.

Ideation

The team examined different solutions to the child window problem. 

A winning design emerged

We decided to embed the child windows in the parent window as tabs. The tabs would collect in a tab bar, and the system would indicate tabs with unsaved changes.

Not so fast

In our prototype we found that simply navigating the system generated lots of tabs, cluttering the screen and adding to users' cognitive load. We saw that the tabs would become more difficult to use when tab labels are truncated. And we saw that users would close tabs that were no longer needed, adding to their work.

We agreed to move forward with the design, but without the tabs.

Mockups

Our research told us that the legacy system relied heavily on a few UI elements: lists, wizards, forms, and a tree. For the new web app to be successful, it would need to adapt these elements to a web look and feel, as shown in my mockups. 

Here's how the elements flow together.

Prototypes

I created high-fidelity prototypes for all tasks that needed to be tested. This prototype is for a common task: creating a new object and opening it. 

Prototype: New Database Connection wizard

Usability testing

I conducted usability tests (lab-based and remote) at various stages of development. My tests confirmed that our design was intuitive and even celebrated by users.

What the new design accomplished

Our new windowless design improved on the legacy system in many ways.

Yes, and...

Circling back with users reveals a pain point

We had removed lots of little windows — which was a big win — but this limited how users navigated the system. Users told us they wanted to open multiple objects at once and then “bounce” between them. For example, users liked that they could enter data into a wizard, leave the wizard, grab data from another object, and then return to the wizard without having to start over. This functionality was a huge timesaver and we didn’t want to lose it.

In order to make the navigation more flexible, I suggested adding a “Recent” feature so users could easily return to recently viewed objects, including work in progress.

High-fidelity mockups

I worked closely with other UX and UI designers throughout this project to ensure that the finished look and feel adhered to IBM guidelines while staying true to the original design.

Recap

• • Challenge: Redesign FileNet admin console to be fully accessible. 

  • Built a multidisciplinary team of designers.

  • Collaborated with experts to understand the legacy system.

  • Interviewed users as a group and individually.

  • Contextual inquiry leads to key insight.

  • Iteratively sketched and mocked up solutions.

  • Created high-fidelity prototypes.

  • Conducted lab-based and remote usability tests.

  • Noted many improvements over the legacy system.

  • Talked with users and discovered new insight leading to addition of "Recent" feature.

  • Released on schedule. Yay!