Improving usability for a mobile banking / productivity app for a startup that is new to UX
mobile app • onboarding • digital bank & wallet
Overview
Responsibilities
User Research
Heuristic Analysis / Design Audit
Usability Testing
Design
Prototyping
Tools
Google Suite / Microsoft Teams
Zoom
Adobe XD
Team Mates
Cathy Cavander
Jenni Hewlett
Prachi Gupta
Introduction
Wedo is a startup looking to create a multi-platform product that helps independent coaches, consultants, mentors, teachers and other similar freelancers with various aspects of their business. My team's role was to help them improve their existing mobile designs for the onboarding flow and banking/wallet feature. We also conducted research to help them better understand their target userbase.
Project Type
Internship with a real-world company through Springboard's UI/UX Design program
Timeline
Jun 2021 (4 weeks)
Problem Statement
How might we help freelancers be more efficient with their time and finances?
Process
01
Discover
Research & Evaluate
02
Validate
Prototype & Test
03
Design
Define & Ideate
01
Discover
Methods
Surveys
1-on-1 Interviews
Heuristic Analysis / Audit
Tools
Google / Microsoft Suite
Zoom
Miro
Summary
The team conducted surveys and 1-on1 interviews to learn more about the experiences and pain points of the target userbase. I organized the responses into an affinity map to help visualize and find common patterns.
The team then audited Wedo's existing high-fidelity designs using Jakob Nielsen's 10 Usability Heuristics of Design to gain a better understanding of the product's current state.
Generative User Research
Target User Characteristics:
-
Independent coaches, consultants, mentors, teachers, other similar freelancers
-
Ex. personal trainers, mental health coaches, financial consultants, etc.
-
-
Accepted payments directly from clients
-
Used virtual/digital tools to run at least part of their business
-
Special focus on banking and video calls
-
Research Methods: Surveys and 1-on-1 Interviews
It was important for the team to learn more about Wedo's target users to ensure that we designed solutions that directly focused on their needs. We conducted surveys whenever contacts were unable or unwilling to schedule a 1-on-1 interview. The surveys contained mostly the same questions we used during our interviews. They were useful for capturing quantitative data and quick responses.
The 1-on-1 interviews let us obtain more in-depth context and insights into the participants' behaviors, thoughts, and experiences of running their business. These sessions were more ideal than using surveys, but combining both methods allowed us to learn from a larger number of potential users in a short timeframe.
“My biggest pain point is [providing] an easy flow for students to sign up for a yoga class, maintaining communication, and implementing a membership model... My goal is to make it as seamless as possible from the user's perspective.”
- Monica H, yoga instructor
Research Goals:
-
Learn about the tools they use to run their business:
-
Types of tools:
-
Communications (email, messaging, voice and video calls)
-
Finances (banking, bookkeeping, invoicing, payments)
-
Scheduling (calendar, booking/reservation management)
-
Marketing and Client Outreach
-
-
Time of setup, use, and frequency of change
-
Reasons for using them over other tools
-
-
Learn about their business pain points (beyond the constant need for more clients)
-
Learn about their business goals for the year
User Research Results
Responses:
-
29 survey responses
-
8 1-on-1 interviews conducted
Participant Info:
-
Ages 18-60
-
54% are full-time, 46% are part-time / side-hustlers
-
In business between 3 weeks and 20 years
Key Takeaways:
-
43% deliver value in-person, 49% virtually (video calls, online classes, etc.)
-
69% use a second camera or screen share
-
8% has a separate business bank account
Click / tap image to magnify
Click / tap image to magnify
Click / tap image to magnify
Click / tap image to magnify
“I'm not a big technology guy. I'm pretty old-school. I've got my planner. Ask anybody - I have that [notebook] with me everywhere. That book is my life... Being organized is a struggle. All clients have different workouts depending on their wants and needs, their diet plan, their macro...”
- Andy L, personal trainer
“It would be great if there was a tool that helped virtual consultants take payments more easily while we are on a call or somehow not have to use quite so many apps.”
- Sam S, consultant
Working with People
Who Are New to UX
All the research above was conducted across the entire 4 weeks of the project. Wedo had originally requested for the research phase to consist of 8-10 interviews from each member of our team of 4. They were to be conducted, synthesized and ready for presentation within 3.5 days of the first week (5.5 days if we worked through the weekend).
From past experience, I recognized that this timeframe was impractical. Wedo's expectations were misaligned due to lack of experience with UX. They had only begun working with UX experts 4 weeks previously.
I communicated to Wedo why they needed to allocate more time for their research phase if they wanted the number of interviews they requested. I gave them a more realistic expectation of how long it would take, and fortunately they were very open to feedback and suggestion.
Since our UX team only had 4 weeks for the project, we decided together with Wedo to continuously conduct the research in the background. We added surveys to the interviews in order to gather information from a larger amount of people.
Heuristic Analysis / Audit
User research gave us a better understanding of the problem space, which helped inform our design decisions moving forward. Before we could start thinking of solutions however, we needed to know the current state of Wedo's product. We evaluated their existing high-fidelity designs for 2 of their features, Onboarding and Wallet, using Jakob Nielsen's 10 Usability Heuristics.
Note: Due to NDA, the wireframes I re-created below were significantly altered to protect Wedo's product and are not exact replicas of their designs.
Key Findings
Overall:
-
Copy needed to be shortened and simplified to everyday language for clarity.
-
Some text did not have enough size or color contrast to pass accessibility tests.
-
Use of dropdown lists for input fields like country codes and addresses were excessive and unnecessary.
Onboarding:
-
More options to log in and use for ID verification were needed for user freedom and accessibility.
-
Some CTA labels were too vague, such as for continuing or cancelling account setup.
-
The processes for creating a bank account and waiting for identity verification were too long and confusing.
Wallet:
-
Some icons were not intuitive and relied on recall instead of recognition, such as the flags and copy icons.
-
Important information, such as currency exchange rates and fees, were often not visible, not easily found, shown too late in the flow, or unnecessarily repeated.
-
The screens and CTAs for the flows to transfer or send money were often too similar that they could easily cause user error.
02.0
Validate
Methods
Rapid Prototyping
Moderated Usability Testing
Tools
Adobe XD
Microsoft Suite
Zoom
Summary
To confirm and compare the results of our audit and gauge the effectiveness of Wedo's current designs with other users, the team tidied up the prototype for usability testing. Identifying the usability issues would then allow us to ideate solutions, make design recommendations to Wedo for approval, and eventually begin implementing changes to improve the designs.
Usability Testing
Round 1
Participants
The team conducted moderated usability testing remotely through video chat with 5 participants. Some participants were professionally not part of the target userbase, but all were familiar with common mobile applications, such as for productivity and banking.
Goals
Test the effectiveness of the designs in achieving these goals:
-
Onboarding:
-
Create a Wedo account (both individual and business account types)
-
Log in to the app
-
-
Wallet:
-
Add a new currency account
-
Create and send an account statement
-
Add money to an account
-
Transfer money between accounts
-
Send money to someone else (both another Wedo user and a non-Wedo user)
-
View details on a transaction
-
Onboarding Key Findings
-
Legal statements about security and privacy of personal information and permissions for the app to use contacts and cameras were missing.
-
Testers commonly struggled with some of the copy, such as "post code" and "sole trader".
-
The purpose and functions of the Wedo wallet was unclear.
-
Testers wanted an option to log in with an email address, rather than a phone number.
-
Overall feedback was that the onboarding process was very long and boring.
“I don't even know what this app does, and I'm putting in my bank account... I gave you my passport name. I gave you my phone number. What am I setting up a wallet for? What is this all about?”
- Ryan
Wallet Key Findings
-
Testers had trouble understanding that Wedo provided multiple accounts for different currencies.
-
This affected high-level understanding of actions like viewing an account's details, adding a new account, and transferring money between internal/external accounts.
-
-
Not all functions or actions were clearly visible or discoverable.
-
Visual elements like the down carrot and flag icons were insufficient CTAs to view account options and details.
-
Most testers did not recognized the phrase "Top Up" as the action to add money to their account.
-
-
More upfront information was needed/desired overall, such as all account balances, conversion/exchange rates, and fees.
“What is this account? Is it a bank account? Is it just the software account? ... There was no login to add my bank account. How did it get added?”
- Uday
03.0
Design
Methods
High-fidelity Mockups
Tools
Adobe XD
Microsoft Teams
Summary
Supported by the issues found in our audit and usability tests, the team ideated and recommended solutions in our report to Wedo. We then implemented the solutions that were approved, along with other changes they wanted for the designs and prepared them for another round of usability tests.
Style Guide
The team was given a minimal style guide to use as reference for our designs. Navy was Wedo's main brand color, supplemented by a pop of gold. A variety of gray tones kept it grounded as an app for business professionals, while slightly rounded fonts and corners gave it character.
Primary
#04264D
Text Gray
#505A5E
Secondary
#E5AE3D
Icon Gray
#838D95
Positive
#169873
Borders Gray
#D9DEE4
Negative
#D72638
Disabled Gray
#E9E9E9
Header / Museo Sans Rounded
18 pt • Regular
Body Text / Aktiv Grotesk
16 pt • Regular
Design Revisions
Because the design files Wedo gave us were already high-fidelity mockups, it was easy to match our changes to their existing style. I worked specifically on the Wallet feature together with my team mate, Cathy Cavander, as a pair.
Note: Due to NDA, the wireframes I re-created below were significantly altered to protect Wedo's product and are not exact replicas of their designs.
Wedo preemptively made drastic changes to the Wallet's home screen before handing off the rest of the design file to us. Many issues we found were rooted in this screen, so they wanted to overhaul it themselves, including the global navigation. Since this would take extra time, this screen they gave us was a temporary solution to use in our next round of testing. Cathy and I made no further changes to it.
We updated the contacts list with icons to help differentiate individual accounts from business accounts, as well as Wedo users and non-Wedo users.
We changed the banking information and email addresses for a number of reasons:
-
Bank info was originally used to differentiate Wedo users from non-Wedo users. Now that the icons were fulfilling that role, using the bank name was more elegant.
-
Wedo insisted on prioritizing phone numbers for the app, such as for logging in. Cathy and I thought the emails on this screen were not consistent with those priorities. We changed them to "Wedo Money Account" to further show that those contacts were Wedo users.
-
Our UX team thought users may prefer using email addresses over phone numbers. We planned to put this idea to the test.
-
We changed the layout of the screens for sending money to someone else. This was so that the final amount that the recipient got was shown earlier in the flow, as soon as the amount to be sent was entered. We also provided an estimate for how long the transfer would take. To help with error prevention, we changed the final confirmation CTAs to green and added extra links to go back.
For consistency, we also re-designed the screens for transferring money between the user's own currency accounts flow to match.
In the list of options to add money, we made small changes to the copy for clarity. We also lowered the opacity for the unavailable options for better contrast of the actions that the user can actually take.
02.1
Validate
Methods
Prototyping
Moderated Usability Testing
Tools
Adobe XD
Microsoft Teams
Zoom
Summary
The team created prototypes from the high-fidelity mockups for the next round of usability testing. We tested the same tasks and experiences from the first round to evaluate the effectiveness of the changes. Additionally, we gauged opinions on several ideas and assets discussed between Wedo and the UX team. We then compiled the test results again into a table with general thoughts, issues and recommended solutions.
Usability Testing
Round 2
Participants
To test the effectiveness of the changes, the team tested the updated prototypes with 5 more people. Again, some participants were part of the target userbase and some were not, but all were familiar with common mobile apps for productivity and banking.
Goals
These were the same as the previous round, with the addition of gauging opinions and/or effectiveness of the following ideas and assets:
-
Onboarding:
-
Email address vs. phone number for logins
-
-
Wallet:
-
Iconic button to access the list of money accounts
-
Iconic button to access the individual account details
-
Supportive icons that differentiate business/individual accounts and Wedo/non-Wedo users
-
We tested both the new Onboarding and Wallet prototypes in the same sessions, regardless of who worked on the re-designs. This meant that I had to familiarize myself with Jenni and Prachi's work on the Onboarding prototype before I conducted my tests.
Onboarding Key Findings
-
3 testers preferred using their phone number for logins over their email because:
-
They are often less characters and easier to type on a mobile device.
-
They eliminate the need to open an email app to obtain the one-time password.
-
-
It was unclear whether a user could have both an individual and business account.
-
Entering info for both the Wedo account and money account creation was often confusing, redundant and frustrating.
-
Testers wanted to manually enter their country code, rather than selecting from a list.
-
They expected the US to be at the top of the list at least, since that was the common pattern for them.
-
-
Testers commonly struggled with understanding phrases like "post code," "sole trader", "director" and "business number".
-
Entering the zip/post code and address was unnecessarily complicated by the use of multiple screens and lists.
-
Opening a money account asked for much of the same info as the Wedo account.
-
-
Testers assumed that they would have to connect their bank account to the Wedo money account that they just created.
-
Overall feedback was that the onboarding process was still too long.
“Most address [fields] use auto-complete. You start typing in the address and it auto-completes based on your location... Why do I need to [fill in] this registered company postcode here? If it's literally just a zip code and it's part of the address, why is this separated onto [different] screens?... This is frustrating. This is very weird.”
- Adam
Wallet Key Findings
-
The down carrot and flag icons were still insufficient CTAs to view account details/actions.
-
The purpose was unclear for having multiple currency accounts vs. a single account with automatic conversions.
-
More details about conversion/exchange rates and fees were needed.
-
Testers commonly struggled with phrases like "sort code", "IBAN", "BIC", and "reference".
-
The icons to differentiate business/individual accounts and Wedo/non-Wedo users were only somewhat successful, with testers generally understanding one or the other.
-
Search, sort and filter functions for the transactions list were needed.
“I do feel like a lot of the buttons and things are hidden, so I’d have to kind of look for them. It’s not really clear where I can find them.”
- Makayla C
Final Takeaways
I learned a lot from this project about communication and collaboration, both as part of a team of UX designers and with other stakeholders in a company overall.
I learned to accept that other people have their own processes, ways of documentation and presentation, and organizing deliverables. I also learned to view deliverables from an outside stakeholder's perspective to ensure that our folders, files, and documentation were accessible, organized and made sense for the sake of efficiency.
I was able to practice giving feedback and voicing my concerns in a constructive way, and I know that continuing to practice these soft skills will be very important. Using data from usability tests was also very helpful in validating or invalidating ideas and assumptions. At the same time, I experienced how data may still not be enough to change someone's mind, and I accepted that I may have to create designs that I do not agree with.
In terms of UX processes, my biggest lesson was targeting the correct audience for usability testing. A major question that persisted through both rounds of testing was whether or not the testers struggled with the copy simply because they were American, rather than British or European, where the app is currently targeted. I also learned how to navigate working with feature packages in isolation from the rest of the app. I had to accept that I had little control over the larger picture and to do the best I could with what I was given.
“If this is being built for a company in Europe, I don't know Europe. Maybe Europe is different... The concern I have is maybe I'm not giving quality feedback because I'm the wrong target audience.”
- Adam
Next Steps
It was clear from the results of the usability tests that both the Onboarding and Wallet features need another iteration of designs. These would preferably be done in conjunction with the other features of the app that are planned for simultaneous release, so that it all works with the landing screen and global navigation, and the app feels cohesive.
I re-designed a few hypothetical screens below on my own to address some of the test issues. Again, due to NDA, these designs are significantly different from Wedo's and are purely my own interpretation of their product.
I streamlined much of the Onboarding flow by combining fields into fewer screens and using info that was already inputted, such as the user's personal address, for other functions. For example, all the fields for their business details would change depending on their country. This would make it more likely that the user would recognize the information they're being requested to enter. While a UK user could enter "Sole Trader" and their associated 8-digit registration number, a US-based user would instead see "Sole Proprietorship" and could optionally enter their 9-digit Employer Identification Number if they had one.
I changed the Wallet's landing screen to be more of a high-level dashboard of all of the user's money accounts, rather than using their primary account as the landing. This potentially made it more intuitive to tap into each individual account to view details, take actions, and then move back to the landing screen to switch to a different account. It also simplified the individual account screen by reducing and clarifying the possible actions to take.
I designed the Receive Money overlay with respect to common patterns that I personally see in popular payment apps (as an American). Testing would be required to determine whether the QR code would be recognized and used by a UK audience.
I further simplified the Send Money screen while still providing the important info that a user would want, such as the recipient's primary currency, the amount's immediate conversion, and details about the current exchange rate.
If I were to continue this project, I would create more designs to appropriately build a working prototype, which would then go through another round of usability tests. Ideally the participants would be from the UK, so that the question of the copy can finally be answered. I would prefer to use language that was as universal as possible, so that the app could be used effectively by anyone in the world, especially since it offers multiple kinds of currencies. More testing is required to gather data on whether or not this would be the ideal path.
