Mobile App Design
CapitalMind Portfolio Management System
Mobile App Design
CapitalMind Portfolio Management System
Mobile App Design
CapitalMind Portfolio Management System
UX Research
UX Design
Design System
Visual & Interaction Design
Designed for
Designed for
Designed for
Overview
Overview
Overview
CapitalMind is a rapidly growing, Bangalore based investment research and wealth management startups in India - made specially for large capital investors. The Capitalmind Wealth is a dedicated, clear, cost-effective, and customized portfolio management service.
This online financial planning & portfolio management platform for investors allows users to invest in stocks, debts, indices, ETFs, and more. It also provides a platform to track performance reports, portfolio details and tax-statements.
CapitalMind is a rapidly growing, Bangalore based investment research and wealth management startups in India - made specially for large capital investors. The Capitalmind Wealth is a dedicated, clear, cost-effective, and customized portfolio management service.
This online financial planning & portfolio management platform for investors allows users to invest in stocks, debts, indices, ETFs, and more. It also provides a platform to track performance reports, portfolio details and tax-statements.
CapitalMind is a rapidly growing, Bangalore based investment research and wealth management startups in India - made specially for large capital investors. The Capitalmind Wealth is a dedicated, clear, cost-effective, and customized portfolio management service.
This online financial planning & portfolio management platform for investors allows users to invest in stocks, debts, indices, ETFs, and more. It also provides a platform to track performance reports, portfolio details and tax-statements.
Role, Team & Duration
Role, Team & Duration
Role, Team & Duration
User Experience Design Intern at HumanX
User Experience Design Intern at HumanX
User Experience Design Intern at HumanX
Worked with Tejaswi Borkar and Anshini Chitania
Worked with Tejaswi Borkar and Anshini Chitania
Worked with Tejaswi Borkar and Anshini Chitania
June 2022 - August 2022
June 2022 - August 2022
June 2022 - August 2022
The Challenge
The Challenge
The Challenge
Capitalmind Wealth had an existing desktop PMS platform, and now, due to the their market growth, the team required a redesigned, and improve mobile app to enhance customer experience.
Capitalmind Wealth had an existing desktop PMS platform, and now, due to the their market growth, the team required a redesigned, and improve mobile app to enhance customer experience.
Capitalmind Wealth had an existing desktop PMS platform, and now, due to the their market growth, the team required a redesigned, and improve mobile app to enhance customer experience.
While Capitalmind did possess comprehensive branding guidelines, the team desired a visual language in the mobile app which, while derived from their existing design system, had noticeable enhancements and improvements.
While Capitalmind did possess comprehensive branding guidelines, the team desired a visual language in the mobile app which, while derived from their existing design system, had noticeable enhancements and improvements.
While Capitalmind did possess comprehensive branding guidelines, the team desired a visual language in the mobile app which, while derived from their existing design system, had noticeable enhancements and improvements.
The Process
The Process
The Process
Establishing the groundwork.
Establishing the groundwork.
Establishing the groundwork.
During this phase, we initiated the process with benchmarking. We examined the references and the list of competitors provided by the client, in addition to engaging in discussions with the team regarding their business model. We had detailed conversations about their current scope, future plans, and whether the team wished for us to incorporate any new features into the mobile application. Furthermore, we addressed the features in the current platform that contributed to an influx of support tickets.
During this phase, we initiated the process with benchmarking. We examined the references and the list of competitors provided by the client, in addition to engaging in discussions with the team regarding their business model. We had detailed conversations about their current scope, future plans, and whether the team wished for us to incorporate any new features into the mobile application. Furthermore, we addressed the features in the current platform that contributed to an influx of support tickets.
During this phase, we initiated the process with benchmarking. We examined the references and the list of competitors provided by the client, in addition to engaging in discussions with the team regarding their business model. We had detailed conversations about their current scope, future plans, and whether the team wished for us to incorporate any new features into the mobile application. Furthermore, we addressed the features in the current platform that contributed to an influx of support tickets.
Conducting Thorough Industry research
Conducting Thorough Industry research
Conducting Thorough Industry research
During this project, we conducted a comprehensive 7-day research endeavor. The primary objective of the team was to collect qualitative data concerning user behaviors and sentiments related to general fintech products and portfolio management services similar to Capitalmind. We opted to focus our primary emphasis on the following three key areas:
During this project, we conducted a comprehensive 7-day research endeavor. The primary objective of the team was to collect qualitative data concerning user behaviors and sentiments related to general fintech products and portfolio management services similar to Capitalmind. We opted to focus our primary emphasis on the following three key areas:
During this project, we conducted a comprehensive 7-day research endeavor. The primary objective of the team was to collect qualitative data concerning user behaviors and sentiments related to general fintech products and portfolio management services similar to Capitalmind. We opted to focus our primary emphasis on the following three key areas:
Gaining a comprehensive understanding of the user base and the target audience for this app.
Gaining a comprehensive understanding of the user base and the target audience for this app.
Gaining a comprehensive understanding of the user base and the target audience for this app.
Getting to know which features would benefit these users and identifying aspects of the current platform that are challenging for them to use.
Getting to know which features would benefit these users and identifying aspects of the current platform that are challenging for them to use.
Getting to know which features would benefit these users and identifying aspects of the current platform that are challenging for them to use.
Understanding the evolving business model of Capital Mind, with a detailed focus on their specific requirements, in order to create an experience that benefits both the business and their clientele.
Understanding the evolving business model of Capital Mind, with a detailed focus on their specific requirements, in order to create an experience that benefits both the business and their clientele.
Understanding the evolving business model of Capital Mind, with a detailed focus on their specific requirements, in order to create an experience that benefits both the business and their clientele.
To obtain accurate information concerning the needs and pain points of real users, we conducted user interviews with five participants. Our objective was to comprehend how & why they utilize the platform, as well as when they typically engage with it. This exercise enabled us to uncover significant issues and requirements that would have otherwise remained undiscovered.
To obtain accurate information concerning the needs and pain points of real users, we conducted user interviews with five participants. Our objective was to comprehend how & why they utilize the platform, as well as when they typically engage with it. This exercise enabled us to uncover significant issues and requirements that would have otherwise remained undiscovered.
To obtain accurate information concerning the needs and pain points of real users, we conducted user interviews with five participants. Our objective was to comprehend how & why they utilize the platform, as well as when they typically engage with it. This exercise enabled us to uncover significant issues and requirements that would have otherwise remained undiscovered.
What Did The Users Say?
What Did The Users Say?
What Did The Users Say?
"I'd really appreciate a dashboard that's user-friendly."
"I'd really appreciate a dashboard that's user-friendly."
"I'd really appreciate a dashboard that's user-friendly."
"The data access seems limited, and the visualizations are quite complex and time-consuming to interpret."
"The data access seems limited, and the visualizations are quite complex and time-consuming to interpret."
"The data access seems limited, and the visualizations are quite complex and time-consuming to interpret."
"I'm looking for a clear explanation of risk and investment analysis to help me spot and manage potential financial risks."
"I'm looking for a clear explanation of risk and investment analysis to help me spot and manage potential financial risks."
"I'm looking for a clear explanation of risk and investment analysis to help me spot and manage potential financial risks."
"Having educational resources easily accessible within the app would be a great addition."
"Having educational resources easily accessible within the app would be a great addition."
"Having educational resources easily accessible within the app would be a great addition."
"Creating and navigating support tickets should be straightforward."
"Creating and navigating support tickets should be straightforward."
"Creating and navigating support tickets should be straightforward."
"Quick access to financial statements and the ability to view reports at a glance is important to me."
"Quick access to financial statements and the ability to view reports at a glance is important to me."
"Quick access to financial statements and the ability to view reports at a glance is important to me."
"I'd like the platform to support communication and collaboration with my team members for making well-informed financial decisions."
"I'd like the platform to support communication and collaboration with my team members for making well-informed financial decisions."
"I'd like the platform to support communication and collaboration with my team members for making well-informed financial decisions."
"It's crucial that the platform allows for multiple accounts."
"It's crucial that the platform allows for multiple accounts."
"It's crucial that the platform allows for multiple accounts."
"I need advanced analytics tools for conducting in-depth financial analysis."
"I need advanced analytics tools for conducting in-depth financial analysis."
"I need advanced analytics tools for conducting in-depth financial analysis."
Apart from user interviews, we also conducted a thorough competitor analysis, which provided us with valuable insights regarding the competitive landscape and market trends. This comprehensive research allowed us to better understand the strengths and weaknesses of existing solutions, enabling us to design a product that not only meets user needs but also stands out in the market.
Apart from user interviews, we also conducted a thorough competitor analysis, which provided us with valuable insights regarding the competitive landscape and market trends. This comprehensive research allowed us to better understand the strengths and weaknesses of existing solutions, enabling us to design a product that not only meets user needs but also stands out in the market.
Apart from user interviews, we also conducted a thorough competitor analysis, which provided us with valuable insights regarding the competitive landscape and market trends. This comprehensive research allowed us to better understand the strengths and weaknesses of existing solutions, enabling us to design a product that not only meets user needs but also stands out in the market.
Ideating the solution
Ideating the solution
Ideating the solution
We had reached the 2nd week of June by this point. After completing our research and gaining a better understanding of the product, we began creating personas to clearly differentiate between users' needs and pain points. This way, we could address all of them and provide a beautiful, user-friendly experience.
We ended up with the following three main personas.
We had reached the 2nd week of June by this point. After completing our research and gaining a better understanding of the product, we began creating personas to clearly differentiate between users' needs and pain points. This way, we could address all of them and provide a beautiful, user-friendly experience.
We ended up with the following three main personas.
We had reached the 2nd week of June by this point. After completing our research and gaining a better understanding of the product, we began creating personas to clearly differentiate between users' needs and pain points. This way, we could address all of them and provide a beautiful, user-friendly experience.
We ended up with the following three main personas.
To enhance the customer experience, we proceeded by developing a presentation outlining recommended features. This was done after thorough analysis of user requirements and industry trends. Implementing these enhancements would significantly elevate the application's value compared to the current platform, ultimately driving increased app usage.
To enhance the customer experience, we proceeded by developing a presentation outlining recommended features. This was done after thorough analysis of user requirements and industry trends. Implementing these enhancements would significantly elevate the application's value compared to the current platform, ultimately driving increased app usage.
To enhance the customer experience, we proceeded by developing a presentation outlining recommended features. This was done after thorough analysis of user requirements and industry trends. Implementing these enhancements would significantly elevate the application's value compared to the current platform, ultimately driving increased app usage.
At the end of this phase, we suggested the following additional features to complement the existing ones for the redesign of mobile application.
At the end of this phase, we suggested the following additional features to complement the existing ones for the redesign of mobile application.
At the end of this phase, we suggested the following additional features to complement the existing ones for the redesign of mobile application.
Refer a friend/Rewards
Refer a friend/Rewards
Refer a friend/Rewards
Risk Profiling
Risk Profiling
Risk Profiling
Highlight Deepak’s Memos
Highlight Deepak’s Memos
Highlight Deepak’s Memos
Smooth and intuitive flow for Add Funds
Smooth and intuitive flow for Add Funds
Smooth and intuitive flow for Add Funds
User-friendly Support Flow
User-friendly Support Flow
User-friendly Support Flow
Finally, we formulated three primary "How Might We" questions to ensure that the end result addresses real user needs, is inclusive of all personas, and incorporates a delight factor that makes it stand out.
Finally, we formulated three primary "How Might We" questions to ensure that the end result addresses real user needs, is inclusive of all personas, and incorporates a delight factor that makes it stand out.
Finally, we formulated three primary "How Might We" questions to ensure that the end result addresses real user needs, is inclusive of all personas, and incorporates a delight factor that makes it stand out.
1.
1.
1.
How Might We make the user journey of the redesigned application better & easily accessible for the users?
How Might We make the user journey of the redesigned application better & easily accessible for the users?
How Might We make the user journey of the redesigned application better & easily accessible for the users?
2.
2.
2.
How Might We make the data visualisation better and more accessible?
How Might We make the data visualisation better and more accessible?
How Might We make the data visualisation better and more accessible?
3.
3.
3.
How Might We add new delightful features to the application which makes the experience memorable?
How Might We add new delightful features to the application which makes the experience memorable?
How Might We add new delightful features to the application which makes the experience memorable?
We followed this by creating a detailed Information Architecture, which was organized according to our initial discussions. However, during the wireframing phase, we made slight changes to the IA based on client requirements.
We followed this by creating a detailed Information Architecture, which was organized according to our initial discussions. However, during the wireframing phase, we made slight changes to the IA based on client requirements.
We followed this by creating a detailed Information Architecture, which was organized according to our initial discussions. However, during the wireframing phase, we made slight changes to the IA based on client requirements.
Designing the product.
Designing the product.
Designing the product.
We started creating low fidelity wireframes for all the different user flows and journeys. This included a lot of discussion internally and with the clients. Each of these user flows presented a unique set of challenges, requiring us to iterate through numerous ideas before arriving at a solution that effectively addressed all of the problems. The following images showcase the initial version versus the final version of the wireframe designs. There were several iterations before we arrived at the designs that were well-received by both the clients and the users. We conducted continuous testing of the designs after each iteration.
We started creating low fidelity wireframes for all the different user flows and journeys. This included a lot of discussion internally and with the clients. Each of these user flows presented a unique set of challenges, requiring us to iterate through numerous ideas before arriving at a solution that effectively addressed all of the problems. The following images showcase the initial version versus the final version of the wireframe designs. There were several iterations before we arrived at the designs that were well-received by both the clients and the users. We conducted continuous testing of the designs after each iteration.
We started creating low fidelity wireframes for all the different user flows and journeys. This included a lot of discussion internally and with the clients. Each of these user flows presented a unique set of challenges, requiring us to iterate through numerous ideas before arriving at a solution that effectively addressed all of the problems. The following images showcase the initial version versus the final version of the wireframe designs. There were several iterations before we arrived at the designs that were well-received by both the clients and the users. We conducted continuous testing of the designs after each iteration.
Onboarding
Onboarding
Onboarding
Final version for Onboarding wireframes
Final version for Onboarding wireframes
Final version for Onboarding wireframes
Previous Iterations
Previous Iterations
Previous Iterations
Major challenges faced
Major challenges faced
Major challenges faced
Creating a clear & simple process for quick onboarding.
Creating a clear & simple process for quick onboarding.
Creating a clear & simple process for quick onboarding.
Users have different phones with certain constraints, and differences in their user journeys depending on some factors. For example, we wanted to have biometric logins, but ios devices may not have a fingerprint lock, and an android may not have either a fingerprint or a face lock.
Users have different phones with certain constraints, and differences in their user journeys depending on some factors. For example, we wanted to have biometric logins, but ios devices may not have a fingerprint lock, and an android may not have either a fingerprint or a face lock.
Users have different phones with certain constraints, and differences in their user journeys depending on some factors. For example, we wanted to have biometric logins, but ios devices may not have a fingerprint lock, and an android may not have either a fingerprint or a face lock.
How we solved for it
How we solved for it
How we solved for it
Discussions on a number of user journeys internally and with the client to find out which one works the best.
Discussions on a number of user journeys internally and with the client to find out which one works the best.
Discussions on a number of user journeys internally and with the client to find out which one works the best.
Different user journeys, depending on scenarios and the mobile constraint.
Different user journeys, depending on scenarios and the mobile constraint.
Different user journeys, depending on scenarios and the mobile constraint.
Dashboard
Dashboard
Dashboard
Final version for Dashboard wireframes
Final version for Dashboard wireframes
Previous Iterations
Previous Iterations
Major challenges faced
Major challenges faced
Major challenges faced
Decluttering the vast amount of data available to be shown on the dashboard.
Decluttering the vast amount of data available to be shown on the dashboard.
Decluttering the vast amount of data available to be shown on the dashboard.
Narrowing down the sections to be shown on the dashboard for a delightful experience.
Narrowing down the sections to be shown on the dashboard for a delightful experience.
Narrowing down the sections to be shown on the dashboard for a delightful experience.
Discoverability of a number of features.
Discoverability of a number of features.
Discoverability of a number of features.
How we solved for it
How we solved for it
Minimizing the amount of portfolio-related data shown on the dashboard, and simplifying the first fold.
Minimizing the amount of portfolio-related data shown on the dashboard, and simplifying the first fold.
Minimizing the amount of portfolio-related data shown on the dashboard, and simplifying the first fold.
To narrow down the information, we had discussions with the client regarding sections & features are most useful to the users.
To narrow down the information, we had discussions with the client regarding sections & features are most useful to the users.
To narrow down the information, we had discussions with the client regarding sections & features are most useful to the users.
Introducing relatable and useful features in the dashboard like ‘recent portfolio updates’. We also added ‘Deepak’s monthly memos’ which are educational resources published monthly, written by Deepak Shenoy, the CEO of Capitalmind itself. Adding it on the dashboard would increase its discoverability.
Introducing relatable and useful features in the dashboard like ‘recent portfolio updates’. We also added ‘Deepak’s monthly memos’ which are educational resources published monthly, written by Deepak Shenoy, the CEO of Capitalmind itself. Adding it on the dashboard would increase its discoverability.
Introducing relatable and useful features in the dashboard like ‘recent portfolio updates’. We also added ‘Deepak’s monthly memos’ which are educational resources published monthly, written by Deepak Shenoy, the CEO of Capitalmind itself. Adding it on the dashboard would increase its discoverability.
Investment Portfolio Tab
Investment Portfolio Tab
Investment Portfolio Tab
Final version for Portfolio wireframes
Final version for Portfolio wireframes
Final version for Portfolio wireframes
Previous Iterations
Previous Iterations
Previous Iterations
Major challenges faced
Major challenges faced
Major challenges faced
Asset allocation visualization for proper understanding.
Asset allocation visualization for proper understanding.
Asset allocation visualization for proper understanding.
Proper layout and structure for the different assets and details for each. Simple & clear entry points for each asset breakdown page.
Proper layout and structure for the different assets and details for each. Simple & clear entry points for each asset breakdown page.
Proper layout and structure for the different assets and details for each. Simple & clear entry points for each asset breakdown page.
Proper layouting and data visualization for P&L graph for an intuitive experience. Clients also requested us to find out ways to link these entries to related reports.
Proper layouting and data visualization for P&L graph for an intuitive experience. Clients also requested us to find out ways to link these entries to related reports.
Proper layouting and data visualization for P&L graph for an intuitive experience. Clients also requested us to find out ways to link these entries to related reports.
How we solved for it
How we solved for it
How we solved for it
We focussed on data visualisation methods that have a distribution view like pie charts, rather than using bar graphs that don't show the percentage division of allocation.
We focussed on data visualisation methods that have a distribution view like pie charts, rather than using bar graphs that don't show the percentage division of allocation.
We focussed on data visualisation methods that have a distribution view like pie charts, rather than using bar graphs that don't show the percentage division of allocation.
Using tabs to have a compact visualisation, which saved space and gave quicker readability. This also kept the screen decluttered.
Using tabs to have a compact visualisation, which saved space and gave quicker readability. This also kept the screen decluttered.
Using tabs to have a compact visualisation, which saved space and gave quicker readability. This also kept the screen decluttered.
A unique layout for listing P&L entries along with related reports.
A unique layout for listing P&L entries along with related reports.
A unique layout for listing P&L entries along with related reports.
Add Funds Flow
Add Funds Flow
Add Funds Flow
Final version for 'add funds' wireframes
Final version for 'add funds' wireframes
Final version for 'add funds' wireframes
Previous Iterations
Previous Iterations
Previous Iterations
Major challenges faced
Setting clear entry points for one-time and recurring payment options.
Setting clear entry points for one-time and recurring payment options.
Setting clear entry points for one-time and recurring payment options.
Simple flows for one-time and recurring payment methods. Discoverability issues for recurring options.
Simple flows for one-time and recurring payment methods. Discoverability issues for recurring options.
Simple flows for one-time and recurring payment methods. Discoverability issues for recurring options.
New features being added to this flow could be confusing for old users.
New features being added to this flow could be confusing for old users.
New features being added to this flow could be confusing for old users.
After adding new funds to their account, users had to an option to either confirm the capitalmind allocation, or change it to any random allocation and sending it to the capitalmind team for confirmation. Most of these custom allocations were done by non professionals, hence weren’t suitable. This led to a lot of support tickets in the backend.
After adding new funds to their account, users had to an option to either confirm the capitalmind allocation, or change it to any random allocation and sending it to the capitalmind team for confirmation. Most of these custom allocations were done by non professionals, hence weren’t suitable. This led to a lot of support tickets in the backend.
After adding new funds to their account, users had to an option to either confirm the capitalmind allocation, or change it to any random allocation and sending it to the capitalmind team for confirmation. Most of these custom allocations were done by non professionals, hence weren’t suitable. This led to a lot of support tickets in the backend.
How we solved for it
We kept one-time payments and recurring in tabs for easy switching and proper discoverability. For recurring, the 2 options are clearly distinguished and explained.
We kept one-time payments and recurring in tabs for easy switching and proper discoverability. For recurring, the 2 options are clearly distinguished and explained.
We kept one-time payments and recurring in tabs for easy switching and proper discoverability. For recurring, the 2 options are clearly distinguished and explained.
Easy one-page layout for a one-time payment; SimpleTwo step flow for setting up investment reminders, & clear instructions for setting up an auto-debit.
Easy one-page layout for a one-time payment; SimpleTwo step flow for setting up investment reminders, & clear instructions for setting up an auto-debit.
Easy one-page layout for a one-time payment; SimpleTwo step flow for setting up investment reminders, & clear instructions for setting up an auto-debit.
Intro pages for add funds & investment reminder, with carousels to explain new features or updates.
Intro pages for add funds & investment reminder, with carousels to explain new features or updates.
Intro pages for add funds & investment reminder, with carousels to explain new features or updates.
Simplified the asset allocation experience while adding more funds by giving the user 3 options to choose from, or contact the support team for a custom allocation.
Simplified the asset allocation experience while adding more funds by giving the user 3 options to choose from, or contact the support team for a custom allocation.
Simplified the asset allocation experience while adding more funds by giving the user 3 options to choose from, or contact the support team for a custom allocation.
Financial Reports
Financial Reports
Financial Reports
Final version for reports wireframes
Final version for reports wireframes
Final version for reports wireframes
Previous Iterations
Previous Iterations
Previous Iterations
Major challenges faced
Major challenges faced
Major challenges faced
In depth understanding of each report.
In depth understanding of each report.
In depth understanding of each report.
Ensuring a consistent reading experience for all the reports was challenging because they were all very different from each other and had various constraints.
Ensuring a consistent reading experience for all the reports was challenging because they were all very different from each other and had various constraints.
Ensuring a consistent reading experience for all the reports was challenging because they were all very different from each other and had various constraints.
Viewing scheduled reports in the midst of all reports listing
Viewing scheduled reports in the midst of all reports listing
Viewing scheduled reports in the midst of all reports listing
Incorporating Bulk Download feature to the design
Incorporating Bulk Download feature to the design
Incorporating Bulk Download feature to the design
How we solved for it
How we solved for it
Detailed discussions with clients, research and design iterations.
Detailed discussions with clients, research and design iterations.
Detailed discussions with clients, research and design iterations.
Different layouting and structuring for each report, depending on its nature.
Different layouting and structuring for each report, depending on its nature.
Different layouting and structuring for each report, depending on its nature.
Different tabs for all reports (& download) and scheduled reports.
Different tabs for all reports (& download) and scheduled reports.
Different tabs for all reports (& download) and scheduled reports.
Added bulk download entry point from all reports tab.
Added bulk download entry point from all reports tab.
Added bulk download entry point from all reports tab.
Other Features
Other Features
Other Features
Final wireframes for some other features
Final wireframes for some other features
Final wireframes for some other features
Previous Iterations
Previous Iterations
Previous Iterations
Major challenges faced
Major challenges faced
Major challenges faced
Reducing Support tickets, while creating an intuitive & simple journey to create and track support tickets.
Reducing Support tickets, while creating an intuitive & simple journey to create and track support tickets.
Reducing Support tickets, while creating an intuitive & simple journey to create and track support tickets.
Risk and Investment profile had too much text content and looked cluttered.
Risk and Investment profile had too much text content and looked cluttered.
Risk and Investment profile had too much text content and looked cluttered.
Creating an entry point for switching profile, risk and investment profile, as well as various profile settings.
Creating an entry point for switching profile, risk and investment profile, as well as various profile settings.
Creating an entry point for switching profile, risk and investment profile, as well as various profile settings.
Finalising and filtering the details to include on the strategies cards, as well as the structuring of product pages.
Finalising and filtering the details to include on the strategies cards, as well as the structuring of product pages.
Finalising and filtering the details to include on the strategies cards, as well as the structuring of product pages.
How we solved for it
How we solved for it
We added FAQs to reduce support tickets against simple or common doubts.
We added FAQs to reduce support tickets against simple or common doubts.
We added FAQs to reduce support tickets against simple or common doubts.
Created support home page with entry points to FAQs, new tickets, as well as ticket history.
Created support home page with entry points to FAQs, new tickets, as well as ticket history.
Created support home page with entry points to FAQs, new tickets, as well as ticket history.
Inbuilt chat interface for a seamless experience.
Inbuilt chat interface for a seamless experience.
Inbuilt chat interface for a seamless experience.
Dedicated pages for risk and investment profiles. Most of the data is shown through graphs to reduce clutter.
Dedicated pages for risk and investment profiles. Most of the data is shown through graphs to reduce clutter.
Dedicated pages for risk and investment profiles. Most of the data is shown through graphs to reduce clutter.
We created a Profile page enabling profile switch, quick view of risk and investment profiles, as well as all the other profile settings.
We created a Profile page enabling profile switch, quick view of risk and investment profiles, as well as all the other profile settings.
We created a Profile page enabling profile switch, quick view of risk and investment profiles, as well as all the other profile settings.
Kept fewer details, and used big texts and illustration placeholders on the landing screen of ‘refer a friend’.
Kept fewer details, and used big texts and illustration placeholders on the landing screen of ‘refer a friend’.
Kept fewer details, and used big texts and illustration placeholders on the landing screen of ‘refer a friend’.
We discussed the data available for strategies and narrowed down the most important ones for the target audience.
We discussed the data available for strategies and narrowed down the most important ones for the target audience.
We discussed the data available for strategies and narrowed down the most important ones for the target audience.
After receiving approval from all stakeholders, we tested our wireframes with a couple of users. After a few more iterations, we gained confidence in our final wireframes and their user experience, so we proceeded with the high-fidelity designs.
After receiving approval from all stakeholders, we tested our wireframes with a couple of users. After a few more iterations, we gained confidence in our final wireframes and their user experience, so we proceeded with the high-fidelity designs.
After receiving approval from all stakeholders, we tested our wireframes with a couple of users. After a few more iterations, we gained confidence in our final wireframes and their user experience, so we proceeded with the high-fidelity designs.
Visualising the interface
Visualising the interface
Visualising the interface
After finalizing the wireframes for the user experience, we began working on the visual design, which included mood boards, design systems, and the final high-fidelity designs.
After finalizing the wireframes for the user experience, we began working on the visual design, which included mood boards, design systems, and the final high-fidelity designs.
After finalizing the wireframes for the user experience, we began working on the visual design, which included mood boards, design systems, and the final high-fidelity designs.
Moodboard
Moodboard
Moodboard
Among other options, we settled on two styles to present to the client:
Dark, Modern, Sophisticated: This style featured dark colors, bold typography, grids, and contour elements, giving it a modern and elegant look.
Light, Youthful, Fluid: This style leaned towards lighter themes, incorporating images and a wider color palette. It used both serif and sans-serif fonts for contrast.
The client chose the first style but asked for both dark and light modes in the app. As a result, we primarily designed the UI in dark mode and implemented a system for easily switching between dark and light modes. Each color used in the dark mode UI had a corresponding counterpart in light mode.
Among other options, we settled on two styles to present to the client:
Dark, Modern, Sophisticated: This style featured dark colors, bold typography, grids, and contour elements, giving it a modern and elegant look.
Light, Youthful, Fluid: This style leaned towards lighter themes, incorporating images and a wider color palette. It used both serif and sans-serif fonts for contrast.
The client chose the first style but asked for both dark and light modes in the app. As a result, we primarily designed the UI in dark mode and implemented a system for easily switching between dark and light modes. Each color used in the dark mode UI had a corresponding counterpart in light mode.
Among other options, we settled on two styles to present to the client:
Dark, Modern, Sophisticated: This style featured dark colors, bold typography, grids, and contour elements, giving it a modern and elegant look.
Light, Youthful, Fluid: This style leaned towards lighter themes, incorporating images and a wider color palette. It used both serif and sans-serif fonts for contrast.
The client chose the first style but asked for both dark and light modes in the app. As a result, we primarily designed the UI in dark mode and implemented a system for easily switching between dark and light modes. Each color used in the dark mode UI had a corresponding counterpart in light mode.
Design System
Design System
Design System
Our main color was Capitalmind Wealth Green, chosen for brand recognition, complemented by mint and dark green for contrast. We also used shades of orange and yellow as secondary colors for graphs and charts.
The entire design system maintains a minimal, sleek approach, allowing for seamless transitions between dark and light modes.
Our main color was Capitalmind Wealth Green, chosen for brand recognition, complemented by mint and dark green for contrast. We also used shades of orange and yellow as secondary colors for graphs and charts.
The entire design system maintains a minimal, sleek approach, allowing for seamless transitions between dark and light modes.
Our main color was Capitalmind Wealth Green, chosen for brand recognition, complemented by mint and dark green for contrast. We also used shades of orange and yellow as secondary colors for graphs and charts.
The entire design system maintains a minimal, sleek approach, allowing for seamless transitions between dark and light modes.
High Fidelity Prototypes
High Fidelity Prototypes
High Fidelity Prototypes
We focused on improving layout and content visualization to reduce cognitive load. We incorporated shades of orange and yellow into certain cards to provide contrast and balance to the overall visual system, preventing monotony in the application.
During this phase, our process primarily involved rapid prototyping and client feedback. After several iterations, we gained confidence in the final designs, which were then tested with a few real users.
We focused on improving layout and content visualization to reduce cognitive load. We incorporated shades of orange and yellow into certain cards to provide contrast and balance to the overall visual system, preventing monotony in the application.
During this phase, our process primarily involved rapid prototyping and client feedback. After several iterations, we gained confidence in the final designs, which were then tested with a few real users.
We focused on improving layout and content visualization to reduce cognitive load. We incorporated shades of orange and yellow into certain cards to provide contrast and balance to the overall visual system, preventing monotony in the application.
During this phase, our process primarily involved rapid prototyping and client feedback. After several iterations, we gained confidence in the final designs, which were then tested with a few real users.
Concluding the project
Concluding the project
Concluding the project
We tested these designs with a few actual clients and received highly positive responses. Subsequently, we handed over the designs, along with their respective prototypes, to the Capitalmind team, marking the conclusion of this design project.
Even though the design phase had concluded, we constantly oversaw the development process to ensure consistency between the designs and the final product.
I learned a lot from this project. Early on, extensive research helped us grasp the domain and propose new features. Our constant brainstorming sessions and swift prototyping ensured that we considered all aspects of the problem to create the best possible user experience. Iterative testing after each phase kept us on the right track, ensuring that the design was both inclusive and delightful for all users.
We tested these designs with a few actual clients and received highly positive responses. Subsequently, we handed over the designs, along with their respective prototypes, to the Capitalmind team, marking the conclusion of this design project.
Even though the design phase had concluded, we constantly oversaw the development process to ensure consistency between the designs and the final product.
I learned a lot from this project. Early on, extensive research helped us grasp the domain and propose new features. Our constant brainstorming sessions and swift prototyping ensured that we considered all aspects of the problem to create the best possible user experience. Iterative testing after each phase kept us on the right track, ensuring that the design was both inclusive and delightful for all users.
We tested these designs with a few actual clients and received highly positive responses. Subsequently, we handed over the designs, along with their respective prototypes, to the Capitalmind team, marking the conclusion of this design project.
Even though the design phase had concluded, we constantly oversaw the development process to ensure consistency between the designs and the final product.
I learned a lot from this project. Early on, extensive research helped us grasp the domain and propose new features. Our constant brainstorming sessions and swift prototyping ensured that we considered all aspects of the problem to create the best possible user experience. Iterative testing after each phase kept us on the right track, ensuring that the design was both inclusive and delightful for all users.
Thank You For Reading
Thank You For Reading
Thank You For Reading
© 2025 | Designed and developed by me with ♡ | All Rights Reserved.
© 2025 | Designed and developed by me with ♡ | All Rights Reserved.
© 2025 | Designed and developed by me with ♡ | All Rights Reserved.