UX/UI Case Study — 6 simple steps from a real investment company web application & dashboard design
Ironclad Investment is an investment management company based in Nottingham, England. Ironclad provides clients with solutions adapted to their specific needs regarding expected returns, risk tolerance, future liquidity requirements, and potential tax and legal restrictions.
IronClad Investment is struggling with its existing IT service team. The solution and support have been creating issues for the last six months.
One of our oldest clients, Expert Mortgage, recommends us (Technext) to Fahim Sajid, the Head of operations of Ironclad Investment. Our Project manager Syed Rezwanul met online with Fahim Sajid, discussed the project, and guess what? We got the project.
1. Understand Project Goals and Challenges
Project goals
- Revamp the whole application design and functionalities.
- Create an admin dashboard that is easy to scan.
- Create a whole new dashboard for investors.
- Showcase the vital data with a holistic view.
- Include new features in the admin dashboard.
- Make the application informative and intuitive for non-tech investors.
Challenges
- Revamp the whole application design and functionalities.
- Create an admin dashboard that is easy to scan.
- Create a whole new dashboard for investors.
- Showcase the vital data with a holistic view.
- Include new features in the admin dashboard.
2. Research and Collect Data
Understand the Client’s Needs
We are constantly meeting with the client to understand their pain points and business need. The most important thing we discovered from the client is: In their previous application, they felt that capturing valuable information on the first screen when running a business is essential. Their last dashboard doesn’t allow viewing individual client data without a holistic view.
Define Users Through Persona
We made two personas to define the user’s needs — one for admins and another for investors.
Arranging Data
We collect all the research/interview data and find out the user’s similar goals, needs, pain points and frustrations.
3. Define Problem Statements (3 Major Problems)
The dashboard for stakeholders has too many pieces of information in one place.
In the previous dashboard, all the functions are in one place. The admin/users are often confused and lost in a dashboard. That was not a traditional way to interact with the digital product. Too many tasks in one place overwhelm the user.
In the previous version, fund managers could not see the daily or monthly business progress at a glance.
We noticed that all the transactions and data (Profit, Withdrawals, Commissions etc.) were showcased with just numbers. There was no clear view of the Admin’s daily or monthly progression and demotions.
The three frequently used features (add transfer, withdrawal and deposit) are hidden inside the menu.
Most of the time, Investors use this application to add transfer withdrawals and deposits. In the previous dashboard, these functions are hidden under the hamburger icon, which is unclear to the user.
4. Ideate Solutions
Card Sorting and Generate Ideas
We tried to build a product that met 100% of users’ needs. We did a card sorting session to pick the best ideas from our teammates.
System Architecture
We created separate flows for the different tasks that the users wanted to accomplish in the extensive product.
Wireframe
In the ideation part, we created a low-fidelity wireframe to test it on the user. We are not bothered about the aesthetic in this part.
Low fidelity Prototype
We came up with various interaction ideas with the help of making a low-fidelity prototype.
5. Final Solutions for Problems
Problem 01
The dashboard for Admins has too many pieces of information in one place.
Solution 01
We distributed different functions to different pages.
We came up with many ideas to make an admin dashboard more intuitive. We did card sorting to find ideas. Finally, we go with Jakob’s UX law, design a left navigation bar, and distribute the functions.
Problem 02
In the previous version, fund managers could not see the daily or monthly business progress at a glance.
Solution 02
We filled tiles containing holistic data in the form of visual charts/graphs for clearly visible progress.
This is very easy for us to find a solution to this problem. We came up with a lot of ideas to solve the following problem. We introduced charts and graphs so users could quickly scan the information.
Problem 03
The three frequently used features (add transfer, withdrawal and deposit) are hidden inside the menu.
Solution 03
We add these features on the left navigation bar so that users easily navigate.
In the research phase, we identify these functions are the most important in the dashboard. So we want to make those functions independent and accessible for the user.
6. Visual Design (UI) and Final Screens
Color Choosing
We use blue and red, which goes with the brand color. Blue is used as a primary color, and red for interaction.
Typography Usage
We use only one sans-serif typeface (Poppins), so the user can quickly scan the information.
Final Screens (32 pages)
Clients Words
At IronClad Investment, we were struggling with our existing IT service team. The solution and the support have both been creating issues for the last 6 months. Then we got the recommendation of Technext. And it was the best decision to hire the team. They go through the existing system, analyze the SRS and suggest improvements. They designed all the pages, and we are delighted with their UI/UX design. Then they converted all the design with UI and developed the API-driven backend. We are already discussing mobile app development as well. All the best to the team Technext!
Have any projects?
Reach out to the brilliant UI/UX design team at Technext.
We will help you analyze, design and suggest solutions for complex user experience design problems.
Contact
Speak with our leadership team directly.
https://bd.linkedin.com/in/syed-rezwanul-haque-b7889628
- https://technext.it
- reza@technext.it
- +8801717141905
