Picture This (File Library)
Overview
w3 Publisher is IBM’s cloud-based website builder and hosting platform. It’s File Library was—ironically—one of my first projects on the team. Originally, I was tasked with performing user research, presenting my findings to stake-holders and iterating it’s design based on feedback. Because of how well it’s iteration was received, I was trusted to own the long term direction of the widget, including it’s migration from our team’s internal design system to IBM’s Carbon design system.
File library evolution from w3 Design System 5 (w3ds5), to w3 Design System 7 (w3ds7) to Carbon Design System (from left to right).
Scope
Visual Design
Refine wireframes.
Create documentation for developer handoff.
[Later iteration] Migrate the file library to the Carbon Design System
User Research
Performed heuristic evaluations 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.
Create lo-fi wireframes and prototypes.
Perform pre-launch Quality Assurance.
[Later iteration] Research how AI and automation can remove user friction.
Context
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 inquiries, concluding in a diversion of resources from projects and—ultimately—dissipating team impact on IBM business goals.
Business Goal
Improve the image management experience across Publisher sites by streamlining how users upload, find, and work with visual assets. The aim was to reduce friction in everyday workflows while minimizing reliance on internal team support.
Success Metrics
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.
User Experience (Legacy)
Uploading workflow. It takes a 3 clicks to upload an image to the site library (an additional 3 clicks to commit it to the site). Notice how the upload functionality routes to another page. The most unnecessary step this adds is clicking “Add Files” after uploading to return to the library.
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.
User Journey (Legacy)
Core insights & solutions (Legacy)
*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.
Commit 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.
Metric Outcomes
*Results measured at the end of the first first post-launch quarter.
43%* decrease in file library inquiries
1* major bug reported
9 second reduction
when uploading an image.
Exploration & Iteration
Around the post-launch half year mark, my organization was tasked with sunsetting all legacy design system usage and migrating all software to Carbon. Because of my familiarity with the product, I was put in charge of it’s design. Below is a walk-through of the finished product and some feature advancements that were paired with it’s release.
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.