financial product suite unification
A leading financial institution approached Selma Digital to help elevate their suite of internal software.
This organization wanted to have best-in-class research tools for the analysts at their organization, while also ensuring that these proprietary tools intuitive, consistent, and aesthetically on-brand. Their organizational goals included drawing in new talent, enabling more effective day-to-day operations, and providing more functionality to delve deeper into financial research.
Key Questions:
How did you create a custom UI based on the brand’s identity?
The UI team asked that we nod to the institution’s overarching brand while also providing a sleek and modern look. We examined the brand guidelines and other internal documents. In addition, we had conversations with key stakeholders in order to form our brand strategy and unearth the brand archetype. From there, we created three different styles for what the new interface could look like based on interpretations of the brand archetype. Referencing cultural elements, infographic styles, typography and color, we presented a number of directions building upon the client’s brand aesthetic and brand archetype. We translated the selected mood boards into detailed UI components. Once a final aesthetic direction was selected from the detailed design choices, we prioritized component creation. UI patterns, UX patterns, and motion patterns were documented in a Figma component library & style guide. This document guided the front-end team’s Storybook of components, available for the whole organization’s development team.
How did you unify the experience across different applications within the organization?
One application at a time, starting with the user experience of some of the more complex applications, we defined main patterns. Starting with the more complex systems helped set up the framework for how the overall software would work and be laid out. Thorough documentation for flows, interaction patterns, and component patterns were created. As the design process continued and we worked with other groups within the organization, we looked for opportunities to leverage existing system patterns in order to unify the product across different applications.
When working with Financial Institutions, what are some of the UX methods you practice?
There is obviously a lot of data and complexity when it comes to working with financial institutions. Also, there are a lot of domain-specific activities that we need to study in order to best design for that audience, and these activities may vary from institution to institution. Therefore, from a research perspective, we like to work directly with our end-users as much as possible, to observe their process and understand in their own words the goals they are trying to achieve. This is achieved through qualitative research, such as observation and conversation. When we don’t have access to our end-users as a design team, we will interview sales teams and key stakeholders. Competitive research, academic research, media scans, storytelling workshops, persona creation, and brand archetype study help us position the product framework, style, and how the tool should be used. User testing of design prototypes and concept testing different ideas also help ensure that designs resonate with the audience.
Deliverabes
▪ Custom UI Library in Figma
▪ Custom data visualization system
▪ Component Usage Guidelines
▪ Component Motion Guidelines
▪ Documented wireframes and flows
Outcome
The client organization overall was happy with the design system and integrated it fully into many of their applications. They are currently continuing to implement the design and interaction system across their suite of products.
