Objectives
- Create a premium experience for their clientele.
- Make a beautiful, seamless application across web, mobile, and tablet.
- Maintain a cohesive design and user experience across their various products.
The Family Office
Background
A suite of financial products to help manage overseas illiquid investments for high net work individuals
Over the course of two years we helped modernize The Family Office’s way of business by bringing manual processes online, streamlining onboarding, improving account management, and giving client access into online platforms for web, mobile and tablet.
The Family Office is an independent wealth management firm serving some of the wealthiest families, individuals and investors in the GCC. They brought in UX Cabin to help manage the UX process and build new applications across their digital product line.
Design Role:
- UX Research
- UX/UI Design
- UX Audit
- Design QA
- Developer Handoff
Strategy
- Understand the users sensibilities, desires, and core business goals
- Create a efficient flows to maximize transparency among clients
- Provide a customized investing plans and opportunities for individual clients
Design
Principles
Our goal was to design a beautiful, scalable application that included readable charts and graphs, scannable data, and clear actions for complex workflows.
- Premium, luxurious appearance
- Informational UI
- Progressive revelation
- Clear, digestible information
Process
Our approach
When approaching new features or products we would start with requirements gathering, user data, and research that would inform our design decisions.
Wireframes
From there we would either sketch or wireframe new features, or build existing features using our DLS (Design Language System).
High-fidelity designs
From there we would take wireframed designs to high fidelity mockups. In most cases these included mockups for mobile, tablet, and desktop.
Developer handoff
We worked tirelessly to communicate each screen and feature explicitly so that it took out all guess work from developers.
This includes:
- Dev notes
- Release comments
- Explanation of functionality
- Links to user stories
Design QA
Throughout the product development lifecycle we would routinely QA applications to make sure they matched design intent and functionality of the DLS.
This is a core aspect in our approach as it takes many hands to ensure designs are implement correctly.
User testing adjustments
During design releases and after launch we worked hand-in-hand with UX researchers to modify and improve existing design features through interviews, research, and user testing.
Design System
Establishing the style guide
We created a visual design language system that served as the source of truth for all applications and platforms within TFO. This was important because anything we solved in one area we wanted to share that context with other apps within the ecosystem.
Building this helped saved hundreds of hours of design and developer time in future designs because we had a system of answered questions we could refer to whenever we needed to build a new feature.
Atomic design
The Design System was created with Brad Frost’s “Atomic Design” philosophy. In this model, the smallest UI elements are referred to as “atoms” (ie, icons, labels) and are assembled together in order to create components referred to as “molecules” (ie, buttons, inputs). Molecules are put together in order to create more complex components called “organisms” (ie, cards).”
Some examples of these design molecules include:
- Buttons & Selectors
- Inputs
- Icons
Principles
- Dark & light mode possible
- Minimal, yet beautiful
- Luxurious and premium
- Specific enough to be useful
- Shared access across many platforms
Results
