icon_home Created with Sketch.
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
Jan

Proxy Tool

Complex tool for admins

The project was to refresh a web tool for administrators. One of the major problems we had at the company was customer support costs. The more who called in, the more people we needed. So one of the tactics to deal with that was to reduce the frictions in using the product in the first place. This particular tool allowed our users assign training to their colleagues in a company. One of the oldest pieces of functionality in the software suite. The project was given a release cycle to complete.

First Dive

No domain knowledge

Admittedly, both the product manager and I were pretty new to the company. It was one of the first projects we had. So we first wanted to learn about the tool. Simple things just dove in, and started clicking. Again, one of the oldest pieces of code in the system, and even had the old UI.

Early Observations

  1. There were a ton of settings.
  2. The organization of the content seemed haphazard.
  3. Almost every setting had some additional text in parentheses.

We then started talking to developers to figure out how it was built. Turns out: terribly. It had seventeen years of features bolted on to it. Then we started talking to our clients, and our internal users. There were a lot of gripes about the tool. “Refreshing” the tool seemed more and more unlikely without some major surgery.

The more we looked at it, the more something didn’t sit right.

New Plan

Easy way or hard way?

The first fork in the road. We could just apply some new visual styling, and be done on-time. Or we could take the hard path. Where we go to the higher-ups, and ask for a project extension. We gathered the feedback we had so far. The PM took it up the chain of command, and then we waited.

A bit of a surprise, but we got the extension. So now the real work begins.

Research

Learn all the things

We worked out a multi-pronged approach to research. Because as we dug in, we realized that the existing user research was rather lacking. A lot of the work would be just to get the basics.

  1. Group client calls
  2. Broad day-in-the-life survey
  3. On-site client visit
  4. Internal Customer Support pain point workshop

Almost all of was generative research. Open questions about their team structure, how they worked together, recurring projects. Then how they used the existing tool today. The survey was broad and sent to almost all the admins. The goal was to get a snapshot of their day-to-day.

It was amazing to let them just talk about how they used the tool. One of the consistent things was the novel ways they “hacked” or exploited loopholes in the code to do the things they needed.

Every time we asked about a workaround or quirk, the user would be surprised. They stopped thinking it was workaround.

Sketching

Shuffle the deck

After looking over all the feedback and interviews, the PM and I started forming some early principles to stick to.

  1. Show only what’s relevant
  2. Match the logic to our users’ process
  3. Let the user leave at any point

From this base of observations, I started sketching and thinking about overhauling the whole experience. Two key groups kept me grounded. The PM stayed conservative for “change management” (The cost of our users having to relearn just a little or a lot.) While the devs informed me of how the underlying code worked.

Constraint: We wouldn’t have enough time to completely overhaul the “engine” of the tool. That would have added months and months of testing for every edge case. So the devs would tell me when part of the code could not be touched at all. (Without adding months to the project.)

That said, all the features were documented and the I started shuffling them around. Regrouping based categories, and hiding the ones that were only relevant to edge cases.

Prototypes

v5, v6, v7, v8…

Ideally, this would have been more lo-fi, but we have a lot of non-visual stakeholders and this tool is uniquely complex. So we leveraged our pattern library and used Invision for clickable prototypes.

Major milestones or forks in the road would meant I made a fresh prototype -- so we could compare the before-and-after.

Client Feedback

They liked it!

We showed the prototypes to clients to get feedback. It was refreshing positive. Which let us channel that up the stakeholders to let them know that the project extension was worth the investment.

It was cool to hear not only positive feedback, but appreciation of being involved early.

Dev Time

Peas in an agile pod

Development went pretty smoothly. All the backend devs knew what was coming, and we had a tight understanding of what was feasible. As for the frontend, I tried to check in frequently to see what they needed or make tweaks. The system is fickle to new UI, so we were never quite sure how the framework would react to the new stuff.

QA Scrub

Spit and polish

A thing I like to do because often visual quirks get lost in the release scramble. A cross-team meeting is called, and we look at every page in the project. Often how the page loads, or a little UI would be off, and the experience would suddenly look sloppy. It’s hard for non-visual team members to spot them. So it’s good for me to see the project before it ships. But also it’s a good chance for the team to estimate how hard it’d be to change it. It keeps the team aligned to do it together. (There is a time cost, however, it doesn’t always scale to every project.)

Post-Launch

Spoiler: it went well

This was a major tool that almost every client uses. So the team was nervous (but confident) about the release. So when it launched, there was relative silence about it. Which is good. Because it meant our clients were actually using it, and not calling us to complain. After a few months, we informally checked with customer support. Calls about the tool were initially higher because it was so new, but eventually the call volume actually went lower.

What's his creative approach?

I got the gist now.

612-643-1555
phong@phonghtran.com

This reminds me of…

Back to Home