Picture This (File Library)

I led the User Research and Visual Design on this project. Redesigning the File Library was one of my first projects on the Publisher team. Originally, I was only meant to do the competitive research and present my findings to Publisher leads. Because of how well I handle that job, I was trusted to own the long term direction of the widget. I users and developers while managing stakeholder expectations.

Responsibilities

User Research

  • Perform heuristic evaluation of the current product and competitors.

  • Recruit participants and perform user testing.

  • Synthesize user data to pinpoint the primary pain points.

  • Present findings to Stakeholders.

  • [Later on] Research how AI and automation can remove friction.

Visual Design

  • Create wireframes and prototypes.

  • Iterate and document for developer handoff.

  • Perform pre-launch Quality Assurance.

  • [Later on] Migrate the file library to the Carbon Design System

File library evolution from w3 Design System 5 (w3ds5), w3 Design System 7 (w3ds7) to Carbon Design System (from left to right).

Overview

Problem

At the beginning of this project, Publisher’s file library was still in it’s infancy; it lacked workflow optimization, flexibility for varied use cases and—most importantly—quality assurance. These user pain points were frequently reflected in the support channel concluding in a diversion of resources from projects and, ultimately, dissipating team impact on IBM business goals.

Goal

The vision for a mature file library was to simplify sourcing and organizing images which, in time, would reduce support inquiries and the need for team intervention.

This was accomplished by:

  • Removing unnecessary bloat from the image uploading workflow.

  • Adding more ways to upload an image such as: URL scraping & stock photography.

  • Providing an intuitive interface for users to organize and preview their library.

Measuring Success

Reduce [file library] support inquiries by 25% within the first post-launch quarter.

Reduce the average of severe bugs reported from 4 per quarter to 2 per quarter.

Reduce the average time uploading a single image from 14 seconds to 7 seconds.

Legacy User Experience

What was the legacy experience? Based on user interviews, what were the most notable examples of the negatives? Which is most notable? Was there anything surprising about the experience?

Uploading workflow. It takes a newly uploaded image 6 clicks to be embedded on the page. Notice how the upload functionality routes to another page. The most unnecessary step this adds is clicking “Add Files” after uploading.

Committing workflow. Because the selected image is not in a padded container with a fixed size, a lot of real estate is lost on the page.

Legacy User Journey

Core insights & solutions

*Percentages are based on interviews with 12 employees that span various roles and organizations within IBM.

100% of users were unsatisfied with having only one way to source images

Supplement the customary drag and drop upload with image sourcing that compliment its’ deficiencies.

Image URL workflow. User interviews showed that downloading and re-uploading images in Publisher is a common pain point. The Image URL feature simplifies this by allowing users to directly link to images through pasting a web link.

Stock image workflow. This option eliminates the need to search the web for images by offering an extensive library of high-quality, professional photography.

91% of users quoted uploading images as “too long a process” or “tedious”

Reduce the time-on-task for uploading an image by optimizing the work-flow.

Re-vamped upload workflow. By combining upload functionality and the file library into one page, the workflow is less clicks and maintains a smoother velocity to completetion.

83% of users wanted the ability to organize their files

Add folder creation as a tool to enhance find-ability amongst team members and collaborators.

Folder organization workflow. Users can group images into folders to make chunking similar data and skimming their library easier.

66% of users wanted to see additional details about their files while navigating
the library

Add thumbnails to file names in list view.

Add tooltips to file names that truncates.

Thumbnail preview & title truncation tooltip. Users can utilize these tools for enhanced accessibility, version comparison, and contextual guidance, all without cluttering the interface.

66% of users found the preview page to be “repetitive” and “unnecessary”

Add preview box for images to standardize the amount of space they take up.

Combine preview and content options for increased utility.

Preview page comparison. An insight uncovered during research was that users don’t tend to notice additional steps in a workflow unless they detract or are required for advancement. So instead of attempting to remove a step from the workflow, it’s utility was increased by combining the preview with the content tab and removing the need to scroll.

Measuring success

43% decrease in file library inquiries

after the first post-launch quarter.

1 major bug reported

during the first post-launch quarter.

8 second reduction

when uploading an image.

Product iteration: Carbon design system

Image widget walkthrough created with IBM’s Carbon Design System.

Image editing workflow. With the inclusion of cropping and adjustment tools for images, users can now easily manage the dimensions and appearance of images within the platform, eliminating the need for third-party products.

AI-powered alternate text. By leveraging image recognition and natural language learning, we generated alternate text that is both aut-gerated and accessible.

Improved file drop-zone. To enhance task success when dropping files, we enlarged the file drop zone and emphasized the feedback area, all while maintaining a clutter-free design.