Updating a Legacy System
Timeline
3 Months
Role
Product Designer
Project Summary
I came into this project with some wireframes already developed but with no testing completed. As the only designer on our product team, I was tasked with creating prototypes, conducting usability studies on the existing wireframes, making iterations to the wireframes based on results, and finally implementing the brand’s UI styling.
Tools Used
Project Breakdown
Research
After having discussions with one of our biggest clients, we knew which tasks are most common in a day-to-day setting for a customer service agent that uses the current system. At this stage, I didn’t need to design any additional wireframes.I designed seven prototypes based on different scenarios that might come up. Tasks included refunding a payment, adjusting a payment, finding an order without a name, etc. Knowing that these tasks are realistic helped us to focus the results of the testing on user pain points with the program itself.
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.
