CASE STUDY

The Family Office - Financial Products

UX Research
UX/UI Design
UI Audits

A suite of financial products to help manage overseas illiquid investments for high net work individuals

Platform

  • Web
  • iOS
  • Android
  • Tablet

Deliverables

  • UX Research
  • UX/UI Design
  • UX Audit
  • Design QA
  • Developer Handoff

Industry

  • Fintech

Timeline

  • Start: September 2019
  • End: Ongoing

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 a beautiful, seamless application across web, mobile, and tablet.
• Maintain a cohesive design and user experience across their various products.

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

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.
• Informational UI.
• 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