Close up of interactions
Client: Hestia Home
Role: UX/UI Designer
Assignment: Design and mockup prototypes for payment app
I picked up mobile app design as a hobby because I have the design skills but my 9-to-5 is more marketing design. In order to practice on UX/UI design, I come up with solutions to problems in the world and mock up prototypes sort of for fun. This is the first one. So, currently there is no secure mobile app where customers can easily sign in and easily pay for all of their home bills in one place. In order to pay for cable, rent, parking, etc, you need to be on a PC or have multiple apps and even a checkbook still for a lot of homes. Furthermore, when there are multiple residents who owe rent or bill payments (roomates, spouse, etc), you need even more apps to split those payments.
Create a mobile app design with a seemless golden path to get from the Sign In screen to creating an account, making a payment, or splitting a payment in under five taps. The user experience should be familiar with smooth interactions and a WYSIWYG design layout. No extra bells or whistles. Just get in, make the payments, done. The backend security and technology already exists in the world today with apps like Venmo and your standard banking app so I knew it could be done in theory but I needed to find a creative way to put all of these together in one easy-to-use interface.
The first thing I did was reach out to friends and family with all types of living arrangements. I wanted to find painpoints and address as many as I could with this app. The biggest question that came up was how to add a new account, say cable for example, and how that would interact with the account company. Since this is just a personal project, I'm making the assumption that in the backend, there would be agreements set up with a secure connection between a bank or payment option, HestiaHome, and the account company kind of like how Venmo can pull from your account and send the cash to your friends.
Then I compiled the pages and pages of notes and started hand-sketching the flow on paper from signing in to successfully making a payment. After a few iterations of how that would be possible, I brought the flow into Adobe XD to layout all of the screens. From there I created a simple UI layout and started linking each screen and instance with smooth interactions that made sense to the flow of making that payment. Again keeping in mind "what is the easiest path from A-Z in 5 taps or less." After a few user tests with my friends and family user group, I fine-tuned a few minor interactions and got it to the point where a new user could open the app and get to the successful payment screen and say "Yep, that makes sense. No questions at all! When will this be a real app I can
Within a few weeks of setting out the task, I had a working prototype ready to roll. If this were more than just a hobby project, the assets would be ready to send off to developers to get started. I still need to flesh out all of the menu options to make this 100% but the user experience and golden path is set. Next up will be creating the rest of the content and designing a polished UI to show how cool this app can actually look!