Reimagining a Financial Planning Platform with a Mobile-First Approach

UI/UX Intern / May - Aug 2023 / Personal Finance

Project Type: Mobile application design (team)

Contributions: Competitive analysis & budget, goals, investment, profile, landing page design

Tools: Figma, Adobe Creative Cloud, Document360

Project Overview

Context

Shepherd Money's CEO, Bofan Xu, was raised by immigrant parents. As he witnessed their challenges in acclimating to life in the U.S. and making well-informed financial choices, Bofan aspired to provide a hands-free solution to assist his parents in growing their wealth and devising comprehensive financial plans. With this, Shepherd Money was born – a platform empowering users to "maximize life and minimize worry" through a three-pronged approach: automated budgeting, goal-setting, and investment strategies.

Business Problem

Design and differentiate an all-inclusive mobile app within the personal finance space from the startup's existing website.

Target Audience

Shepherd Money caters to individuals aspiring to achieve financial stability and seek to establish a greater sense of control and agency over their finances. It is particularly designed for those new to financial planning and investment.

My Responsibilities

During my internship with Shepherd Money, I conducted the design of the Budget, Goals, Investment, and Profile features. I also actively contributed to Net Worth, Onboarding, and Landing Page design. I was entrusted with managing competitive analysis for each feature and presenting and incorporating research insights.

Due to NDA reasons, I am not able to share process pieces in this case study. This includes site maps, low and mid fidelity wireframes, and competitive analysis work. If you'd like to learn more, please don't hesitate to get in touch.

Research Process

My team and I began by carrying out user testing (interviews) on the current Shepherd Money website to identify any user pain points and areas for improvement.

Budget page on current website

Main User Testing Insights

User flows are not as intuitive as they could be. There are few descriptive titles and hover states where users can efficiently find what they are looking for.
Design elements are visually inconsistent. There is no standard layout throughout the site and typography, images, and colors vary. This leaves the site with a lack of cohesion.
Site content is overwhelming and cluttered. Pages have too much content on one screen and information hierarchy is unclear as users may not readily understand the relevance and relationship(s) between page content.
Feedback is confusing or nonexistent. There are no confirmation messages for saved information.

Competitive Analysis

For every major app feature, I conducted extensive competitive research and analysis. This entailed capturing screenshots of all relevant screens from competitors, adding annotations for context. From these annotated screens, I distilled essential insights and consolidated them into a readily accessible reference for addressing design challenges. Additionally, I provided screen recordings to document user flows. These competitors encompassed personal finance and investment apps and e-commerce platforms.

Opportunities for Change

Rather than adhering to the existing web layout, we adopted an approach of only keeping essential features and information for migration to the mobile application. Our primary focus was to boost overall usability, maintain consistency, and enhance user feedback. We made a deliberate choice to prioritize innovation, exceeding competitor conventions.

Design Process

My sketches for mobile budget pages

Sketching

At the start of each weekly sprint dedicated to a specific feature, my team and I would review site maps and individually brainstorm layout concepts through sketching. After presenting our sketches, we would come together and pinpoint ideas we wanted to bring to our low-fidelity wireframes. Simultaneously, we collaboratively generated new ideas.

Design System

My team and I were given creative liberty to tweak Shepherd Money's existing design system while working on the mobile app. We decided to promote a brand identity that reflects professionalism, efficiency, and credibility to instill trust in users as financial security was a main concern in user testing. We also decided to emphasize engaging design elements to appeal to personal finance newcomers who may feel intimidated or bored.

With this criteria my peer, Yifei, produced a design system including a color palette, iconography, typography, mobile components, and mobile grids. In terms of color, Yifei chose blue to again assert professionalism and credibility. As for typography, Yifei decided on Roboto as the main typeface because it is clean, simple, and highly legible. Lastly, Yifei created design elements with soft qualities such as rounded corners and pastel colors to make them fresh and inviting for users with little experience managing personal finances.

Several design system components

Low and Mid Fidelity Designs

After sketching and establishing design standards, our supervisor would define individual page titles and essential content on Document360. We then extracted ideas from this documentation, combining them with brainstorming sessions to integrate them into our low-fidelity wireframes. These wireframe designs enabled us to experiment with various layouts while putting aside high-level visuals and animations.

Upon completing the low-fidelity designs, we convened to share insights on what worked and what needed adjustments, utilizing Figma comments strategically placed near the pertinent areas of interest.

As we transitioned to the mid-fidelity phase, we diligently reviewed the Figma comments and fine-tuned our wireframes accordingly. At this stage, we began to flesh out specific visual elements, building upon existing outlines. Continuing our iterative process, we would then gather to critique recent mid-fidelity designs before advancing to the high-fidelity stage. Early on, my team and I had a shared understanding that constant iteration was key if we wanted to build a product that best suited the user's needs. I truly valued every round of feedback as each one brought us closer to our goals.

Design Challenges

Translating desktop designs to mobile view

Balancing the need to fit content and functionality into a confined screen space while upholding readability and usability was daunting. To combat this, I broke content up into smaller chunks and spread information across multiple screens.

Delivering designs to development team

I experienced a learning curve when it came to understanding technical constraints. Through discussion with software engineers, I became increasingly familiar with designing interactions and functionalities with technical feasibility in mind.
Prior to Shepherd Money, I had never worked on a full-scale UI project with an end goal of implementation. Therefore I lacked comprehensive knowledge of mobile design guidelines such as IOS standards. To remedy this, I made it a point to reference industry-specific regulations before working on a new feature. This was crucial as Shepherd Money is built to handle sensitive data and payments.

Remaining consistent across pages/design elements

Working with two other UI/UX Interns, I found it challenging to keep design elements, colors, text, and sizing persistent across all screens. This was especially difficult because we would often work independently on delegated pages/features. We continuously utilized our design system to make this problem manageable.

Investment dashboard

Strategy performance

Strategy allocation

Final Product

Budget Pages

The Shepherd Money budget feature allows users to automatically import their transactions and get alerts when they are approaching their monthly/yearly limit. They can also set budgets for different categories and subcategories.

Budget dashboard

Edit transaction

Monthly calendar view

Edit subcategory

Daily calendar view

Filter Categories

Goals Pages

The Shepherd money goals feature enables users to set short-term and long-term financial goals such as saving money for a new house or car. Users can adjust for inflation and view their net worth, spending, and income over different periods.

main page - net worth - chart menu card.png

Net worth summary page

Spending summary page

Income summary page

Investment Pages

The Shepherd money investment feature utilizes copy trading, allowing users to publish and follow others' investment strategies. This method automates investing to ease entry for investing beginners.

Strategy marketplace

Edit allocation

Personal strategies

Profile Pages

The Shepherd Money profile feature allows users to input personal information, set notification preferences, manage subscription(s), update business information, and access help and support.

Personal information

Notification preferences

Subscription management

Desktop Redesign

In addition to creating a mobile application, I redesigned the landing page for the Shepherd Money website.

Reflection

Impact

Our designing of a Shepherd Money mobile app will advance company goals of increasing the platform’s reach, credibility, and performance within the personal finance space. Consquently, by automating financial decisions, we can assist individuals who may be short on time or lack the necessary knowledge to effectively manage their investments and budgets. This empowerment enables them to gain a stronger sense of control over their finances.

Room to Grow

More in-depth user testing
- While we conducted interviews, we could have increased our sample size and response rate. Next time I would make use of tools like Qualtrics XM or usertesting.com and conduct user testing after each feature was designed.
Use of Figma components and auto layout
- We did not utilize Figma's built in layout and component capabilities as much as we could have. In the future I will be sure to stay more organized through using these features to their full potential.
More interaction specification
- We did not prototype any interactions during our design process. If I were to start over, I would have emphasized this more so that our developers were not expected to take extra time to choose animations for interactions.