IBM Navigator

Lead Designer

Created a unified experience for business users to access and work between their applications and dashboards.

The context

IBM Cloud Pak for Automation helps businesses boost their efficiency by automating and streamlining complex processes. The platform includes a low-code application builder to create UIs to be powered by IBM automation services.

Historically, IBM Navigator has served as the portal for business users to access these custom-built applications. As IBM broadens it's offering of IBM automation services, there are more applications and tools coming into Navigator.

The goal

With this proliferation of automation tools, there was a need to rethink how they are made accessible and presented to end business users in the Navigator environment.

My Role

As the Design Lead of this project my responsibilities included

  • Collaborating with product managerment and development to define the strategic vision
  • Meeting with sponsor users to collect feedback on design prototypes and iterate accordingly
  • Establishing the information hierarchy and interaction patterns for Navigator
  • Delivering high fidelity designs and working with developers through implementation
Understanding the problem

I started by collaborating with my team of product managers, developers, and architects to map out the current capabilities of IBM Navigator, and how we might extend them so enrich the overall experience for end users.

Personas and needs statements

I hosted a virtual workshop with my team to identify the real needs and core tasks of our primary user groups.

Information hierarchy

I made quick and rough wireframes to map out how to arrange the necessary features and components in the Navigator UI shell. I took inspiration from applications like Slack and Mural which also act as launchpads for different channels from different workspaces.

Final designs

After a few rounds of iterations with my team, I came up with a final design for the Navigator shell for business users. You can see some example screens below or check out a click-through prototype.

Landing page

Our MVP inccluded a brand new landing page which includes a full menu of all of the applications available when a business user logs in.

Dynamic tabs

One of the most important needs and requirements we identified for business users is the ability to launch and jump between multiple applications at oncce. To enable this capability I developed a dynamic tabbing pattern which would enable business users to open multiple applications at once.

Persistent menu

Business users can use the persistent left menu to launch new application tabs from anywhere in the Navigator experience.

UX Guidelines

I worked on the design and interaction patterns of the Navigator shell, but it was also my responsibility to promote consistency for the apps getting deployed into the Navigator environment. I published a set of UX guidelines to share best practices to ensure incoming apps would harmonize well with the Navigator shell.

User testing results

Using the click-through prototype, our research team conducted a remote moderated usability study of the Navigator experience for business users. The goal was to evaluate the ease of use for completing common tasks.

  • There were 8 participants from various Human Resources roles.
  • All were asked to complete 5 tasks involving launching and navigating between multiple applications in Navigator.
  • Task completion rate was 98% across all participants

The high succcess rate on all tasks demonstrated a efficient degree of learnability of the plaform.