CLOUD COMPUTING
PROJECT
INTERACTION DESIGN
Custom pattern to Select, Version and Sort Resources in a Table
SUMMARY
My goal was to develop and contribute to a new, user-centered interface pattern that enabled selection, customization, and reordering of resources in the same table — empowering engineers to efficiently configure deployment environments.
IMPACT
Scalable and
modular solution
The custom pattern is designed to be reusable across different parts of the application and other teams or for future use cases, reducing the need for rework and speeding up future development.
Innovation without
disruption
The solution introduces powerful new features (customization and sorting) while maintaining consistency with the existing design system, preserving the familiarity that users rely on.
Detailed case study
OVERVIEW
The "Build Component" interface within AWS SAP Launch Wizard enables users to configure and create essential building blocks for deploying SAP environments. This study explores the design approach, challenges, and solutions implemented to create a user-friendly, efficient "Build Component" experience.
GOAL
Enable
customization of selected resource (version changes)
Switch
order of the selections to prioritize deployment needs
Extend
the Existing Design System by integrating it with the custom interaction pattern
Improve
user experience by allowing users to effectively manage their selections.
Interactive Table for Resource Management
TIMELINE
3 months UX effort
launch
STAKEHOLDERS
1 UX Designer
1 Sr.Software Manager
1 Software Development Engineer
1 Product Manager
1 Technical Program Manager
1 Researcher
PLAN
Define Requirements and Objectives
Prototype and Iterate on Solutions
Leverage Existing Design System Components
Create a Scalable, Reusable Pattern
Iterate and Refine Post-Launch
Collaboration and Development Handoff
RESEARCH
The interaction must include a variety of features, such as pre-configured templates for quick setup, modular component selection for customized deployments, and advanced customization options for experienced users. It should also provide real-time cost estimation for immediate budget feedback and integrated validation checks to ensure compliance with AWS and SAP best practices, enhancing reliability and minimizing errors.
UNDERSTANDING THE PRIMARY USER OF THIS WORKFLOW
FURTHER RESEARCH
User Research (Interviews/Surveys)
Conducted interviews with current users to identify how they approach resource management and what additional features (customization, sorting) they would find most valuable.
Usability testing
Ran usability tests on the current table and checkboxes to observe user behavior, then test prototypes of the new custom pattern to ensure ease of use.
Competitive Analysis
Studied best practices from similar cloud platforms, SaaS solutions, or enterprise software that involve complex workflows to learn from their approaches.
Interaction Design Research
Investigated established design frameworks and UX patterns that handle similar functionality, to inspire the custom pattern and ensure scalability.
Research Takeaways
The design and research team gathered insights from SAP engineers, AWS architects, and IT administrators, revealing key needs for the "Build Component" interface. Users desired simplified processes to minimize manual steps, especially for repeatable, scalable setups. They also required flexibility to customize configurations for varying workloads and compliance standards. Additionally, while some users were AWS-savvy, others needed more guidance to navigate SAP’s specialized deployment requirements effectively.
CHALLENGES OF EXISTING TABLE UI
The challenges faced include the lack of options for modifying contextual properties for resources, which limits user flexibility. Additionally, users cannot sort or set a build order for selected resources, making organization difficult. The complexity of the table filters adds to the frustration, as they can be overly intricate. Furthermore, with millions of resources available, there is a risk of selections being missed across pagination, complicating the user experience even further.
The visuals are animated, and user controls are disabled.
WHITEBOARDING
Analyzing the characteristics of resources, versioning attributes, and user experience flow.
EXPLORING SOLUTIONS
EXPLORATION 1
SELECT COMPONENTS USING MODAL
Opens modal with list of components . Option to select from various component types (shown in tabs)
Selected components displayed in primary table.
Early prototype validation feedback
Contextual properties changes was essential and missing in this flow.
Adding and removing components one at a time was cumbersome.
Alternatively, displaying selected components in the modal was overwhelming, and erroraneous if closed accidentally.
Checkbox placement was not user-friendly and violated design standards.
EXPLORATION 2 (AND FINAL!)
MANAGE COMPONENTS FROM THE SAME PRIMARY TABLE
Components table
2
1
3
4
5
6
7
8
Zoomed In view of List of Components
Zoomed In View of Selected Components
Selected components list
List of components
9
Interactions
1
2
3
4
5
6
7
8
9
Click to create a new component. Opens a new tab for the create workflow. Complete it, Return, Refresh table.
Drop-down menu for available component types allows easy navigation between Owned, Shared, and Custom components.
Checkbox to select multiple components within the table, with selected items displayed at the bottom.
Numbered sequence of the selected components to visually state the order of display.
Drag and drop handles to re-arrange the sequence of selected components.
Expand/collapse section on each pill to customize component versions.
Toggle to open/close all selected pills in the container simultaneously to view metadata.
Inline validation check for available versions is provided as users input their selections.
Dismiss or remove a component from the selected list.
DEMO OF THE INTERACTION
SELECT, VERSION, SORT FROM TABLE
03
OUTCOME
Scalable and modular solution
The custom pattern is designed to be reusable across different parts of the application or for future use cases, reducing the need for rework and speeding up future development.
Innovation without disruption