Samuel Sholkoff's profile

Enterprise storage administrator tool - yawn

Turn this frog into a prince
How I took a redesign ask and turned it into an experience overhaul
Read this. It's important so you understand what the f*ck I'm talking about.

This design work was for IBM Systems. It's called the Service Assistant Tool which I will refer to as SAT below. To simplify this absurdly technical tool for you: it's a dashboard for Storage Administrators and IBM Support to look at the hardware storage nodes that make up a storage system. If you think about a server farm: it's full of storage cabinets which are full of storage systems which are comprised of nodes which are basically hard drives. (A huge oversimplification and if you're a storage nerd, I'm sorry).
Step 1: Understand the ask

When my superiors came to me with this project, the ask was: "Hey Sam, you're a designer, can you make this look better and convert it to the IBM Design Language?"

If you're a designer, you know better than to accept a project who's only measure of success is a new layer of paint. As designers (especially UX designers), we have the invaluable opportunity to offer something greater than aesthetic. It's our responsibility to lead our teams and clients in a direction that prioritizes experience and user satisfaction above "quick redesigns." Re-skinning designs often leaves a lot on the table in terms of overall usability improvements and user satisfaction. If developers are going to be spending any time developing a product, it's our job as designers to make sure that time is spent working on the most critical and valuable pieces to a user.

In the case of SAT, the tool was aesthetically atrocious. It was legacy, had been designed by developers years ago, and it was obvious that feature upon feature had been added until it had become its current, bloated mess.

Obviously a fresh look would help a bit. But I wanted to understand what the user really needed before I made any assumptions about improvements. Just like a house, a new coat of paint won't fix the broken foundation.
Step 2: Make connections

It turned out that my manager didn't really understand the product nor had they ever used the product. They had been given an ask which they then passed onto me. 

Soapbox moment #369: Design is only successful when the right people are brought together from the very beginning. I've been around long enough to see so many wonderful projects completely fail at the last moment due to the absence of a crucial stakeholder who really understood a product. As the saying goes: "you don't know what you don't know." So go find someone who does before you even touch pen to paper. Otherwise you risk designing the wrong thing.

After finding real users who understood the product, I had them take me through the tool so I could understand their usual flows and activities as well as their biggest pain points in the current design. 

In these kinds of review sessions I always go one step further and ask my users / stakeholders: "what if you could have anything you wanted?" This question almost always leads to an incredible discovery that then redefines the team's goals for a product. This "big ideas" question is taken from Design Thinking, and I urge you to use it for every design you do as early as possible.

For SAT, the overwhelming feedback was that the product wasn't answering the fundamental question: "what is the health of my storage system nodes?"

Step 3: Analyze and dream

Once I understand enough about a product, I dive in and get messy with it. I click on every menu item, try to launch every interaction, and find and prioritize low hanging fruit. This process allows me to empathize with a user as well as get to know the nitty-gritty of a design. And once I've done that, I start dreaming as big as I can based on what I hear from users. 

In the case of SAT, the navigation was hindering the user's main intents for using this tool. The first thing they wanted to know was: "what are my nodes?" The second thing they wanted to know was: "what is the health of those nodes?" 

I felt the best way to answer those questions was a navigation overhaul: stick to a dive-down approach and make user flows super intentional. But there was a lot of push-back to such a drastic change. My manager was concerned that users who were familiar with the tool would be opposed to a complete paradigm shift. And I respected that opinion. To continue with the house metaphor, changing the navigation would be like moving the placement of a house's front door. So at first, I tried to maintain the current navigation and focused on improving hierarchy, information clarity, and interaction design.
Step 4: Communicate and iterate

The key to any successful design is communication, collaboration, and iteration. Using Slack and Invision, I kept in constant contact with the users I had found at the beginning of the project. After some back and forth iteration with trying to maintain the current navigation, it was clear that the users needed a higher level picture. This was a familiar discovery. I often solve usability issues by molding my products into a dive-down navigation. It lessens cognitive load and helps users focus on the tasks they wish to accomplish. Since I did my due-diligence and was collaborating with real users, I was able to successfully make the case to completely change the navigation.

What you see below is a completely new page called the "available nodes" page. This is the high level navigation that users really needed. Now they could direct their attention to specific nodes without much time for discovery or interpretation.

What began as a nebulous, make-it-prettier ask, turned into a contextualized and educated experience overhaul. Yes, I made it prettier, but I made it prettier with a ton of purpose, which is the job of any good designer. I was able to redesign SAT using the IBM Design Language, which made it easier to develop due to its out-of-the box components. I was able to update and improve interactions by switching to more modern patterns and elements. I was able to greatly improve the hierarchy and readability of the tool by setting the design on a grid and utilizing Plex. And I was able to satisfy the users' main concerns with the previous design by changing the navigation to a dive-down approach.

The biggest challenges for me were understanding this tool, negotiating a more impactful scope of work, and converting a very legacy product to a brand new design system. But I overcame those challenges by communicating and collaborating often with users, the developers, and a couple of other designers that offered me a second pair of eyes.

Thank you for reading. Enjoy some of the sexiest screens below.
Enterprise storage administrator tool - yawn

Enterprise storage administrator tool - yawn

How I took a re-skin ask through a proper design process to achieve an ultra valuable, super appreciated experience overhaul.


Creative Fields