Blogs about Jazz

Blogs > Jazz Team Blog >

What’s new in IBM Engineering Lifecycle Management 7.0.1 – UX Modernization

Beginning with ELM 7.0, we embarked on a journey to modernize the user experience across the solution, driving greater consistency in terms of visual style as well as function, and simplified workflows for both end users and administrators. In 7.0 and 7.0.1, our focus is on the visual style while also progressing designs to deliver more impactful updates. To be sure, with these two releases we have just gotten our feet wet, but our intention is to communicate our vision, get some early feedback and dive in!

ELM 7.0

In 7.0, we began our visual refresh conservatively, providing updates to the login screen and the banners. We also delivered updated UIs for Report Builder and My Stuff to bring them in line with the rest of the ELM solution in terms of a simplified color palette.

Login

The changes to the login screen are basic: modernized look and feel and simplified color palette:

Banners

Updates to the banner are somewhat more significant.

One key change is the display of the product name. As part of the modernization effort, we also rebranded our products in 7.0 and the banners now show product names, rather than the application names. For example, instead of Change and Configuration Management (on the Rational Team Concert banner), we now display IBM Engineering Workflow Management. A relatively minor update, perhaps, but one key benefit is that end users can easily see which product they are in and use social media to learn more about it by searching for the product name. In the past, this was complicated by the fact that product names were not prominently displayed.

Other obvious changes include the color of the banner and the replacement of the “Home Menu” with a “Hamburger Menu” in the top left corner. There are no functional changes in the banners in ELM 7.0.

Report Builder & My Stuff

Two features in ELM with much different visual style than the rest of the solution are updated in 7.0: Report Builder and My Stuff, as shown in the images below. Note that Document Builder is similarly updated in 7.0.1.

 

 

As with the banner updates, there are no functional changes to these applications in 7.0.

ELM 7.0.1

In 7.0.1, we progressed the visual refresh focusing on component updates, including buttons, tabs, breadcrumbs, links and modal dialogs. In the full page example below, you can see the culmination of those changes.

Let’s dig into the specific component-level changes.

Buttons

Perhaps the most obvious visual update is the buttons, but there is more to this change than meets the eye. Across ELM, the buttons are not only more prominent and based on the simplified color palette, but they also are consistently positioned and convey a meaning. For example, there is always one primary button per page or modal dialog. Generally, there is only one secondary button, which conveys the opposite action of the primary button. For example, Save would be primary and Cancel would be secondary. All other buttons are tertiary, for example helper buttons for fields. Positioning of these buttons is consistent across the solution so that the meaning of them is well-understood in any context.

As an example, look at the difference between the login dialog in 7.0 and what you will see in 7.0.1:

And here we see a typical artifact edit page showing the changes to the primary and secondary buttons.

Modal Dialogs

Modal dialogs are simplified in terms of visual style and button treatment.

Here we see a danger dialog, which includes the prominent red button calling attention to the data destruction that will result from this action:

 

Another example is a typical dialog in which some action is being performed. There are some style changes to note here that are consistent across ELM (in addition to the obvious button updates):

  • The primary button is now always on the right
  • Full-bleed buttons provide large, consistent landing targets
  • All dialogs include the x in the top right corner to enable you to close the dialog

Tabs, Links & Breadcrumbs

Finally, let’s look at before and after images that highlight tabs, links and breadcrumbs.

This first image shows a dashboard in 7.0 and then in 7.0.1. Notice the link and breadcrumb use consistent colors, so that you always know when something is clickable. Also, the tabs no longer look like a file folder, the border or outline on tabs has been removed.

In this second image, you’ll notice the same visual style on a page other than a dashboard, demonstrating that updates to tabs, links and breadcrumbs is consistent everywhere.

If you’d like to learn more about our process for transforming the user experience anchored on design thinking and Carbon design patterns, visit the IBM Design Language and Carbon Design System web sites for background.

As always, we value your feedback and would love to hear what you think about these updates so far. While our modernization effort progresses in the next release, you will see incremental updates that begin to address more of the functional consistency and simplified workflows with each milestone driver. Details will be captured in the New & Noteworthy documents so be sure to follow us along this journey!

 

Amy Silberbauer

IBM Engineering Offering Management