Plantwise
An engaging and motivating approach to money saving and environmental protection.
Project Overview
Role
UI Design / UX Design
Tools
Figma / Adobe Illustrator / Adobe Photoshop
Background
For many, handling money and addressing environmental concerns can be intimidating, making their implementation in our lives challenging or bothersome. Nevertheless, both are crucial topics that we shouldn't neglect, as they can have negative outcomes in the long run if overlooked. To bring everyone on board with these seemingly difficult issues, Plantwise adopts a gamified approach, making personal finance management and contributing to the environment motivating and engaging for everyone, regardless of expertise.
Challenges
- Unite a challenging topic like personal financial management with fun and engaging gaming elements to motivate users who may not enjoy dealing with their finances.
- Managing money can be overwhelming, leading many people to avoid dealing with it altogether. To make money management less intimidating, the app must offer an easy and understandable interface with functionalities that enable users to spend less time on their finances while still achieving positive outcomes.
The Design Process
Understanding User Needs
Why do people refrain from financial management and what would motivate them?
To tackle the challenges mentioned above, I began by questioning why personal finances are often perceived as an 'evil villain' and how I could assist people in combating this adversary. To achieve this, I initiated user interviews to gain a deeper understanding of my audience's struggles. These interviews unveiled the pain points and needs of my participants concerning money saving.
Pain Points
- Impulse Purchases
- Unplanned expenses
- Apps for financial management are often to complicated
Needs
- A way to store savings out of reach
- Flexible saving options.
- An app that is easy to use and can be simply accessed from everywhere.
From Interview Findings to User Personas: Unwinding User Pain Points and Goals
With the insights gained from my interviews, I created two personas, Ally and Matthew, to represent the pain points and goals of my target audience. These personas helped me give my audience a more tangible identity and guided the development of features tailored to the users.
Understanding the journey of my users
Based on my personas, Ally and Matthew, I began to consider the steps users would need to take within the app to reach their goals. How would they feel about saving money or entering sensitive information? I aimed to understand the emotional journey, unraveling the pain points my users might experience. From there, I iterated on improvement opportunities to enhance the overall experience, making it more enjoyable and reducing obstacles users might face.
Tell me the users story: Deciding about features based on user needs
Understanding the emotional journey of users is crucial for developing a product that addresses the problems of the target audience. However, it is equally important to distinguish between essential functionalities and nice-to-have features, allowing for the creation of a cost-effective and time-efficient first version of the app that maximizes value for the user.
In the previous step, I uncovered improvement opportunities that would solve problems for users. In the next step, I formulated user stories to identify the functionalities that would provide the most benefit for the user and, consequently, are necessary for the first version of the product.
Functionalities:
- Add the possibility to set percentages instead of a fixed amount.
Functionalities:
- Feature to insert expenses and income
- Option to link bank account
Functionalities:
- Add income and expenses to categories
Functionalities:
- Add Gamification elements
Functionalities:
- Set Saving goals
From Research to Ideation: Building the app
Developing the structure of the app
With an idea of the features to implement, I began iterating on a user flow to explore how I could integrate these features meaningfully while maintaining an easy and intuitive structure. The onboarding process should be both intuitive and trustworthy, considering the app deals with sensitive data. The transaction flow needs to be swift and straightforward, avoiding unnecessary complexity, as users are likely to use this feature daily. Lastly, the saving goal flow should be engaging and motivating, encouraging users to persist in their money-saving journey and ultimately achieve their goals.
Iterating and idea creation: The development of the screens
At this point, I already had a decent understanding of the app's requirements and the necessary screens for a good user experience. However, figuring out how to layout the features on the screens and create a visually appealing app posed a different challenge. Overcoming this hurdle required many pieces of paper and some strolls outside to finally come up with solutions that I felt comfortable working with, ultimately defining the first rough structure of the app.
Building upon the paper wireframes, I transitioned to translating the design into digital wireframes using Figma. After further development and polishing, the screens evolved into grayscale high-fidelity wireframes.
Prototyping and testing the usability of the design
I believe we've all reached a point where ideas that seem intuitive to us can be confusing to others. Therefore, testing the design with real users is crucial. To do this, I created a prototype to assess if users could achieve their goals seamlessly and to identify potential pain points in my design that could lead to an unpleasant user experience.
I recruited four participants and assigned them three distinctive tasks to complete. While the testers navigated the app and fulfilled the tasks without any problems, the testing revealed two points that needed addressing to improve the navigation and overall user experience of the app.
Problem 1:
Buttons are too small and difficult to reach.
Solution
Problem 2:
The Home Screen lacks the feature to directly add transactions or saving goals.
The Visual Design: From Style Guide to Screen Implementation
Giving the design a personality
Following the user tests and the implementation of improvements in my grayscale wireframes, I progressed by further developing the app's identity. This involved deciding on a color palette, typography, and the style of different elements. Plantwise embodies a gamified approach to money-saving and management with a focus on the environment. To seamlessly integrate the brand's key principles within the app, I aimed to select colors and fonts that create a fun atmosphere, conveying the essence of nature and the environment to the user.
To achieve this, I opted for greenish hues as primary and secondary colors, with an earthy orange as the accent color. Additionally, I chose a round and friendly typography to emphasize the playful nature of the app.
Dealing with sensitive data: Building up trust during the onboarding process
To ensure the protection of user data, I implemented a verification process and the setting of a passcode within the onboarding process. As an app dealing with sensitive user data, it's important to establish trust from the beginning, allowing users to engage with the app carefree.
Uncomplicated process for tracking everyday spendings
Given that users will utilize the app daily, it is crucial to simplify the tracking process, allowing them to easily monitor their everyday expenses. To achieve this, I implemented a straightforward transaction tracking process that can be easily accessed from various app screens.
Making money saving fun and engaging: Plant a tree for every goal and see how your forest grows
As money-saving can be a dull and unpleasant topic, making the saving process engaging and motivating is a crucial aspect of Plantwise. Users can collect tree illustrations and even plant real trees for every certain amount saved.
What I've learned
Make it as simple as possible for the user and provide different options
In my initial concept of the screens, I didn't include the functionality to directly add transactions or goals from the home screen. However, by only allowing the addition of new transactions and goals from the transaction and savings screens, there would always be an extra step for the user. Especially for everyday use, this small extra step can quickly add up, leading to user frustration. Therefore, providing the fastest and easiest way for the user is crucial to ensure a pleasurable user experience.