All Projects
Hi-Fi Mockups and Prototype
High fidelity mockups were created according to the results of usability tests that was done with wireframes. The style guide was incorporated with the findings to bring SavedUp to life. After brainstorming about the possible solutions and creating the first version of Hi-Fis, another round of testing was needed to validate these solutions.
2nd Round of Usability Tests
Second round of testing was carried out with 5 different participants to eliminate the bias. Test results confirmed that the changes made was working as intended. It did not reveal any major problems. Second iteration on high fidelities was only about design tweaks to add more visuals to modal windows.
Competitive Heuristic Research and Survey
Competitive Heuristic Research and a Survey was used to understand the user’s needs, behaviors, experience and motivations.
Competitive Heuristic Research was carried out to analyze 3 similar products on the market. Analysis of Truebill, Trackmysubs and Trim informed the UX/UI design decisions for SavedUp.
Survey was carried out with target users that keeps a budget and/or have familiarity with budgeting/finance apps. This allowed us to gain deeper understanding through combining both qualitative and quantitative information.
The results revealed information about:
-
User’s budgeting methods
-
The apps used for similar purposes
-
Likes and dislikes about the apps used
-
The features that should be given more priority
Lo-Fi Wireframes
According to the results from surveys and competitive analysis, wireframes were started to set up the blueprints for SavedUp’s design. After defining our problems, goals, challenges, and scope with the help of survey results and competitive analysis, we decided what to include in the wireframes.
1st Round of Usability Tests
We created a Figma prototype and recruited 5 participants that has familiarity with similar products to conduct the first round of testings. These tests were moderated to get more accurate results when looking for friction points.
Notable findings:
-
Calendar dates for subscriptions are not intuitive
-
CTA is missing for the charity incentive on the first modal
The solutions for the problems were then integrated with the high fidelity mockups.
User Flows
According to the results of research, we identified 3 red routes to represent the essential flows for the user to control their subscription expenses in SavedUp app.
-
See subscriptions to get a view of spending on subscriptions
-
Unsubscribe from a subscription to reduce unnecessary spending
-
Notify about a auto-renewed subscription to decide to keep or cancel the subscription
The research findings revealed that users are looking for simple, clean and organized look when it comes to budgeting and finance apps. It is important for users to manage their finances without getting lost in the details. Every UI decision made for SavedUp revolved around users’ needs to create the best product and experience when managing finances.
Accessible Colors
Accessibility audit: When working on UI design, accessibility guidelines were applied to ensure SavedUp can be accessed by anyone regardless of their functional limitations. Accessibility audit has been conducted before finalizing the UI design decisions.
-
Green tones are chosen because green is associated with money, banking and finances.
-
Yellow is chosen as accent color, it is both associated with gold and positivity, it’s also eye-catching.
Number-heavy application requires a certain font
Calibre was chosen for the logo and the copy: Since SavedUp is a text and number-heavy application, it was important to choose the right font that would show the numbers organized and clean. Calibre was chosen because it has fixed with and monospaced numerals along with its range of styles and weights.
User research is crucial to reveal features that fit users’ needs and expectations.
Competitive heuristic research laid a foundation that was supported with survey results. Survey revealed the information that is most important to the user when tracking their finances. This prevented a dashboard design that would confuse the user and decrease conversion rates.
Improving the user experience meant users would easily track their subscription expenses and be able to unsubscribe from them. This will allow the user to save the money that goes for unnecessary expenses and donate it to a charity where the money is actually used.
If I had more time: I would like to study more on the filter and sort functionalities and carry a more focused user testing if given the chance.
Working on a Fintech app was fun and challenging. I will carry all what I learned from SavedUp to my next projects.
INFORMATION ARCHITECTURE
Critical Design Paths: Defining the red routes
MOCKUPS & TESTING
Wireframing the essential flows and testing with 5 users
STYLING
It is important for users to manage their finances without getting lost in the details.
FINDINGS FROM THE FIRST ROUND OF USABILITY TESTS
DESIGN AND VALIDATION
Iterating and Improving the Designs
CHANGES AFTER THE SECOND ROUND OF USABILITY TESTS
SUMMARY
THE RESEARCH
What does the user look for in budgeting apps?
SUMMARY OF RESEARCH
Users
19
19 users took the survey. These users were selected based on if they keep a budget or not.
Manual Entry vs Connect to Bank Account
68.4%
of users wants to have both options.
Most Important Features in Order
Most Important Features in Order
-
Money Spent on Subscriptions
-
Renew Date of Subscription
-
Date of the Charge
-
Frequency of the Charge
-
Subscription Categories
Users'
Wants
-
Easy Unsubscribe Technique
-
Information for Subscription Period
-
Payment Recursion Date
-
Yearly Total for All Subscriptions
-
Information on how much you save per year, if you unsubscribe
-
Calendar
THE MAIN FOCUS
How might we help users easily track and control their subscription expenses?
SavedUp
Problem: It’s hard to keep track of all the products and services that we subscribe to each month. We are getting charged for services that we might not even need or want anymore.
Role: I created a project plan to manage a design process that suits the most for solving this particular problem. The modified design process took 84 hours that includes research, ideation, wireframing, styling, prototyping and testing.
Team: Asel Yasacan (Solo)
Duration: 1.5 months
Tools: Figma, Google Forms, Zoom
PROCESS
Discover & Define
-
Surveys
-
Competitive Research
&
-
Summary of Findings
-
20 hours
1
Ideate
-
User Flows
-
Information Architecture
-
4 hours
2
Prototype
-
Wireframes
-
Low Fidelity Prototype
-
High Fidelity Mockups
-
High Fidelity Prototype
-
40 hours
3
Test
-
2 rounds of Moderated Remote Usability Tests
-
20 hours