IBM Cloud Object Storage

Cloud Object Storage

Definition

An in-context browser for IBM's Cloud Object Storage service.

Role

Design lead

Tools

Figma, Adobe illustrator

Duration

4 months

Overview

The Cloud Object Storage Browser experience provides a way for users to browse and select buckets, objects, or prefixes while staying in context of IBM products that integrate with Cloud Object Storage. It's used within services that require a storage location when a user needs to determine where an object is located or where an object needs to be stored.

My Role

I had discovered the need for a component that can easily be integrated into multiple different IBM services that use Cloud Object Storage while I was redesigning IBM Cloud data engine. I was the design focal for this project with the overall goal being the launch of the component within IBM’s internal design system.

Our Users

Job

When interacting with a data lake a SQL developer can query, sample, and clean messy data to make it usable for further analysis in data science science tools.

Responsibilities

Persona

Jenny the

SQL Developer

Write SQL statements to prepare unstructured or messy data for data science.

Use ad-hoc queries to determine correct result then automate via the api.

Create metadata table definitions of data in Object Storage for performance gains

Relevant IBM Cloud products Catalog, Documentation, Data Engine Object Storage

Research

While working on the browser, I‬ spoke to a number of development stakeholders on the overview of their products and‬ their relationship with Cloud Object Storage in order to gain a better understanding of what would‬ be helpful in the browser and conducted an initial benchmark study with the following results.

Issues

Users struggled to find what they could query, especially what they could query from COS
Users did not expect/were unfamiliar with querying from COS URI (or something like it), users expected to query a table.
The sample SQL statements were helpful for users who discovered them. However, the hopscotch tour did not reliably trigger. This blocked some users from quickly discovering the sample SQL Statements

Recommendations

Include a UI element like a side panel that enables users to connect to resources like COS and search/find data they can query (similar to what what AWS Athena and Google Cloud Platform Big Query offers)
Build an autocomplete feature in the query editor that suggests data/tables that a user can query
Auto create tables from data stored in COS (similar to what AWS Athena and AWS Glue offers)
Fix buddy hopscotch tour

Wireframes

From the feedback, we came up with solutions addressing the aforementioned recommendations. Now Users are able to browse an object storage instance within the context of any page. IBM’s design language involves specifications for different situations so variations were made.

Depending on what is needed, the user can stop at the bucket level or continue to explore objects and prefixes. All text within the component is customizable depending on the product use case, also the instance and bucket drop-downs can have either a horizontal or a vertical layout.

Modal

The component can only be used within a modal if it stops at the bucket level. If it is needed to progress to the object level, use the following side panel or tearsheet. It could also be included the within the page itself.

Side Panel

A side panel is the most versatile version, it can be used on any page. The only time it can't be used is when a tearsheet is already opened.

Tearsheet

Here, the same solution is present in the form of a tearsheet, but the format can only be used above another tearsheet. Depending on what is necessary, the component can be used just in bucket selection mode or in full object/prefix selection mode.

Provisioning page

Users can browse for buckets, objects or prefixes within the context of a page for example; within a provisioning page. Here, it is used for when a cloud object storage instance is needed in the configuration of a new service.

Testing feedback

After implementing the research and creating the wireframes, the next round of testing should be aimed at assessing how easily users can locate, understand, and use a component to complete the necessary actions. They covered the following themes:

Discoverability: Are users able to find the component on the given page?
Task success: Are users able to easily complete core tasks?
Efficiency: How efficient is the new component?
Information clarity: Is the information provided sufficient enough for users to successfully complete the tasks?

Challenges

This project not only involved designers and developers, but also IBM's internal design system team. In order for the component to be integrated, I needed to modify the component according to feedback from the design language team as well as create documentation detailing the anatomy of the component and exactly when and how the component should be used. This is to ensure uniformity across all necessary IBM products. For example, the following is a best practice included in the documentation for the use of the modal version of the component:

COS Browser documentation - FINAL 2023 (dragged) 1.png

This project required strong communication, cross-functional team collaborations, thorough documentation, as well as testing my design capabilities. I needed a way to not only prioritize the user experience of the product, but also take into account how it will be used within IBM's design system, creating multiple versions of this browser solution.