Interaction design . design system . Project management
Released on Jan 2024 for network admins and architects (core user)
Apr 2023 - Aug 2023
(4 months)
Solution architect, developers, QA, design manager, engineering manager, content team
Organizations currently confront multiple challenges that jeopardize business continuity, such as downtime. Unplanned downtime, despite the inevitability of disasters, disrupts normal business processes.
Geo-Redundancy pool setup is a practice in Networking that multiple gateways work collaboratively for smooth data flow. If one gateway falters, others step in seamlessly to handle spikes, hardware issues, or disruptions.
Currently, the standard High-availability pool setup focuses on local redundancy within a single data center. However, our customers have needs to expand redundancy across multiple geographically dispersed data centers.
The design should prioritize users' understanding the duo site concept using design components and visual cues to clearly convey the Active and Standby site structure, focusing on supporting Geo-Redundancy and failover at both the geographic location and data gateway levels.
Furthermore, create a seamless High-availability Pool Configuration flow, establishing an error proof and efficient experience throughout the configuration process.
Organizations currently confront multiple challenges that jeopardize business continuity, such as downtime. Unplanned downtime, despite the inevitability of disasters, disrupts normal business processes.
Geo-Redundancy pool setup is a practice in Networking that multiple gateways work collaboratively for smooth data flow. If one gateway falters, others step in seamlessly to handle spikes, hardware issues, or disruptions.
Currently, the standard High-availability pool setup focuses on local redundancy within a single data center. However, our customers have needs to expand redundancy across multiple geographically dispersed data centers.
Apr 2023 - Aug 2023
• Solution architect
• 2 Frontend engineers
• Backend engineer
• 2 QA engineers
• Design manager
• Engineering manager
• Content team
The design should prioritize users' understanding the duo site concept using design components and visual cues to clearly convey the Active and Standby site structure, focusing on supporting Geo-Redundancy and failover at both the geographic location and data gateway levels.
Furthermore, create a seamless High-availability Pool Configuration flow, establishing an error proof and efficient experience throughout the configuration process.
After complete user flow, I started visualizing the pool configuration screen. I considered several design components and interaction patterns, evaluating the pros and cons of each:
1. Cards - Presenting Active and Standby configurations side by side in a long-scroll format offers a full display of the entire page
2. Collapse - Grouping configuration details into accordions allows users to expand or collapse content, giving control over the amount of information users engage with.
3.Steppers - Breaking down the configuration into multiple steps helps user focus on individual tasks.
While refining mid-wireframes and discussing pool creation edge cases with the engineering team, a key issue surfaced.
Users were unable to start pool configuration without sufficient data gateways, often leading to frustration and backtracking. This was a common scenario, especially in fresh deployments where no gateways were initially mapped.
To address this, I proposed integrating gateway assignment directly within the pool creation flow. This streamlined the process, eliminating unnecessary steps and allowing users to seamlessly complete pool creation in a single session
One of the pain points I heard from network admins is the lengthy and error-prone configuration process. Therefore, effective form validation design becomes crucial. I learned from the engineering team that errors arising from too many, too few, or mismatched gateways can lead to imbalanced pools. To tackle this, the design emphasizes real-time feedback:
1. The primary call-to-action activates as soon as a user inputs a value, triggering instant inline messages for early error detection
2. The messages provides actionable solutions
For instance, in the scenario of too many gateways causing imbalance, the design has a toast notification, clearly stating the problem and advising on the number of gateways to remove for a balanced pool.
After complete user flow, I started visualizing the pool configuration screen. I considered several design components and interaction patterns, evaluating the pros and cons of each:
1. Steppers - Breaking down the configuration into multiple steps helps user focus on individual tasks.
2. Collapse - Grouping configuration details into accordions allows users to expand or collapse content, giving control over the amount of information users engage with.
3. Cards - Presenting Active and Standby configurations side by side in a long-scroll format offers a full display of the entire page
While refining mid-wireframes and discussing pool creation edge cases with the engineering team, a key issue surfaced.
Users were unable to start pool configuration without sufficient data gateways, often leading to frustration and backtracking. This was a common scenario, especially in fresh deployments where no gateways were initially mapped.
To address this, I proposed integrating gateway assignment directly within the pool creation flow. This streamlined the process, eliminating unnecessary steps and allowing users to seamlessly complete pool creation in a single session
One of the pain points I heard from network admins is the lengthy and error-prone configuration process. Therefore, effective form validation design becomes crucial. I learned from the engineering team that errors arising from too many, too few, or mismatched gateways can lead to imbalanced pools. To tackle this, the design emphasizes real-time feedback:
1. The primary call-to-action activates as soon as a user inputs a value, triggering instant inline messages for early error detection
2. The messages provides actionable solutions
For instance, in the scenario of too many gateways causing imbalance, the design has a toast notification, clearly stating the problem and advising on the number of gateways to remove for a balanced pool.
The prototype focuses on the primary flow within the 'Pools' tab. However, additional entry points exist, such as within the Data Gateways table and Data Gateway Instances table, providing users with access to the pool details page for viewing existing pools
Data Gateway Management
Data gateway management is a dashboard that users monitor data gateway devices' health at a glance with, ensuring quick detection of operational issues and outages
Pool Details
Pool details displays the pool information. Users can view Global parameters shared between sites, Active site configuration, and Standby site ready to take over incase of downtime.
The prototype focuses on the primary flow within the 'Pools' tab. However, additional entry points exist, such as within the Data Gateways table and Data Gateway Instances table, providing users with access to the pool details page for viewing existing pools
As a sole designer, maintaining accurate data on prototypes, facilitating clear communication, ensuring task progression with cross functional teams, and upholding UX quality are crucial in achieving excellent product quality. To expand on these points:
Accurate prototype data
Precision in prototype data ensures focused evaluations, avoiding audiences to focus on unnecessary details.
Clear communication
Setting deadlines and expectations fosters a shared understanding among team members who only have high-level understanding of the project.
Proactively follow up on tasks
Regular check-ins with engineers ensure progress, address roadblocks, and maintain project momentum.
UX audits and visual QA
Conducting regular visual QA ensures a production quality.
