IBM Catalyst Design 

In this project, I worked with a project manager, a developer, and 2 stakeholders from the IBM team to design one of the workstreams of the IBM account management platform, Catalyst. I owned and led the design of the Account Performance section and created it from scratch.

Timeline

4 months

(Jan 2021- Apr 2021)

My Contributions

Led design iteration, created wireframes, mid-fi, and hi-fi click-through prototypes. Owned the design and handover.

Teammates

1 Product Owner (IBM) 

1 Product Executive (IBM)

1 Developer (IBM)

PROBLEM STATEMENT 

Different levels of leadership at IBM manage a bunch of different accounts. It could be at “geo level” (eg. North America) or at “market level” (eg. the USA).

To help leaders better understand the performance of the accounts they manage, we have to think about how to let them better view each account's performance, get access to the report faster and serve the data they need efficiently.

DESIGN OUTCOME

I designed the Account Performance to help users easily get to the data they need by providing time frame selection, customizing the data table, and filtering out the range of the data they’re interested in.

KEY DESIGN CHANGE

Filter Side Panel

Before

There were too many controls above the table, such as dropdown menus, toggles, clickable icons, which confused users. Users didn't know what those icons mean and tended to get lost.

After

Improve ease of use by cleaning up the hierarchy of controls. Prioritize the features by revealing the most frequently used ones and hiding the less used ones in the side panel.

Period Dropdown

Before

The dropdowns to select the year, quarter, month and phase took up lots of space on the top control section, but users do not necessarily want such a detailed drill down.

After

Group the “time-related” dropdowns together to save space on the screen and make it more organized for users to make all time-related decisions.

Decimal Control

Before

The decimal icons are displayed directly on the screen but it’s not the priority for the users. The clickable icons might also lead to a huge increase/decrease in decimal display on screen which is not very usable in such a use case. This is not Excel.

After

As a secondary feature, it is included in the side panel. Users can select up to 6 decimals, which are the common use cases based on research findings.

Range filter

Before

There were several iterations but the feature was not robust. Initially, it’s in an expandable panel with only 2 factors to select, and then it evolves into 4 factors, so modal comes into play.

After

To make the operation more consistent, the range filter is also included in the side panel, so that users just need to go to one place. “Add another rule” is created to allow users to cross-check more complex conditions and add factors at will. 

Table view filter

Before

Users had to click on the icon to open up a modal to customize the table. The design itself was not difficult but users couldn't recognize the icon. Too much trial and error irritated the users.

After

Put the Table Customization in the side panel to avoid confusion and loss in the control panels. With the more frequently-used options revealed directly, users can easily select/deselect columns. 

THE IMPACT

I created the Account Performance section from scratch and designed the framework of filter for other workstreams to follow in the future.

" Natalie is an excellent UX designer! Proactive recommending the best options and alternatives, hyper-fast understanding our business model, and needs. We have been working with Natalie in our strategic WW Management tool managing +$20B business and indeed Natalie has been one of the strongest contributors in our UX design. "

Mayte Carrera Murillo
Kyndryl, WW Catalyst digital platform VP

THE PROCESS

The documented requirements

Understand users' goals and translate requirements  into visualization 

Our clients liked to document the requirements in the Excel sheet. I pieced the puzzle together by constantly asking what's the context of use, what's the user goal, what makes users happy and unhappy, making sure that I can translate the requirements into delightful experiences.  

Rapid iteration based on the design sprints

For each design sprint, I had 2 weeks to complete the design. Based on requirements from the product owner, I asked questions, iterated the design, and led the daily design review meeting with the product owner from IBM, making sure that the design meets the deadline and quality.      

The IBM product cycle calendar and the design iteration in Sketch file

The excel documentation and the demo meeting

Handover and demo meeting with stakeholders

After the design was approved, I documented different functions and use cases in Excel sheets. The documentation and Invision files were then handed over to the development team for implementation. I also led a demo meeting to walk through the prototypes and explain the feeatures to developers and stakeholders.  

REFLECTION

Guerrilla testing is a great way to uncover usability issues.

When working with IBM, I didn't have a chance to talk to real users since they're all high-level leaders. I found teammates/ colleagues could be quick and great resources to test out ideas and validate designs.    

Collaborate effectively by weekly design shareout.

I always like to view what other designers are working on. By weekly shareout, we can quickly give feedback, align the design of the products, and most importantly, share experiences to avoid repetitive mistakes.