Tools
Figma, Zeroheight, JIRA, Maze Miro, WebEx
Team
1 Designer (me), 1 UX researcher
My Contribution
Components design, Usability testing, Design documentation, Project management
Method Employed
Remote usability testing, Heuristic Evaluation, Guerilla Usability Testing, Think Aloud method
Deliverables
Design documentation, Component design
Introduction
Meet Blueprint 2.0
Blueprint 2.0 is a revamped design system from Blueprint 1.0, designed by Cisco Distributed Systems Engineering product design team. It is using by 2 teams across 7 Cisco enterprise products. The redesign provides a neat and a more coherent experience to help teams in Cisco to elevate their digital products.
Starting with the Basics - The Matrix Component
Redesigning the key component to meet the user needs
In the past, Cisco's design team received feedback from end-users on their features and components. To cater to new product requirements and answer user needs, the team realized they needed to change the most basic aspect of their design - the design system itself. I started with the most commonly used component - the Matrix - to create a new design system that would improve the overall user experience.
Breaking the Technical Barrier
How I Bridging the Gap Between Technical and Marketing Teams
Although these components are currently used by IT professionals in enterprise-level products, it doesn't mean the user interface needs to be filled with technical jargon and be obscure. Therefore, I decided to take this opportunity to engage folks from both the technical and marketing teams to test out the current design.
Exploring User Perceptions
Understand how users use the feature and do they meet their goals
The Matrix component is designed to show the relationship between two objects, but how do users actually use it? Through usability testing and research, UX research and I sought to gain insights into the current user experience. By creating a list of research questions that focused on how users use the Matrix component and their opinions about forming new connections, we were able to better understand user perspectives.
Methods & Procedures
To answer these questions, research and I used two research methods: desk research and semi-structured interviews. to gain information from our targeted audience.
Desk Research (Legend interview recordings)
To starting off, I decided gather data from the existing Martix component and outside of my organization. This cost-effective and quick research is to help us determine what still need to be investigated before test our component.
Photo has been blurred due to NDA
• We reviewed and analyzed the usability testing data of Martix view conducted by Cisco DNA Center.
• Refine our problem statement and determaine what are the questions that need to be furthur investigated.
Semi-structured interviews (Conducted over Webex, ~ 60 minutes)
In the semi moderated interviews about the product components to ensure we are covering an inclusive range of users we chose to interview both testers with and without former knowledge of the product. This also aimed to reduce bias in the test.
Photo has been blurred due to NDA
• Interviewed 2 internal users and 2 external testers who have technical and non-technical backgrounds
• We encourage testers to use Think Aloud Protocol while completing tasks
Uncovering User Needs
Desk Research Results
•Participants tend to omit the legends on the right size due to the size of the legends.
•Participants thought the vertical text is not easy to read at the first glance.
•2 participants pointed out that it would be hard to navigate if there are a lot of data, and the prototype didn’t provide an example of how they should interact with a bigger matrix view.
•Inconsistent design between the table view and matrix view - missing filter function.
Semi-structured interviews Results
Based on the quantitative data we gathered from desk research, I decided to come up with a few more questions about the filter feature on our product, and focus more on the interactions of using Matrix that has been exist in the existing products.
• Participants tend to omit the legends on the right size due to the size of the legends.
• Participants thought the vertical text is not easy to read at the first glance.
• 2 participants pointed out that it would be hard to navigate if there are a lot of data, and the prototype didn’t provide an example of how they should interact with a bigger matrix view.
• Inconsistent design between the table view and matrix view - missing filter function.
Unlocking User Insights
Design decisions based on data
After discussing with the rest of the design system core members and the design manager, I decided to focus on the following points based on the data collected and our current use case. Based on the qualitative data we gathered through user interviews the UX researcher and I narrowed down 3 categories of user pain points: interaction design, functionality ideas, and accessibility.
• Keep the design consistent - by adding filter feature.
• Allow users to check overflowed data.
• Increase the legibility: color contrast, font size, text direction, and legend style.
Final Delivery
After several rounds of iterations, this is the final design for the matrix component. However, not all design recommendation has been adopted. After evaluating with the team, I decided to make the filter feature a standalone component to pair with other components together.
Usage
The Matrix component belongs to the data visualization category. It provides an easy way to visualize the connections and relationships between different items.
Anatomy
Legend: Increased legend size and redesigned legend style.
Text Direction: Tilted the text 45 degrees to increase the readability.
Hover state: Highlighted hover state to increase the legibility for the hovered row and column.
Data Overflow: Add a tertiary button to indicate the overflowed data.
Popover: Extra information will display in a popover.
Labels, legend, and annotation
Legends and annotations describe a Matrix’s information. Annotations should highlight data points and any noteworthy content that users clicked,
• It is recommended to rotate the label for readability.
• It is recommended to have legend on the left side so users can scroll the page to the right to check overflowed data
Behavior
Matrix provides interaction patterns that give users control over the data displayed. These patterns let users focus on overflowed data.
• "Show more" and "Show first 10 rows" allows users to interact with matrix table
• Direct manipulation such as hover and single click allows users to directly act on UI elements.
Do & Don't
Popovers contain informational layers that appear when users hover over, focus on, click on, or tap an element. Unlike a tooltip, which can only contain simple text and a link or button, they can include longer text, complex content, and action elements such as links and buttons. Information in the Matrix component popover can be varied depending on the use case in each product.
Empty State
Empty states appear when there is no data to display to the user. The matrix component's empty state must be paired within a section, drawer or any container it lives in.
Best practices
Use matrix component and table together to let users switch between two different views if needed.
The Journey of Redesigning the Matrix Component
Redesigning the matrix component was the first project I worked on with UX researcher at Cisco. Is not just about creating a new design but involves effective communication and thorough research. The redesign process took approximately four months from initial research to approval of the final design solution. Through this experience, I realized the importance of investigating previous research data within the company and contacting other groups at the beginning of the research process. Doing so would greatly save time and help to scope our research questions, allowing us to improve our research process and ultimately create better design solutions.