Designing a user-centered vision: a case study

Michelle Chen
IBM Design
Published in
7 min readMar 30, 2021

Written by: Diego Hernandez and Michelle Chen

As creators in an environment where the focus is on the next release, we often fail to make space for innovation. In IBM Security, the design team wanted to experiment with a new kind of project to break out of the typical Agile design cycle to envision a market-differentiating, user-centric experience. In this case study, we will cover the project, what made it successful, what was our approach, and what we learned.

A user profile encircled by design, user research, and front-end development
The user-centered 3-in-a-box

The project

Our task was to design an experience for security analysts to find and investigate unusual network traffic called Network Traffic Analysis (NTA). NTA is an emerging category of security products using network communications as the primary data source for detecting security threats. Using machine learning to find network traffic anomalies, security analysts can quickly assess their networks and respond to potential threats.

Our team consisted of a user researcher, UX designer, and front-end developer. We had four months to understand, explore, and deliver a full experience and a roadmap for the engineering team to build and ship. This team makeup and several other factors were critical to our project’s success. We will discuss these factors in more detail next.

What worked well

User-centered 3-in-a-box

At IBM, we call the collaboration of design, engineering, and offering management the 3-in-a-box model. The tight-knit partnership between these three disciplines is necessary for a successful product. We called ourselves the “user-centered 3-in-a-box”: user research, design, and front-end development.

Everything we produced was backed by user research, from our design iterations, code-based prototype, and experience-based roadmap. The delivered design directly addresses user needs and pain points. This is why we had overwhelmingly positive testimonials to our prototype during our last round of usability testing.

“The feedback is fantastic, and it is a testament to all of the work you’ve put in.”

- Tom Obremski, QRadar Offering Manager, IBM Security

Focusing on the long-term vision

We were not responsible for delivering ready-to-ship work. Our removal from the sprint-to-sprint releases gave us the freedom to ideate new ideas and test them. The project set the groundwork for the future delivery of this NTA-based design. We did all of this without holding back the business-critical deliveries our engineer counterparts were focused on.

Support from the larger team

Even though the daily work involved the “user-centered 3-in-a-box”, this project’s positive outcome should also be attributed to our offering manager, sales, and engineering peers. They helped us ramp up on network-based security concepts quickly, answered our questions, and most importantly, led us to interested clients for our research efforts.

“You made [the client] feel special. From a sales perspective, it helps out immensely. So I thank you for including him in your research.”

- Sean Duval, Executive Security Consultant, IBM Security

By helping us recruit research participants, the sales team demonstrated to our clients IBM’s commitment to building the best tools for their security needs.

You may be wondering now, ‘What did the project actually look like?’ We’ll go over our approach in detail in this next section.

Our approach

We broke the project down into four phases. In true Agile fashion, we planned each phase’s details at the start based on what we learned in the previous phase. At the end of every phase, we presented our ideas and findings to the main project stakeholders: design and engineering leaders, and offering management.

The project timeline and phases: understand, explore, and deliver

Phase 0: Project proposal

Before diving right into the project, we established the problem and target users, identified the project team members, and got buy-in from our leadership to pursue this initiative. Consistent user research was critical for us, so we also ensured that we had access to interested customers to get their feedback in the coming phases.

Phase 1: Understand

Competitive analysis, auditing visualizations with big ideas, and technology audit

We had little collective knowledge of network-based security. In this phase, we ramped up on this domain through secondary research and competitive analysis. With expertise in our respective disciplines, we each utilized our strengths and skills in understanding the user and technological needs within the NTA space.

Various inspiring designs
Some of the design inspiration was collected during our Understand phase.

We also gathered relevant data visualization inspiration from anything we could find while exploring the underlying technologies used to create them.

Phase 2: Explore

Conceptual design, generative interviews, and rapid prototyping

Once we had a better understanding of NTA, we conducted generative interviews with security analyst users to prioritize their needs. We created viable user flow prototypes to validate or invalidate our assumptions.

The mental model of security analysts in deriving meaning from network traffic observations
Analysis of the security analyst’s mental model of NTA from the generative user interviews

Based on the user flow we validated during the generative user interviews, we honed our project scope and focused on what was necessary for the experience we wanted to build. We designed with higher-fidelity content and functionality to iterate based on the user feedback we received along the way.

In parallel, we started implementing some of the design in code, like experimenting with various data filtering mechanisms to find gaps in the interaction design.

A visual of the filtering logic experiment with shapes
Filtering logic experiment with shapes

Phase 3: Deliver

Usability testing, code-based prototype, experienced-based roadmap

The pinnacle of our project resulted in a coded-prototype that demonstrated our technological and user-centric proof of concept. Before bidding farewell to this quick project, we conducted a final round of usability research with our users interacting with the prototype. This research helped us identify gaps and limitations of our design. We packaged all of this valuable information and the prototype into an experience-based roadmap. This roadmap has helped us communicate the feature priorities to the engineering team.

Lessons learned

We tried different things and failed at some. We’d like to share some lessons we learned as we reflect on the project.

Continually refine our focus and scope

For a typical organization, one second’s worth of network communication could mean hundreds of thousands, if not millions, of connections taking place. We received this feedback in our user research sessions and presentations. While this is clearly a big challenge, we knew we could not solve this in the short time that we had. Instead, we intentionally prioritized designing tangible user flows, layouts, and interactions. It was vital to understand our priorities to stay on track and acknowledge the trade-offs that we made.

Communicate prototypes effectively

We are all too familiar with the issues that come from building high-fidelity designs. The stakeholders who are not in the thick of the designs might think that your work is ready to ship to users. As our coded-prototype began to take shape, there was more interest in when it would be available for clients to use. We learned the importance of setting the expectation that the prototypes were prototypes, meaning not ready for production just yet.

Co-create designs

We wish we had been more collaborative on the designs from the beginning. For the sake of speed, we worked within our silos of research, design, and development. Once we started to hold design working sessions, we found that we generated more ideas and iterated more quickly as a team. Although one person is a designer, the co-creation process should belong to everyone, including research and development.

Beyond the phases

We’ve presented our designs and research findings to support our point of view. Now engineering, offering management, and our teams are working on turning our designs into reality for our users.

Overall this was a fulfilling experience for the “user-centered 3-in-a-box”. We each got the opportunity to showcase our skills to have a successful project. We designed experiences that were shaped by actual user feedback, which is rare. Design and product teams should find ways to break the mold to spark innovation and keep the creative edge. The journey into the world of NTA is not over, it’s just getting started.

The design team consisted of Diego Hernandez (front-end developer), Michelle Chen (design researcher), and Peter Vachon (principal UX designer).

We would like to thank our engineering and offering management collaborators for their support in making this project successful. This project was supported by Haidy Francis, Tom Obremski, Lauren Horaist, Adam Frank, and countless others.

The above article is personal and does not necessarily represent IBM’s positions, strategies or opinions.

--

--

Michelle Chen
IBM Design

work in progress | design researcher at ibm security