Challenges
- Create a premium experience for their clientele to buy and sell deals
- Integrate the application into an existing product called, The Client App
- Emphasize privacy and security to reassure users
Secondary Markets Feature
Background
A native iOS application that allows high net worth individuals to acquire and sell private equity assets through the secondary market.
The Family Office (TFO) wanted to expand their current offering for digital wealth management. The Secondary Markets feature was a new addition to their existing “client app”. It’s objective was to make acquiring and selling private equity on the secondary marketplace accessible to their clients.
TFO is an independent wealth management firm serving some of the wealthiest families, individuals and investors in the The Gulf Cooperation Council (GCC). They brought in UX Cabin to help manage the UX process and build new applications across their digital product line.
View my case study presentationView my presentationDesign Role:
- UX Research
- UX/UI Design
- UX Audit
- Design QA
- Developer Handoff
Strategy
- Understand the user’s sensibilities, desires, and core business goals
- Create efficient flows to help users get tasks done without much handholding
- Provide customized investing plans and opportunities for individual clients
Design
Principles
The primary objective of the design was to make it as easy as possible for TFO clients to list their existing assets into the secondary marketplace.
For this reason, what was once originally scoped as a separate product instead became an extension of an existing application called “The Client App”.
In the end, the Secondary Markets feature consisted of a new page called the “marketplace”. Here, clients could either list their own private equity assets or browse available listings. Clients were able to submit private bids to deal owners. If accepted, a buying process would initiate and be facilitated by the TFO accounts team.
- Premium, luxurious appearance
- Informational UI
- Progressive revelation
- Clear, digestible information
Process
Our approach
Our team consisted of three Product Designers, working in tandem with an independent UX Researcher and the TFO stakeholder team to gather requirements, review mockups and prototypes, and conduct usability tests with TFO users.
Product discovery
Before starting development, we set out to understand what the users' problems and needs were, then validated our ideas for solutions. To do that we needed to know the 3Ws - Why, Who, and What. This helped us to decide what features to build and prioritize and helped set up the product for excellence.
The team also kept a living document that outlined the designed goals and outcomes of the new initiative, and tied customer pain points, technological constraints, and suggested solutions.
Wireframes
Once we had the sitemap and user flow, we proceeded to the wireframe phase to flesh out the blueprint of the site’s structure, layout and functions, which gave us a clear idea of the UX design functions.
High-fidelity designs
We proceeded to make high fidelity designs once low-fi wireframes were fleshed out and approved by stakeholders.
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
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.
Mapping interaction flows for Buyers and Sellers
Usability tests help us discover usability issues and allow users to give qualitative feedback.
For complex user flows multiple prototypes were created to test the usability of each flow.
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
- Integrate perfectly with existing client app
- Minimal, yet beautiful
- Luxurious and premium
- Specific enough to be useful
Results
