VMware Inc. | Edge Network Intelligence Partner Portal 

June 2022 – August 2022

My role

• • Product Designer
  • User Researcher

Project Context

• • VMware SEBU SASE Internship Project, Summer 2022

  • Duration: 12 Weeks
  • Team: Akshay Murthy, Laurel Beyers (Manager), Leah Callahan (Mentor), Travis Carlson (Product Manager)
  • Tools Used: Figma, Dovetail, Miro

Background

The ENI Partner Dashboard is a new interface implemented within the Edge Network Intelligence (ENI) service which aims to provide Partner-level customers further visibility into the many Enterprise customers they manage. This includes admin-level management functionalities as it relates to license renewals and expirations, network analytics, benchmarking comparisons, and troubleshooting network incidents across all customers. This project serves the administration/troubleshooting functions of the ENI service from a Partner level.

This is the official internship project I worked on at VMware in Palo Alto, CA, for Summer 2022 as a Product Design-Product Development Intern on the SEBU SASE team.

The Design Process

User Research + Insights

The team conducted preliminary user research. My job was to analyze each interview and extract insights by grouping common issues, mentions of particular features, and understanding existing workflows across Partners.

End-to-End Workshop Ideation Session

I led an End-to-End (E2E) Design Workshop with over 30+ staff engineers, designers, and product managers to align the team’s goal with user and business needs. Through a collaborative workspace on Miro, team members voted and wrote out sticky notes explaining the most important jobs to be done, and each team member was given three votes to choose the highest priority jobs. The goal of this session was to narrow down on user needs and only focus on developing core features.

Through his process, I was also able to define the goals, tasks, and pain points of the customer persona, which was a Partner Network Admin who would be the main user of the platform.

Customer Persona

Now that a broad definition of our customer and user needs was established, I developed a fleshed-out customer persona that dug deeper into our sample persona of Shauna, our Partner Network Admin. The main things outlined were her daily pain points and goals, which would help define the product’s main features and the overall experience from onboarding to incident identification. A secondary persona of Jason was also developed, a Tier 1/Tier 2 Support member who assists in more administrative and business-related tasks and could be another potential user of the platform.

User Journey Map

Below is a user journey map created for Shauna that outlines the detailed interactions she would conduct on the platform, accompanied by potential wireframes outlining what these interactions would look like. The user journey map was important in understanding the experience Shauna would go through to diagnose and troubleshoot a common network incident happening across her customers, which aligns with the previous user story.

Insights from this process were extracted to identify potential roadblocks or design considerations based on team feedback and existing feasibility within the ENI ecosystem.

End-to-End Customer Story

Information Architecture + UX Flow

Prototype Development

Existing ENI Portal Design

Since the ENI Partner Portal is a part of the existing ENI service, it was essential to maintain a consistent layout that mimicked the single-customer ENI screens to ensure that users would be familiar with the user interfaces and understand how to navigate accordingly. During the design process, I looked at each screen of the single-customer ENI platform and drew out the design components which would carry over to the new designs. Most prominently, the incident summary, global map, and incident details screen of the existing platform capture many important network-related metrics needed to translate to the new designs.

Wireframes

To begin the prototype development process, I created preliminary wireframes outlining the high-level parent screens, which would be the most critical components of the platform, first starting with the home dashboard, to creating the various flows for the license renewal and management functionalities.

High-Fidelity Prototype Development

Since VMware follows a complex design system, utilizing the different components from the Clarity Design System was imperative in designing each high-fidelity screen for the interactive prototype. Over 60+ screens and 200+ interactions were developed in the final prototype with multiple iterations.

There were a few takeaways from the development process:

• Use of sortable row-column data grids and flexible filtering/customization
• Convey information using graphics or icons accompanied by labels
• Clickable and interactive elements lead to the next information bits
• Hierarchy of information flow and attention to psychology around data

Since I was creating an entirely new platform on an enterprise B2B level that incorporated large amounts of data, it was essential to understand which types of data visualization methods should be used and what information should be laid out for a Network Admin to identify network-related issues effectively. Through a series of iterations focused on accessibility and designing for scale (to encompass millions of data points and thousands of customers), many layouts shifted from the first version of the platform I developed to the final version to prioritize information hierarchy and overall readability.

Partner Usability Testing + Feedback

During the development of the high-fidelity prototype, I had the chance to run moderated usability tests with 2-3 large enterprise Partner customers. During these tests, I asked 6-7 open-ended questions, which dictated the feedback collection process through qualitative analysis. During our virtual interviews, I carefully watched as the Partner user navigated through the interactive prototype. I noted down any roadblocks the user encountered and any unique behavioral patterns surrounding the interaction design. Below are some notable quotes from a few Partner customers I interviewed, along with some open-ended questions I asked.

Design System

For the development of the high-fidelity prototype, I strictly adhered to VMware’s very own Clarity Design System to inform my design decisions and each of the components I utilized, ranging from modals and buttons to navigation headers, alerts, and data visualizations. Since VMware’s products serve millions of customers daily, I followed the accessibility standards for the color palette, typography, and overall layout considerations. The Do’s and Dont’s of the design system are highlighted below, as well as each and every consideration I thought about during the process.

Overall Layout Considerations

The layouts I considered, mainly for the dashboard and various modals, follow a natural human tendency of right-to-left information consumption which includes a standardized white space between the navigation header and the content presented on the page.

Accessible Color Palette

I had to consider every color I implemented in my design since the product would cater to a large-scale audience and be used by many individuals within a company with varying accessibility needs. Therefore, adhering to an accessible color palette was pivotal and informed my decisions for things like alert indicators, main background and foreground colors, and colors that pertain to various actions. The color palette utilized follows A11y standards.

Typography

Data Visualization

Perhaps the most import of the prototype development process was understanding which type of visualization to use given the type of data that needed to be portrayed. When developing the customer benchmarking and home dashboard screen, I had to decide between the usage of pie charts or bar graphs and which type of visualization would be the most effective. Following a color scheme for both accessibility and readability purposes was also crucial for the graphs, as each graph had to include labels, color-separated blocks, and a legend to indicate the presence of the data.

Button Layouts

Project Reflection

Given this was the most significant project scope I have taken on as a designer and the first time working in a B2B enterprise corporate setting, I learned a plethora of skills along the way. Here are a few takeaways:

• Learning how to utilize a complex corporate design system in a UX-maturing company
• Use of layouts to display large amounts of data and information at a time while eliminating unnecessary features or components
• Designing for scale and accessibility on an enterprise level, where the product will be used by thousands of customers and can expand its feature range in the future
• Working cross-functionally with staff engineers and PMs is an ongoing process and establishing a foothold early with design decisions is essential.
• Understanding who is using the platform informs the entire feature set and overall experience; on an enterprise level, many people are involved in the process.