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
Proposed design updates (using Invision)
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 allow users to integrate multiple tools into a deployment pipeline.
The As-Is experience was a wizard template which asked for user manual input.
PAINPOINTS /
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.
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 / 53 issues noted from testing listed in Github. I presented research findings back to stakeholders before UX improvements.
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.
4. DESIGN IMPROVEMENTS
1. Welcome page updated 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 Carbon Design system guidelines 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