Elavon has many applications that serve different types of merchants and business owners. Each application had its own unique visual style and page flows, making them feel unrelated. Design leadership aimed to change this by giving the applications a similar look and feel. To achieve this, the applications had to adopt a new design system. The design system was atomic-based, detailing all components but not providing guidance on shared patterns.

We saw this as an opportunity to contribute to the design system by focusing on search and filtering patterns. Searching is crucial for merchants who need to filter specific sets of data or obtain accurate reports.

The vision

The goal was to establish core search patterns that everyone could adopt, while allowing for unique sub-patterns to support platform-specific tasks and flows.

Categorizing patterns

Popular search patterns were identified and organized from simple to complex. External samples were found from popular websites

Identifying Commonalities

UI samples from each application were analyzed to understand how search was being utilized. Commonalities and differences were documented, revealing that most search experiences occur with data tables. This analysis also helped identify the needs of each platform, specifically how complex the search patterns were and how far apart these patterns were from each other.

Blocking out design

Instead of paper sketching, blocked sketches were created to illustrate layout ideas without utilizing the design system or creating complex UI components. Similar to sketching, the purpose of these screens was to be artifacts that the team could react to. At this phase, we received feedback on expectations and feasibility.

Using the design system

The screens below were created with the design system to give teams a better feel for how the design system components would be utilized. During this phase, situational prototypes were also created to showcase end-to-end flows. Teams provided feedback on the situational prototypes.

Validation research

Although we never go to this stage, the goal was to evaluate the prototype with real users. But due to research resource challenges, we were never able to perform the research sessions.