Visibility Condition Builder UI
Lead UX Designer in the team of 9 contributing UX Designers, 2 front-end developers, 2 product designers
Created and managed app design pattern designers can reuse via Sketch / InVision • Converted all Sourcing-wide design pattern into Figma library (1 month) and shared Figma onboarding guidelines for designers • Held weekly sync-up for components and design implementation with developers and product managers (6 months) and shared interactive mocks
Often sourcing managers want to add questions or content that are visible only when the supplier responded with a certain answer. For instance, a sourcing event template would show additional compliance requirement materials for only who responded they are located in Europe.
After looking at the legacy UI, the first thing that came up my mind was: 'Is this a maze on the screen?' Even having very similar functionalities with other products, I realized that our product has a bigger gap between expectations and actual behaviors. I proposed some enhancements based on some secondary research on similar features and use cases:
There was already numerous customer feedback asking about enhancing the poor search results in supplier invitation. Therefore, I collected user feedback to identify what are the most common parameters for the search. Meanwhile, we collaborated with the data science team to come up with the use cases where recommendations can be useful. As a result, I came up with 2 refined user stories that can use recommendations and search.
Creating Simple Expressions
When creating new conditions, admins can create rows and groups before/after/inside each row and group
Creating Complex Expressions
If there are multiple criteria, admin can collapse and expand groups
I delivered fully interactive Figma mocks and detailed specs for the responsive dialogs that can accommodate complex conditions with multiple groups and rows.
While it's easy to just remove the cluttered, the real value comes out from making the cluttered decluttered. I first focused on understanding how the feature works thoroughly and understand the use cases. • Using dialogs in moderation, giving contextual information is good but the feature can be bigger than you thought. • For working with UX engineers, defining each element clearly and their roles early on are important to make common ground. • Always keep accessibility in mind, show labels and any changes always visible.