COMPANY / IBM
ROLE / Designer working with a senior designer, a senior UX researcher, 2 product managers, and 4 developers
TOOLS / Sketch, Invision Freehand, Adobe Illustrator, Mural, Github, Slack, Box, WebEx
TIMELINE / 9 months
I worked with a Senior Designer who recruited and prepared research plans. I attended research calls, asked questions and synthesised findings. I created mid-fi to hi-fi designs using Invision and Sketch. I also created a UX guide for our DevOps team to scale these UX and design improvements across the catalog.
Proposed design updates (using Invision)
Proposed design updates (using Invision)
Updated designs in production
Updated designs in production
1. AS-IS vs. TO-BE
AS-IS / Built upon Bluemix (old infrastructure which was v1 for IBM Cloud), IBM Toolchains aimed to allow users to integrate multiple tools into a deployment pipeline. 
The as-is experience was a wizard template. It had a low Toolchain provisioning success rate due to users being asked to manual input data.

PAIN POINTS / 
1. Users were not notified of prerequisites required for each template. 
2. If a user did not have cluster or configuration details ready, they would have to leave the template, and then restart the experience from scratch. 
3. There was no validation method until the final step, which created a large error rate and frustration for customers. 
4. Back-end could not be edited due to dependencies, so only frontend UI changes allowed.

TO-BE VISION 
To improve guidance and 'getting started' information in IBM Toolchains experience. 
The design should guide users through an integrated set of tools to build, deploy and manage their apps. This should give options to integrate other IBM services, open source tools or third-party tools that make development and operations repeatable and easier to manage for customers. 
Users should be able to successfully configure and deploy a toolchain without error.

Catalog of toolchains updated, with filters based on use cases

2. USABILITY TESTING
TESTING / 6x1 hour remote usability testing sessions with external users. 
USERS / Developer, Architect & Operations archetypes who use competitor monitoring platforms. Roles include Machine Learning Engineer, Senior DevOps Engineers, Software Developers  at Enterprise level companies​​​​​​​
COLLABORATION / I worked with a Senior Designer who recruited and prepared research plans. I attended research calls, asked questions and synthesised findings.

Process of mapping research findings to existing product

3. RESULTS
TESTING RESULTS /  I presented research findings back to stakeholders before UX improvements. 53 design issues generated from research were listed in Github.
ISSUE CLOSURE / Critical: 13/13 closed, Recoverable 16/20 closed, Minor 13/20 issues closed within three months.
UX GUIDE / With input from our lead DevOps engineer, I designed a UX guide on how to implement these changes across all existing and future toolchain templates, including those outside of DevSecOps. This is to allow for scalable UX improvements and to create consistency across the Toolchain template suites.

4. DESIGN IMPROVEMENTS 
1. Welcome page created to include pre-requisites and important links at top of screen.
2. Information hierarchy and consistency was implemented across steps. This included documentation links and a visual diagram of how the toolchain would be set up.
3. Fetchers were added to input fields to automatically fetch user data from their account or external repository. 
4. Toggle was used to hide 'advanced' configurations so novice users could provision a toolchain successfully.
5. Patterns were updated to match IBM's design system, Carbon Design system, to ensure consistency with rest of IBM Cloud PaaS offerings.
6. Error validation was included at end of each step, rather than at end of flow.
7. 'Skip' button to added to allow users skip any optional steps. This button would open the next mandatory step, with default settings being applied to in-between steps, reducing time to deploy.
8. Error messaging updated to include remediation details, next steps and any necessary documentation links.
9. Summary of configuration setup was added as a final step, so users can confirm configuration details before they deploy the toolchain.
10. UX guide created and shared with stakeholders to allow consistent improvements to be implemented across the IBM Toolchain template catalog.

Example of 'Advanced' configuration option and fetcher

You may also like

Back to Top