Manage wealth on hand and collaborate with your advisors

Access the tools you need to manage your wealth and collaborate with your advisor.
iPhone mockup
Overview

Orion Wealth Management Portal app, aks the client portal

The client portal app is designed to provide clients with easy access to manage their wealth and collaborate with their advisors. This app offers a suite of tools necessary for wealth management, allowing for a seamless mobile experience for all financial and investment needs

Result

50%
↑ Mobile Device Usage
4.1
App Store Rating
Role
User research
UI design
Usability testing
Design system (mobile)
TEAM
1 Product manager
1 Product designer
1 Front-end engineer
Launch YEAR
2021
iPhone mockup
Background

A new acquisition called for a new mobile app

After Orion's acquisition of the Advizr (now Orion Planning) platform, the primary focus was to bring Orion investment data into the desktop experience of our white-labeled client portal, which our clients (the investment advisors) brand and distribute to their clients. Therefore, there was a new acquisition called for a new mobile app in this project.

I played a key role throughout the project, from defining the problem and conducting user provocations to designing, collaborating with engineers, and testing builds for quality assurance.

Goal

The primary focus was to bring Orion investment data into the desktop experience of our white-labeled client portal, which our clients (the investment advisors) brand

Challenge

The challenge of ensuring consistency in the desktop and mobile experience with a newly formed design system can be effectively managed, leading to a more cohesive and user-friendly product.

Solution

Build a MVP experience and give  clients a fully branded, one-stop-shop for all of their financial needs.

Research

Legacy Orion Mobile App Analysis

After I conducted some initial discovery research around the legacy mobile app, we were able to gather some valuable insights into its current functionality, user engagement, and areas requiring improvement.

Key insights

The legacy Orion mobile app felt dated

Lacked branding opportunities for the firm

Interactions were not intuitive

Lacked branding opportunities for the firm,

Financial Planning Intergration

Orion pushed the emphasis on financial planning after the integration of their newest acquisition, Advizr

Lack of Engagement Tools

Lack of engagement tools like push notifications and easy ways to sign in using biometrics like FaceID or TouchID
2 Challenges

Tight Deadline and Lack of a Mobile Design System

Before I started, there were two key challenges: the missing mobile design system and the 3-month time constraints. We had to innovate without a pre-existing mobile design system, working towards a solution that would make complex financial data comprehensible and manageable on smaller screens.

Prioritize Product Strategy

Build Mobile App Design System First

Therefore, it was crucial to prioritize tasks effectively. Me and Product Manager focused on identifying the most essential features and functionalities that needed to be implemented first. This approach ensured that developers could begin work on the critical components of the project.

Key Insights

Design Principles

Ensuring consistency and coherence across the app

UI Components and Patterns

Reusable design elements and unifying interaction patterns

Documentation

Comprehensive documentation captured the rationale behind
Adoption Hierarchy

Information Hierarchy Based On High Adoption

I create information hierarchy based on high adoption involves organizing content or data in a way that prioritizes the most widely adopted or important aspects at the top, ensuring that users or readers encounter the most relevant information first.

Mockup
Phase 1

Highest Adoption Rate

  • Overview page
  • Account page
Phase 2

Low Priority

  • News feed page
  • Push Notifications
FEature ideation

Prioritized Features for App MVP in Phase 1

I ideated on possible product features and prioritized them based on what are must-haves in Phase1 , further enhancement in Phase 2, and future for future product updates.

Wireframing

Low Fidelity Wireframe

Due to time constraints, I am seeking prompt feedback from the design team. Feedback from the internal critique was invaluable. It highlighted areas where the user flow could be streamlined and sparked discussions on how to better align the design with user expectations. This collaborative process underscored the importance of different viewpoints in refining our designs.

ITERATION

Internal Design Critiques

Due to time constraints, I am seeking prompt feedback from the design team. Feedback from the internal critique was invaluable. It highlighted areas where the user flow could be streamlined and sparked discussions on how to better align the design with user expectations. This collaborative process underscored the importance of different viewpoints in refining our designs.

Key Insights

Add Segment Controller

Easy navigation between different views or segments within the app
Mockup

Move the net worth value on top

An all-in-one customer service platform that helps you balance everything your customers need to be happy.

Change from pie to bar chart design

An all-in-one customer service platform that helps you balance everything your customers need to be happy.
Mockup

Mid-fidelity Wireframe

Key Insights

Stacked Allocation Value

Reduce clutter
Final solution

An overview of each tab in the client portal mobile app
Empower users to review their wealth and investment all from their phones

Phase 1

Overivew Tab

Displays the total value of each portfolio category

Displays an interactive graph of the Portfolio Value versus Net Amount Invested
Update the time interval for the graph directly below it using the timeframe buttons such as YTD, QTD, 2019, etc.
Displays the total value of each portfolio category
iPhone mockup

Account Tab

Breakdown of each account that is linked to the client portal

Breakdown of each account that is linked to the client portal
View the Portfolio Summary, Asset Allocation, Portfolio Return, and Transaction Summary for that particular account.
Displays the total value of each portfolio category
iPhone mockup
DELIVERABLE

Mobile Design System

Designing for Mobile vs Web

After reviewing the Hi-Fi wireframe with the team, I ensure the mobile components are updated before handoff to the engineers for production.

Customize List Components

Create a list row component for a mobile fintech application that can handle multiple combinations of data, including but not limited to account balances, transaction details, notifications, and financial insights.

reflection

Strategizing tailored user behavior specific to mobile experience

Designing for Mobile vs Web

Through this case study, I learned users behave very differently on their phone compared to the desktop and it can be action focused or less action oriented dependent on the industry you are designing it for.  Touch screens let users have a lot more interaction compared to the web. 

The Art of Building Components

This project was a valuable learning experience to accommodate various data types and user interactions. In future projects, I would spend more time on the design and prototyping phase, possibly using tools like Figma to test out ideas before moving to implementation. This reflection has also motivated me to explore more advanced techniques in performance optimization and accessibility to build more efficient and inclusive mobile application.