Money Tree: UX Product Design
Designed in Sketch
User Research
User Testing
Prototyping
At the start of the COVID-19 pandemic, I went through a series of financial hardships and changes in my life. I used this as an opportunity to create an all-in-one finance app using Sketch.
As a UX Designer, I was tasked with creating user personas, hi-fidelity mockups, clickable prototypes, and conduct user testing for the mobile prototype. The goal of my research was to determine what features users would desire from such an app, whether the flows were complete, and in the end whether the app genuinely helped users.
The Problem
Users have an app for budgeting, one for bill tracking, one for creating goals, and one for viewing their income/expenses. This leads to a cluttered homescreen, apps that feel empty, and frustrated users. In short, there isn't an app that can meet all of users' financial needs.
My Process
To get a better understanding of what features would be helpful to users, I conducted six user interviews and collected 32 survey responses. I used these responses to generate lowfidelity wireframes that I could then conduct user testing on. Testing helped me discover some immediate accessibility issues such as poor iconography and labeling, giving me the confidence to proceed with my high fidelity mockups using Sketch.
It is important to my process to first create lo-fidelity wireframes on paper. I keep them text-free to get an easier idea of the information architecture of my app, but jot down my thoughts on post it notes so that I remember what visual ideas I had for those pages. Here is a comparison between my initial sketches to those in the final iteration.
Preliminary user research showed that our target audience would be college students ages 18-24 who are likely going through significant financial changes. This led me to start thinking about what apps they might be using, what types of information architecture and navigation they've become accustomed to, in order to design my experience in as intuitively as possible.
I found that 90% of survey respondents wanted a way to organize their bills for the month, with interviews revealing users often would forget when subscriptions or bills were charged. As I was interviewing I was constantly keeping the information architecture of Money Tree in mind, and this data was pointing to a sort of bill calendar becoming the primary or home feature of the app.
Testing, Reiterating, and Retesting.
I took the lo-fidelity wireframes I sketched out and transferred them to Sketch where I added text and prototyped using Marvel. I then conducted remote user testing with six users via Zoom where I had them complete three different flows to get an idea of any issues or confusion in my flows.
Initial Test
After Redesign
Adding a Goal
Viewing Spending
Adding a Bill to Calendar
Adding a Bill to Calendar
Adding a Goal
Viewing Spending
Create an account
Add a goal
View a spending report
Add a goal
Create an account
View a spending report
Flows Completed
Initial Design vs. Final
My initial iteration of the design that users were tested on versus my final iteration which included changes from user testing.
The Problems
I found that the main problems with my user flows were that my buttons were not clearly labeled to guide users through flows. Visually was a clutter of text on the screen, and a lack of drop shadows, and gradients to separate my flows from one another. Icons were not clear and there was no way to go back if a user made a mistake.
How I approached them
I initially felt discouraged about how poorly my first round of testing went. But it really provided so much inspiration. I decided to get more acclimated with Sketch and learn more about design trends and how to best sort information architecture. I learned that by separating my flows onto multiple screens, the information could be presented in a far cleaner manner. I scrapped my high-fidelity mockups almost entirely, and redesigned them from the ground up.
I'm proud of my decision to completely redesign the app. I think often times we can get attached to our designs, and it clouds our ability to see the glaring issues. Redesign can lead to new inspiration, and really helps build your skills.
The final prototype of Money Tree made in Sketch.
Ensuring Sleek and Intuitive Design in my Redesign
Challenges I Faced
The most important aspects of this for me were:
-A color palette easy on the eyes. Blue and green are often heavily used in finance apps so I wanted to follow design trends.
-Smooth navigation so that users can jump between flows and then resume where they left off.
-Limited visuals; I didn't want them to distract from the calls-to-action
This was my first time really trying to create my own vector art and do animations in Sketch. I really wanted to make this a visually appealing and sleek design, so it was important to me to put in the effort to learn to be more creative and step outside my comfort zone.
What I learned
I feel like this project really taught me what it means to be a designer, and the importance of having a good process. I learned that I have a passion for learning about visual design tools, and that moving forward I want to work on creating more responsive designs. I learned that it's okay to make mistakes as a designer, and that sometimes starting over is what is best.
This was also my first introduction to Sketch, and I really love it. I feel like while Figma allows me to work quickly, Sketch helps me hone my designs to be more visually appealing.
How I am going to change
I want to have a clearer design process for my next project, with a clearly laid out timeline. This will help me make sure I'm staying on track and keeping the entire process in mind without skipping steps. I'm also going to learn how to better present my information, so that future projects can have a larger impact on readers.
Lastly, I want to make sure that my next project really challenges me. I want to make both a web and mobile version, to ensure that I understand how the design process differs from one another. By doing this, I'll have a better understanding of how to lay out information architecture on future designs.
Final Screens
