About the Project
The Brief:
Blytzpay is a system that lets small business issue bills to an app on their customer's phone. As part of a larger redesign, I added a key feature into the app - the ability for a user to deposit money into the app via a department store cash register.
The Team:
Myself, a UX Designer for Outcode Software
Cindy Ross, Project Manger for Outcode Software
Corissa Peck, Project Manager for BlytzPay
Ryan Hansen, Engineer for BlytzPay
Cindy Ross, Project Manger for Outcode Software
Corissa Peck, Project Manager for BlytzPay
Ryan Hansen, Engineer for BlytzPay
The Timeline:
6 Weeks (for the entire app design)
PREPERATION
1: Users and Stakeholders
To better understand this feature, I identified the various parties that would be involved in the flow.
Customer - The customer using this app to pay their bills. They will value a sense of control and clear communication. They are trusting the application with their money, and that trust needs to be rewarded.
Cashier - The person working at the department store and enabling this deposit. Their part in the process must be as simple as possible.
API Integration - The integration enabling this deposit method was provided by VanillaDirect, a third party. Any restrictions they set would have to be accommodated.
2: UX REVIEW
I took time to review BlytzPay's existing mobile and web experiences, to see what lessons I could learn and if any elements would be salvageable. The designs were pretty deficient in a few areas. Several issues combined to produce a very unclear information hierarchy.
- Strange size relationships, with a vastly oversized logo and undersized buttons.
- Too much variety in fonts and font typefaces.
- Incorrectly emphasized elements, with labels sometimes being more visible than critical buttons.
DESIGN
1: FLOW DIAGRAM
Based on the initial discussions with the client and my own prep, I created a user flow document showing the steps to this deposit process. This document was a platform that let us discuss our decisions and their repercussions. A few clear priorities emerged as Blytz told us more about their userbase.
- The customer should be in control of their phone for the entire process. A barcode scan will enable the deposit, and the cashier doesn't need to hold the phone for that to work.
- The customer should be very clearly rewarded at the end of the flow. This will make them feel good for using the system, and reassure them that the deposit worked properly.
2: Whiteboxing
I created whitebox screens based on the flow diagram. To help users along the flow, I kept the number of actions per screen low and added instructions at the top.
We integrated the Map feature here, since selecting the deposit location via dropdown would be unintuitive for some users.
3: Integration Requirements
As we moved into full res designs, I referenced an integration doc from VanillaDirect for the barcode API. Certain requirements were placed on barcode size, location, and visual styling.
4: Final Designs
Full res screens followed naturally from whiteboxes. The client requested that I stick to their existing brand colors, which I was happy to do as I rather liked them. I integrated some textural additions as well, inspired by wallet stitching and perforated receipt tears.
Takeaways
SUCCESSES:
The process of this design went smoothly and efficiently. Each phase went cleanly into the next, and early user/stakeholder definitions kept myself and the client on track.
In addition, having both an Outcode PM and a client PM on the project worked very well. The Outcode PM was able to focus on keeping tasks aligned, while the client PM could focus on giving me actionable feedback on the designs.
STRUGGLES:
The major missing element was a user test of the system. While the client did give me great insight into their customers and how they used all elements of Blytz software, that's no replacement for direct feedback from those customers.
Unfortunately, after the design process was complete the project stalled out as the client was no longer able to pay us. It's a tough lesson that sometimes with client work, the things you design just don't wind up getting built.