2 UI Designers
1 UX Designer,
1 Front-End Developer

2 UI Designers
1 UX Designer,
1 Front-End Developer

Sketch, Jira

Sketch, Jira

Problems

Problems

With an update from the old design to the new design, without a UI Style Guide, there was no scalable approach for maintaining and extending the Design System for this product.

With an update from the old design to the new design, without a UI Style Guide, there was no scalable approach for maintaining and extending the Design System for this product.

Opportunity

Opportunity

Ensure a cohesive Product Design and User Experience

Ensure a cohesive Product Design and User Experience

Goals

Goals

Since I was familiar as a designer with brand identity guidelines transitioning to UI Style Guides was somehow easier because there’s overlap with crucial design components that must be included. Still the product was complex.

Since I was familiar as a designer with brand identity guidelines transitioning to UI Style Guides was somehow easier because there’s overlap with crucial design components that must be included. Still the product was complex.

Document relevant design components

Document relevant design components

Information that does not form an essential or vital part can make UI Style Guides bloated and hard to work with. So narrowing down the core content for documenting was important but also challenging.

Information that does not form an essential or vital part can make UI Style Guides bloated and hard to work with. So narrowing down the core content for documenting was important but also challenging.

Context of use and guidelines for specifications were an important part to include for the UI components.

Context of use and guidelines for specifications were an important part to include for the UI components.

The living documentation was a piece that needed to be shared with the Design & Dev team on this project that also fits into the broader IBM Design System & Design Language.

The living documentation was a piece that needed to be shared with the Design & Dev team on this project that also fits into the broader IBM Design System & Design Language.

Process

Process

In approaching this project, it was important to make an audit of the different UI components involved. For this I broke the UI patterns into components and smaller pieces that constitute them. Similar to dismantling LEGO interlocking plastic bricks.
To understand the dynamics and hierarchy there were a couple of versions for defining the categories and taxonomies involved.

In approaching this project, it was important to make an audit of the different UI components involved. For this I broke the UI patterns into components and smaller pieces that constitute them. Similar to dismantling LEGO interlocking plastic bricks.
To understand the dynamics and hierarchy there were a couple of versions for defining the categories and taxonomies involved.

To avoid inconsistency in color use, I defined the color combinations. For this I listed the colors and their HEX values alongside specific pairings and use examples.

To avoid inconsistency in color use, I defined the color combinations. For this I listed the colors and their HEX values alongside specific pairings and use examples.

Besides the main navigation, The BPM tool allowed to switch between the Designer and Inspector area. This allowed for the user to either build his own flow for processes or monitor the processes which were already active.

Besides the main navigation, The BPM tool allowed to switch between the Designer and Inspector area. This allowed for the user to either build his own flow for processes or monitor the processes which were already active.

Organizing and adding context for design instructions

Organizing and adding context for design instructions

The content for the UI Style Guide went through a couple of iterations. As aspects like hierarchy and the dynamics between components progressed so did the versioning and defining the categories and taxonomies involved.

The content for the UI Style Guide went through a couple of iterations. As aspects like hierarchy and the dynamics between components progressed so did the versioning and defining the categories and taxonomies involved.

Context notes were included for describing when they should be used based on the urgency of communication.

These status indicators were used to show that immediate user action is required—in cases when, there is a problem with the system, something has malfunctioned, or a user must confirm a potentially harmful action. For example alerts, exceptions or confirmations.

Context notes were included for describing when they should be used based on the urgency of communication.

These status indicators were used to show that immediate user action is required—in cases when, there is a problem with the system, something has malfunctioned, or a user must confirm a potentially harmful action. For example alerts, exceptions or confirmations.

Defining the core best practices for context of use was important. In this process I also defined the guideline for extending and building the iconography. Material Design was also used as a reference point.

Defining the core best practices for context of use was important. In this process I also defined the guideline for extending and building the iconography. Material Design was also used as a reference point.

The typography was better clarified upon documentation and some of the typography duplicates in use was identified and discarded.

The typography was better clarified upon documentation and some of the typography duplicates in use was identified and discarded.

I looked into designing for keyboard controlled users and aspects like colour contrast or font size. Background contrast is also a accessibility related aspect that was included.

I looked into designing for keyboard controlled users and aspects like colour contrast or font size. Background contrast is also a accessibility related aspect that was included.

The team was working on a visual uplift for the BPM app alongside other projects in rotation. Although the BPM UI work did not have the highest priority, we still took time to evolve the UI through jam sessions and other meetings together with our development and paired managers for this project.

The team was working on a visual uplift for the BPM app alongside other projects in rotation. Although the BPM UI work did not have the highest priority, we still took time to evolve the UI through jam sessions and other meetings together with our development and paired managers for this project.

In the process editor/designer area a developer can create different business processes. One of the uncovered pain points from our developers was the interaction when creating a new connected activity. The resulted diagram seemed untidy and the interaction for connecting activities was hard to control.

In the process editor/designer area a developer can create different business processes. One of the uncovered pain points from our developers was the interaction when creating a new connected activity. The resulted diagram seemed untidy and the interaction for connecting activities was hard to control.

When adding the follow up step the line is created automatically from the previous step to the new one.

When adding the follow up step the line is created automatically from the previous step to the new one.

Launching the DocMe Personal app in the app stores meant that we could be at the risk of getting slammed with negative reviews, which would harm our SEO value and ranking in the app stores.

Initially there was no system feedback included in the submit button.

I added the animated interactions for the success and failure use cases.

I added the animated interactions for the success and failure use cases.

Initially the documentation was spread across different files, from Ai files moved to Sketch files and into more consolidated versions of documentation in pdf files.

The solution for this challenge was to make the UI Style Guide accessible within the team from a centralised source. A good option at the time was using Confluence to store the documentation and guidelines.

Initially the documentation was spread across different files, from Ai files moved to Sketch files and into more consolidated versions of documentation in pdf files.

The solution for this challenge was to make the UI Style Guide accessible within the team from a centralised source. A good option at the time was using Confluence to store the documentation and guidelines.

The organisation in Confluence allowed for a more scalable approach to accommodate for version history and updates.

The organisation in Confluence allowed for a more scalable approach to accommodate for version history and updates.