Project Type
Freelance for a fintech startup
My Role
UI/UX Design, Usability Tests
Group Members
PM (1), Researcher(1), Developers(2)
Timeline
May 2022-August 2022
About Swipe
Swipe is the B2C fintech app that Logicsols is developing to support users in tracking all cash flows and maintaining healthy financial habits.
The Problem
Along with the gradual increase in people's financial awareness, people desire to keep their bank accounts under control in a simple, accessible way. With a vision of helping people become financially literate, eliminate debt, and build savings, Logicsols intends to break into the fintech industry with a new card management app.
Design solution
Explored and designed an app with delightful interfaces, fluent flows, and exclusive features to help the startup test potential users and break into the fintech industry.
My Design Approach
When designing in a collaborative team, It's crucial to include stakeholders in the design process. Listening to reports from researchers, checking features' feasibility with engineers, and verifying design progress & details with the product manager are all indispensable. Communicating with them is one of the keys to my design approach.
After understanding users and the product‘s vision, I started to explore product details by:
Building the product information architecture
Generating the preliminary brand’s visual guide
Setting the successful measurements
Framing and testing the mid-fi prototype
Understand our users
Currently, Americans are facing financial literacy problems. Based on the Foundation National Financial Capability’s study, 53% of adults are financially anxious. Those between the ages of 18-34 have the highest levels of financial stress and anxiety due to insufficient control of bank accounts.
Under the swipe team’s current research, people showed better control of their financial situation when the management process was less complex. The company decided to make an integrated app that can free users from tedious financial management by monitoring money amounts, paying debts, create budgets and plans in only one app.
Build Competitive Advantage
The fintech app market is in high competition now. After researching the current competitors like "Mint," "Lumio" and "Every dollar," we found that there is no app that currently provides a way for users to pay their debts in the app. Taking the pain point as an opportunity, we valued "Debt Paying" as the advantage feature we can design and develop for the app.
Information Architecture (IA)
Under stockholders' initial brainstorming diagram, they tend to divide "debit accounts" and "credit accounts" into two dashboards from the navigation.
Evolution of IA
Based on research, our users mentioned they wanted to see their financial information simultaneously. The 1st IA will be hard to reach users' expectations because users always need to switch between different tabs to check their financial details. It will be hard to present the big picture under this hierarchy.
Sketch and the 3-versions of IAAfter making brief interface sketches and presenting this concern in a weekly meeting, the team finally agreed with me and decided to locate both credit and debit accounts under the “Overview” page and set “Pay the Debits” under the credit cards section of the “Overview” dashboard.
Brand’s Visual Guide
Using purple as the theme color, I incorporated the gradient to add a modern touch to the design. For the typography, we believe using “Open Sans” will be a readable font in any size that can help our users clearly get the information they want.
However, the most important part is still the accessibility. I tested several different shades of purple under Google’s Material Design and the WCAG contrast’s help and finally found this color palette and typography that could maximize the visual athletics.
Successful Measurement
Before starting to design, setting core KPIs for tracking success is necessary. It will help me work backward from my end goals. We set three standards on which the team can focus to measure the design's success for the current stage.
Happiness: How are our users satisfied with the current product? Is design easier to use? Would they love to recommend it to friends or family members?
Task Success: What percentage of users complete each step in a user flow?
Engagement: How frequently or intensely are our users willing to use a particular function in a period? Especially our main features like “Credit Pay.”
Usability Tests
After the finishing touch of the mid-fi design, the group invited eight potential users to test out the prototype in-person.
I made the usability test instruction based on the successful measurement standard. The participants completed tasks such as adding a new card, paying debts, and sharing their accounts while sharing through the thinking-out-loud approach. Detailed feedback was also gathered through a brief semi-structured interview after the tasks.
It took longer than planned to encourage users to finish the test, so I started card sorting and pain points defining when we received most of the responses.
The first version (of the full app) was finished within two weeks, in Figma. Although our team was satisfied with the design, there was still some detail that we had not considered that affected the user experience. Based on what we learned from usability tests, we adjusted the interfaces of the main dashboard and the budget page to make the design more user-friendly.
The main CTA Button
In the first design version, I located the debt paying button at the bottom of the credit cards section based on the IA hierarchy relationships.
However, during the usability test, users either missed the button or began complaining about the page length and how hard they reached the debt payment feature. We realized that when users started adding more cards, the CTA button was squeezed to the bottom of the page and hard to reach.
Add/Edit the budgets
The problem we found from the “spend” section during the usability test was that the best solutions differ for different groups.
In the old design, every user needs to click the budget list, find the category, then edit the money amount. However, I need to consider the first-time and return users as they have different needs. Some of them want to add several budgets all at once, but others probably only want to adjust one of them very fast. Based on the demand, I changed the design to add flexibility and efficiency of use. I also made some minor changes to make the edit feature page more obvious to access.
The “Pay your debt” flow
"Pay your debt" is one of the app's most important features; we need to make a clear and fluent task flow to make the function reliable for users.
In the first design, we put "NEXT" as the label on every button; as a result, instead of reading the information carefully, users just tapped quickly and intended to finish the flow as fast as they could. This situation would lead to repeat actions; some users click back and force several times to ensure the information is since they need to read carefully before taking action.
To solve this problem, I decide to make small changes to the labels of the pages. Adding more friction to the flow would notice users to change the pages, so they would be more serious about what they are doing and feel more secure about the flow.
DELIGHTFUL ONBOARDING
An interesting eye-catching landing page
Using illustrations through the landing page would quickly introduce the app to the users
Cut the multi-page design into one
Instead of putting illustrations on three different pages, I designed a scrolling window. It will cut the steps from the landing page to the sign-up/log-in actions page to provide a more direct experience to users.
AN INTEGRATED PLATFORM
Take your money under control
At the dashboard of <Swipe>, users can monitor their financial situation at a glance.
Easy-to-read financial overview.
Track debt and credit money accounts.
The highlighted reminder would notice users’ credit due dates and call their actions to pay debts.
The recent transactions list improved the visibility of financial information that could help users easily control their cash flows.
Users can check the details of a specific transaction. This feature would keep users sensitive to their spending and detect any possible fraud.
Editable categories and notes would add flexibility to the system and decrease system errors.
One App For All
Instead of downloading all credit card apps to check and pay them one by one, our potential users desperately hope to manage their cards all on only one platform. Swipe is trying to make this dream come true. I designed the in-app credit payment flow for the app.
Users can check and pay all debts in <Swipe>. No more apps are needed.
An effortless and straightforward payment flow.
Animation on the confirmation page would make the page design more interactive.
Opportunities
People have different preferences in paying their debts; according to the Federal Reserve, only 45% of U.S. cardholders pay their card balance in full every month. How about the rest 55% of people?
Some would like to pay the debt partially or only the minimum amount. Under these circumstances, the actual user-friendly payment flow would be much more complex than the current one. Due to the time issue, I haven't got a chance to touch on these questions.
How to include all different payment options in the flow would be one of the most urgent questions for the next scope of design.
BUILD SAVING
Track monthly spending by categories
The "spend" page of <swipe> will get users a real-time view of all their spending.
By categorizing the spending on the dashboard, users will have a clearer vision of the monthly expenditure.
Also, they can set the budget for a particular category to help them control their spending.
The over-budget category will be automatically highlighted in red to call the user's awareness to control spending.
Save for your targets
In the plan section, the user can create a saving target and connect it with a bank account. By depositing into the account, the user will reach the saving target step by step. Adding the animation and motions in the “add a new plan” task flow would make the process more interactive.
Please feel free to check more details through the prototype.
Measure the Success of the Design
Part of our products is based on assumptions, research, competitive analysis, and potential users we are targeting. How can we test if those assumptions are accurate or fail? Before I handed off the final design, we conducted the last round of usability tests with same criteria at the beginning of the design process. The result is satisfying.
However, these standards are only for the current stage; by the time the product is launched, we also need to measure the app's installation, acquisition, and retention rate to see if we can keep our customers. There is a long way to go, and time will tell us if the design is successful or not.
Accessibility Test
I also did the WCAG test before documenting my design to ensure that the app would be accessible to people with visual disabilities as well.
Document and Delivery
At the end of the project, I had meetings with the developers and helped slice and document the main components to support their interface builds. I spent several hours learning the slicing techniques and naming skills for the slicing documents to make sure to improve the efficiency of the entire team and greatly reduce the communication costs between me and the programmers.
Based on the most recent update, 80% of the development has been completed. It is currently being tested through Testflight. The Swipe app is expected to release at the end of 2022. : )
Lessons
Keep your design understandable for everyone
Working with stockholders means you always need to keep connecting with them. Listen carefully to their needs, and check with them with your drafts. The weekly meeting always suffers because you must face the questions from different perspectives. The design would be messy and hard to present if I didn't place them well.
I am still learning to organize Figma components, name different frames, and make notes for different sections more efficiently. I hope to make an understandable Figma interface without my explanation for all stakeholders in the future.
Try to think a few steps more
When I tried to place the “Debt Pay” button in the second section of the raw dashboard, it looked outstanding and could be directly found. However, I didn’t think about how it would look when the interface got crowded. I focused too much on the current stage but forgot that more complex will are coming.
In the future, I will try to not only think from the current stage but also look ahead to find potential problems and solve them in advance.