Add a Feature to an
Existing App
Client
Square, Inc.Timeline
1 MonthRole
Product Designer
Project Summary
I designed a “split bill” feature to Square’s Cash App. Apps like Splitwise allow users to split up payments, but my idea was to end the need for two apps.
Tools Used
Project Breakdown
Research
I discovered that more users use Venmo than Cash App. So, it may seem natural to design the feature for Venmo due to higher usage. But, I was curious if implementing the feature within Cash App, a direct competitor, could pull users towards that app. A majority of users said they would switch to that app or use it more often if the feature were available.
Design
The design process was simplified due to staying within the brand identity and their existing UI. However, it was difficult to find the balance between intuitive use and too many/unnecessary pages. It was more than adding a feature, it was disrupting the current user flow and overall user experience for the better.
I found it difficult to visualize the pages between the home page and confirmation page. Drawing out a user flow helped with this. My process is to plan the start and end of a design, use a user flow to help fill in the missing gaps, then draw out the screens based on the user flow. From this, iterations can be made to either the flow or the screens by comparing the two.
The home page would remain unchanged, but I needed a way to access my new feature. I replaced an icon that led to and advertisement for Cash App’s debit card. Based on my research, no other Cash App users used their debit card. I created an icon, a dollar sign with a slash through it. I compared this icon against a Material Design split icon in a group of UX designers to get feedback on which to use. Everyone agreed that the Material Design icon was the more intuitive choice.
I fleshed out the rest of the frames and created two paths to splitting a bill – one where a user manually enters an amount and another where the phone camera can scan a receipt to auto-populate the amount. I designed checks and balances for this in case the system doesn’t read the correct amount.
During research, users noted interest in setting up different groups, where each group is saved with the right friends for that group. I initially designed each group as a different card. Based on feedback, this was one more page that wasn’t needed.
Prototyping
I ran one usability test that I cancelled after 10 participants showed 100% success rate on each task due to wording issues in the questions. I discovered that being too direct with my instructions can lead to false positives, since users find it easy to follow exact steps. I had to reword the questions more task-oriented.
Users struggled with the new “split bill” icon with a mis-click rate of 48%. This is a new icon to the user and I knew it would be unrecognizable to them. Feedback provided from users say this step would have been simple should icons be labeled. However, I stuck with Cash App’s design pattern.
Users were stumped by the check box to turn a fixed dollar amount into a percentage. Users liked the feature, but didn’t like the design. And, I was limited in my design freedom to stay within the brand identity. One tester’s comment sparked an idea: “Being able to switch back and forth between $ and %…” Got it. Done.
Conclusion
Finally, 87% of test participants said they would use this feature if it were implemented. In the end, it’s amazing how much time and thought had to go into this. On paper, it doesn’t seem like much. I designed only two new screens, a layover, and redesigned two screens.
I designed a feature that users wanted and put it into an app that users already have on their phones. Moving forward, I’d love to see if this feature is going to be added to Cash App and how that helps competing against Venmo and other competitors. If I were to do the project again, I’d also adjust some of the hierarchy and affordance issues that some users expressed concern over.
