WEALTH MAGIK
A enhanced cross-platform experience to better support retail investors
TEAM
Natt (PM)
Noon (Sr. UX Designer)
Me (UX Designer)
Nuch (UX Designer)
TIMELINE
Jan - Dec 2020
OVERVIEW
In 2020, I helped WealthMagik, a FinTech company that provides investment data, with three projects that culminated in the redesign of two websites and launch of one new app for a better on-the-go experience.
AHANCER
X
MY CONTRIBUTION
User Research
Helped our team with planning, moderating, and analyzing the interviews and usability tests.
UX Strategy
Assisted in defining clear UX goals and processes that align with business objectives.
Information Architecture
Collaborated in creating new site maps based on research finding and hot jar click maps.
Wireframing
Orchestrated the creation of wireframes for our various flows such as benchmarking.
UI Design
Designed UI for Fund, Bond, and part of Portfolio modules ~ about a 1/3 of all UI screens.
Design System
Contributed to the design system documentation that went live on client’s GitHub.
DESIGN
The old UI theme
Having not undergone a redesign in several years, the current WealthMagik website felt outdated. To compound the issue, the WealthMagik Service website employs a completely different color palette, resulting in a disjointed user experience.
Defining the new UI theme
Since the new UI theme will form the basis of WealthMagik’s new design system to use across its roster of products and ecosystem, it was important that the visual language was modern and playful yet subtle to support the various complicated financial data and content.
Moodboard
We aimed for the new design to feel inviting, akin to a chef stepping into a kitchen where every tool is intuitively and neatly organized. This involves emphasizing generous white space for a clutter-free look, soft organic curvy shapes, a monochromatic blue color scheme for illustrations, and highlights of colorful flat shades for graphical elements.
UI Theme Exploration
We experimented several UI Themes on the WealthMagik Service portfolio dashboard page to fine-tune our color palette and stress testing various color combinations.
UI theme explorations for the Dashboard screen
Considering how the UI would look and feel on an app was just as important. Shown below is one of our later iterations where we applied it to how the WealthMagik app portfolio page might look. We also tried using gradients to accentuate data but ultimately opted against it.
Example of the UI theme applied to desktop and app
As some of the colors also hold semantic meaning for the financial data, it was crucial to select a color that remains distinguishable to individuals with any degree of color blindness.
How people with color blindness might perceive our light and dark theme
BACKGROUND
Launched in 2012, WealthMagik offers comprehensive data on investments like Mutual Funds to retail investors (non-professionals). The company has three products in its ecosystem that focuses on Investment Data, Financial Planning, and Mutual Fund Trading.
WealthMagik is a leading wealth management platform in Thailand that provides financial information to the everyday investor.
Despite being an early mover in the market, the company’s product websites had not been updated for several years and was plagued with usability issues that hampered ease of use and conversion to the paid plan. Our project objectives were as follows:
Our project goals focused on creating a unified and seamless cross-platform user experience for WealthMagik and WealthMagik Service.
Revamp the WealthMagik website to make the product offering more clear and optimize the experience for finding and accessing financial information.
01
02
03
Redesign the WealthMagik Service website to make it more intuitive to add assets to their portfolio to increase conversion.
Design the all new WealthMagik app that will streamline key features and provide a more personalized on-the-go experience for customers.
Investment Data
Existing Platform:
Website
WealthMagik is the company’s core product that provides comprehensive financial data across a variety of asset classes, though most notable for its robust Mutual Fund data.
Financial Planning
Existing Platform:
Website
iOS & Android
Branded as the premium paid tier, WealthMagik Service provides exclusive portfolio management tools to help retail investors get a clear line of sight into their portfolio performance.
Mutual Fund Trading
Existing Platform:
Website
iOS & Android
WealthMagik Trading is the company’s Mutual Fund Brokerage service that offers a wide array of mutual funds from different fund families through a single investing platform.
02 WealthMagik App
Browse WealthMagik's most popular fund rankings to discover potential new investments.
Broaden your investment horizons with screening tools such as Top Returns, or focus your search on a specific sector like Healthcare, a category like Fund IPOs, or the world of bonds.
Final Experience
Get a quick X-Ray into any mutual fund's data, from performance metrics to management fees.
Quickly access historical performance, risk profile, asset allocation, and dividend payouts. The fund tier pyramid visualization shows how your fund compares to its peers in terms of percentiles, providing valuable insights into its relative performance.
Enhance your decision-making by comparing between many mutual funds side by side.
In the Fund Screener tab you can quickly compare different funds and evaluate their performance relative to each other to gain a comprehensive understanding of how they differ.
Stay informed about your portfolio's performance across diverse asset classes with real-time data updates.
Construct your portfolio by inputting funds based on historical transactions or current holdings' present-day values. For multiple portfolios, access a consolidated overview to evaluate your overall performance and asset allocations.
Evaluate individual funds or your entire portfolio's performance to benchmarks that makes sense.
Assess your portfolio's relative performance against peers and gain additional insight by comparing individual funds to their relevant benchmarks or your entire portfolio to a benchmark with a similar weighted return profile.
For the WealthMagik app, our team explored various screen configurations and layout that prioritized different jobs-to-be done such as browsing, comparing, or tracking.
The 'portfolio first' approach
This wireframe concept places the Portfolio at the forefront, ensuring that when users open the app, they have a direct view into its performance, along with easy access to optimization tools, search, and ranking features in the sticky bottom navigation.
Health Check > Optimize Portfolio (secondary page)
The 'discovery first' approach
This wireframe concept's home screen enhances the discovery of fund types and facilitates tracking favorites through the watchlist feature. Although the portfolio is accessible in the fourth sticky navigation tab, it occupies a less prominent position.
Accessing fund information takes priority over portfolio
Wireframes
03 WealthService Web
Final Experience
1. Start building your portfolio by adding your investments.
Create a portfolio for mutual funds, stocks, or bonds. Similar to the process in the WealthMagik app, add funds by inputting historical transactions or current holdings' present-day values, and access a comprehensive portfolio overview in the dashboard.
2. Monitor portfolio drift to know when to rebalance.
Gain insight into your portfolio by tracking performance across asset types to see if you have too much or little exposure. Stay informed on when to rebalance, by tracking your portfolio drift based on your ideal allocation (choose from presets or customize as desired).
3. Keep tabs on the essential details of your individual funds, all the way to the bigger picture of your portfolio performance.
Access key portfolio details in the side panel, including Transactions and Dividends. Review specific fund data, such as past buy/sell orders and accrued dividends. Utilize the benchmark page to assess both individual fund and overall portfolio performance.
Streamline your investment management with the consolidated view.
Obtain a comprehensive overview of all your investment portfolios in one consolidated view. Toggle between brokerages, asset classes, and portfolio owners view, while staying informed about corporate actions and tracking your investment goals.
REFLECTION
Most of the usability problems were a result of the absence of a robust design system.
Throughout this multi-phase project, I conducted usability tests with 30 participants and the major culprits for usability issues I noticed came from trying to reinvent the wheel by creating new components that didn't adhere to UX best practices, especially on the mobile app, where hovering to identify clickable elements is not an option.
Responding to curveballs and solving the right problems.
For the WealthMagik Service project, our initial objective was to simplify the process of tracking and analyzing portfolio performance. However, through our wireframe prototype testing, we identified that the process of adding funds to users' portfolios was a major pain point. This insight helped shaped our design approach, ultimately resulting in a redesign that generated excitement among users.
01 WealthMagik Web
Responsive Sizes
The new homepage makes discovering promising mutual fund and bond investments, tracking your favorited funds, and learning more about the potential of WealthMagik Service's portfolio optimization as easy as waving a wand.
Your personal gateway to an array of financial information
Evaluating fund performance has never been easier. You can now compare fund performance effortlessly, by simply clicking on the funds you want to analyze, you can quickly compare their historical performance side by side.
Supercharge your evaluation with effortless fund comparisons
The redesign makes it easier to view bond data from the Primary and Secondary Thai markets. The introduction of the bond yield insights data visualization also simplifies bond comparisons and facilitates the discovery of similar bonds with varying risk profiles.
A more seamless bond browsing experience
Whether you're a seasoned retail investor or a novice, our redesigned fund detail tabs streamline information retrieval. Mutual fund information is now organized into bite-sized sections with enhanced data visualizations, including a similar fund list for further discovery.
A more streamlined approach to accessing fund details
When the designing the UI for the wealthmagik.com website it was important that we also considered how the content would appear on different screen sizes. This was especially true for pages that had a lot of information or data like the fund detail.
Mobile Portrait
Mobile Landscape
Tablet
Small Laptop
Desktop
Large Desktop
0-575px
576-767px
768-921px
922-1279px
1280-1480px
1481px+
