No Spend Challenge Feature Add
Scope: Add a feature to an existing mobile app
Role: Sole UX & UI designer and researcher
Timeline: 80 hours
Tools: Figma & Maze
Problem:
Consumerism is at an all time high with the amount of ads we are shown on all social media platforms and with the popular style of posts on social media (i.e. Amazon must haves, birthday hauls, Target finds etc.). According to a USA Today article, “the average US adult spends $1497 a month on non-essential items…$18,000 a year.” There are individuals who want to be more intentional about not unnecessarily spending money everyday and are looking for a way to track their success.
Solution:
Add a feature to the calendar app that allows the user to track their spending and challenge their friends to do the same.
Research
Research Objectives:
-
Understand if people would find a no spend day tracker useful
-
Learn about individuals perspective on money and spending
-
Determine if people are influenced by social media/today’s consumerist culture to spend more money
-
Understand if people would want to share their saving journey with friends/family or keep it to themselves
Competitive analysis was the first step taken in the research phase and it helped me understand how other habit trackers are designed as well as what verbiage they use to motivate their users to achieve their goals. To view my competitive analysis notes click here.
Key takeaways from competitive analysis:
-
There are 3 main categories of current products that could be used for this purpose:
-
Printable habit trackers from sites like Etsy
-
Habit tracking apps
-
Spending tracking apps
-
-
One competitor focused on the terminology they used in their app to encourage the user to continue rather than making the user feel like they lost progress. An example of this is when describing a users success they used “chains” instead of “streaks” to encourage users to complete chains instead of breaking a high streak.
After better understanding the other products on the market a set of three user interviews were completed. This is one of my favorite parts of the process. As the mediator you get to dig into the reasons why users do the things they do and really understand what motivates them. I discovered that the more common practice is for individuals to NOT track their spending or have a strict budget. However, when asked if they would use the proposed feature in their calendar app, they all agreed that they would give it a try. They were not closed off to the idea of a simple, quick way to stay on track with their financial goals.
Research Insights & Emerging Themes
-
Many people do NOT track their spending habits
-
A common financial goal for many is a long-term goal such as saving for retirement or paying off a home
-
The solution must be effortless require little time commitment from the user
Ideate
Since this feature was added to an existing application - there was a set of constraints that had the designs had to adhere to. The feature would be added to the base calendar application on a mobile device and that application is minimal when it comes to its' UI. This was a big constraint when building out the designs. I had a collection of inspiration photos that I wanted to replicate but they were not within the design system of the iOS calendar application. Things like fonts and sizing were standards that could not be changed. Where some personal creativity was able to be applied was in the "create a new challenge" screens. I chose to add some color to buttons to make it more attractive without losing the feel of the calendar app entirely. A basic UI kit was created that included logos, colors, and typography.
Lo-fidelity wireframes were then drafted with the help of a iOS 16 UI kit found on the Figma community page. Additional screens were created when it came time to build the prototype and holes in the flow were identified. I wanted to keep the feel of the app as close as possible to the base calendar app that comes on iPhones. I tried to only add hints of the green color to show progress and kept all other components to what you would expect when looking at an iPhone's calendar app. This did make it easy when I had to go from lo to hi fidelity wireframes because nothing really had to be added other than some additional pages as noted earlier.
Lo-Fidelity Wireframes
Hi-Fidelity Wireframes
Prototype
My prototype was created using Figma and was used to complete user testing through Maze. My user testing was completed unmoderated.
Interactive Prototype
To view the prototype in Figma, click on the bottom white bar. It will open Figma in another window.
Testing & Iterations
Usability testing was completed through Maze. I connected my prototype and set up the tasks that I wanted my participants to complete. 3 participants completed the Maze and iterations were made based on the user feedback.
Iterations
On this screen, where the user is asked to select the dates of the beginning and end of their challenge, there was a high misclick rate on this screen. Since there were two dates the user was asked to select, the screen appeared twice in the process. The user understood the task on the second round and the time spent on that screen went from 8.8 seconds to 1.6 seconds. Changing the verbiage of the user's task to be more descriptive will reduce confusion on where to click to select a date.
Although there was a 100% success rate for this round of user testing - iterations were still made on some parts of the design.
It took all three participants under 1 minute to complete the user testing exercise.
Conclusion
Key UX Insights
Design systems can be a constraint. They draw a box for you to create your product within which can limit creativity. Design systems are a net positive to the design itself though. They ensure consistency throughout and promote a seamless experience for the user.
Next Steps
Create more screens around the social aspect of the feature
Complete another round of user testing to see if the changes made were sufficient
Be clear in your wording so the user knows what is being asked of them. As the designer you may think the task is clear, but this project's user testing showed that the instructions were not clear. Users were not sure what they needed to do in order to advance to the next step. There is no harm in asking someone who is removed from the project if they could complete the task with the instructions as they are currently written.
Personal Reflection
This project made me reflect on my own perspective on budgeting and finances. In the weeks I was working on this I found myself questioning my purchases and I think I did save some money thinking twice about my purchases. I would use a product like this if it was on the market.