Redesigning a Financial Planning Application in Mobile
Shepherd Money, May 2023 - Aug 2023
This case study does not show the full process of the project due to NDA reasons. Some content that reflects the design process such as sitemaps and mid-fi works cannot be included.
Business Problem: Redesign a mobile experience in the personal finance category based on an existing website for a startup company.
Target Users: Users interested or have a need in planning their personal finance, budgeting, and investment, especially those with less financial background or knowledge in investing.
I worked with:
1 Product Manager, 2 UX Designers, and the Engineering team.
My Part: During my internship at Shepherd Money, I led the design of the Onboarding, Budget, and Investment sections of the mobile app and took part in designing the Networth, Goals, and Profile sections based on the current website. I also created the design system for the mobile app following IOS standards and took part in designing the product landing page. The design of the mobile application and the product landing page has been delivered to the engineering team and is currently under development.
Research
Since my team and I are designing the mobile application based the existing website of Shepherd Money, I started with examining the current user experience of the website.
Current webpage for Budget
Based on user testing, I identified several problems with the current website:
-
The website includes too much information on each page and the information hierarchy of the pages are not clear and intuitive for the users to locate the information they need.
-
The functionalities of the website are not presented in an intuitive manner and lack obvious explanation or tutorials.
-
The visual layout of the website is not very organized: it includes many different typography and colors and has no standard grid system, which could make it visually overwhelming for the users.
Instead of designing directly based on the current layout of the website, I extracted key features and information (for example, the pie graph for showing the budget breakdown and the calendar for transactions) we wish to transfer to the mobile application and started with building the information architecture and a sitemap (what features and information should be on what page, what page should lead to another page, etc.). This way, we can design for the functionalities of the website while stay undistracted from its current format and layout.
We also conducted competitive analysis on other financial planning apps or apps with similar features to identify the design patterns that are accepted and prefered by the users and the unique value we can create with Shepherd Money.
The Design Process
With the information architecture and sitemaps I created, we start the lo-fi sketches of the mobile wireframe with parallel design.
Lo-fi sketches I drew for some pages in Budget
In the Mid-fi stage of the design, we started building Figma prototypes which we used to conduct internal critique and testing sessions. Based on the feedback we gathered, we made improvements to the design of both the functionalities and the visuals. We repeated the iteration based on need and timeframe and then converge to a final design, which I would polish the visual design and build into a hi-fi Figma prototype.
In the case of the Budget section, we received many feedback in the internal testing and critique sessions that we were able to adopt into the final design. For example, I initially included both the pie graph for the budget breakdown and the line graph for the trend from the desktop website in the mobile design. It was pointed out to me that it is not necessary to tranfer all the information and data from the website due to the spatial limit of a mobile device. After discussions and careful consideration, we decided to include the pie graph, which is of higher priority, and leave the line chart out so that users could access key information with less scrolling.
Hi-fi design I created for key pages in Budget
Designing the Information Architecture for Mobile
The spatial limit of a mobile device was a challenge that occured in multiple places in the design process. I tried to resolve this problem using these strategies:
-
Examine the information architecture and hierarchy to decide what information is necessary for the mobile app and what information are not so important to the users.
-
Place information with higher priority in places where the users can easily access with less interactions such as taps or scrolls, like the top of a page or a page higher on the sitemap. Highlight key information visually using typography and colors
-
Turn sections of a page to new pages to decrease the information density of each page, especially on pages where users need to perform important actions or input information.
-
Make sections collapsible or show overview only on pages with high information density.
Hi-fi design I created for key pages in Investment
The Design System
From the competitive analysis and research we conducted and the nature of Shepherd Money, I wanted the users to percieve the app as a professional and creditable tool that they could trust their finance with while being more engaging and friendly for users with less financial background.
To instill trust and credibility, I designed the visuals of Shepherd Money around a clean and professional asthetics. I chose a blue color scheme due to its association with professionalism. I also created the typography system around Roboto due to its highly-legible and efficient nature.
For designing the app to be less intimidating for users with limited financial experience, I applied soft and approachable elements. Light colors were employed to evoke a sense of comfort, while rounded cards and buttons added a touch of friendliness. I also tried to avoid hard borders and lines to eliminate rigidity, making the app more inviting and friendly to users who might otherwise find financial apps intimidating.
A design system is created based on IOS standard consisting of a 6-column grid system and 16px margins, a typography system with Roboto as the main font, along with various components such as buttons and input fields.
Some elements from the design system
Product landing page I took part in designing for Shepherd Money
Takeaways
My collaboration with the engineering team on this project provided invaluable insights, and several crucial factors contributed to the seamless process from my perspective:
-
Understanding the tools and technical constraints of the frontend team in advance allowed us to keep the feasibility of the interactions and functionalities in mind during the design process.
-
The standardized design system helped the design team deliver the visual design pixel-perfect to the engineers for implementation.
-
Transparent and consistent communication between the design and development team ensured that any questions, uncertainties and feedback from the engineering side is addressed in a clear and timely manner.
The design of the mobile application has been delivered to the engineering team and is currently under development.
Also, I realized after further study that some color choices of my design may not be very accessible. I am following WCAG guildlines for future designs to make sure that they are accessible to a wider range of users.
