3-Position Bottom Sheet

This “solution constraints” modal allows the user to select constraints to widen or narrow the account matches for their “solution list” in their transaction. The bottom-sheet serves as a quick-view summary of which constraints they currently have selected.

The challenge was to find a balance between clarity and screen real estate efficiency.

While a verbose representation offers higher clarity, it degrades the user’s “working space” for making selections.

The most-concise representation maximizes user’s working space, but requires the user to have a full grasp of icon meaning in order to make sense of the summary.

In the end, I created this 3-state bottom-sheet which offers the needed balance and also allows the user to switch to its more-verbose or less-verbose state.

Part of the solution required custom iconography using a 16px-square “small” size (in contrast to our “normal” 24px-square size).