Overview
Over the course of two years UX Cabin 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.
Background
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.
Objectives
- Create a premium experience for their clientele.
- Make cohesive, beautiful, applications across web, mobile, and tablet for various products
- Provide a customized investing plans and opportunities for individual clients.
Design
Our goal was to design a beautiful, scalable application that included readable charts and graphs, scannable data, and clear actions for complex workflows.
Principles
- Premium, luxurious appearance.
- Progressive revelation.
- Clear, digestible information.
Process
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 Language System
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.
Final Screens
