How we came up with the genius idea that is... Instapay
Extensive research went into finding a domain what wasn't already flooded with apps, but could still benefit from some new ones. Based on this research, we discovered that restaurant patrons were spending more time at restaurants.
Specifically, we discovered that the average customers were spending over 15 minutes from having their check delivered to paying and leaving.
Researchers also predict an increase of 10% in restaurant traffic over the next 5 years.
The guiding principles we chose are meant to represent a company that would handle someone's personal information, specifically credit cards and banking information. We also want to insure that both Restaurant owners and Restaurant customers feel safe using Instapay.
With our idea of starting a bill at a restaurant before eating, we quickly mapped out a User flow chart to help visualize this process. Our User Flow chart revealed that there is a large amount of areas that could improve the users experience and overall quality of the dinning experience.
We then moved onto paper prototyping and storyboarding a rough flow of the application. We used this step to identify the "Hotspots" that would be necessary for Instapay to provide a better experience. Sketching also helped to determine which tasks we wanted to incorporate, and which ones we wouldn't need.
Once we were happy with the flow from the sketches, we moved onto making digital grayscale mock-ups. This allowed us to visualize how Instapay would appear on mobile devices. It also allowed us to add more details to the interactions that the users would have.
We then moved onto making higher fedelity mock-ups, these mock-ups were then used in Marvel to create a functional prototype to user test on. At this point, we also decided to add more features to Instapay in improve on the User Experience.
We tested multiple users with different backgrounds in experience using payment and food related applications. These tests revealed to us some flaws in the prototype as well as some useful features that they enjoyed. We created 2 storyboards for the users to complete, and we used a talk out loud method as well as a follow up interview to ask questions and gather feedback.
You’re checking in to a restaurant and starting an order for you and your friends. You decide to split the bill evenly between the 4 of you. You pay a 20% tip with your American Express Card and leave a review about your wonderful dining experience.
Your company is hosting a group celebratory dinner. You boss checks in using the app and share the code with you to pay for your part of the meal. You pay a $2 tip with your MasterCard. After the payment, you export the receipt to a spreadsheet for later use.
Payment system was fast and easy
Did not require any explanation to complete payment transaction
Can easily view previous transactions and export them
“Show to server” step requires more onboarding
General confusion on what the code is for
Popup animations are too long
“Not the restaurant you’re looking for” is too low on hierarchy
After completing our user studies, we decided to make some changes to our design. Most of the design changes that we made were related to information the user on the current state and task that was being completed in the back end of the application. The changes we made address these issues and keep the user more informed on the process stages.
Many users indicated that “Not the restaurant you’re looking for” doesn’t look like a clickable button. Furthermore, the proximity to the Confirm button makes it easy for the user to miss-click.
There was general confusion on what the code was used for. Users did not immediately understand its purpose. A “Share” button that shares the code via the user’s contact list would streamline the process.
During certain parts of the app, the user waits for the restaurant or app to do something. A popup message or load state that indicates what is happening would inform the user better.
A popup or push notification that tells the user that the payment has been accepted. This ensures that the user knows that they paid successfully. This also helps the restaurant keep track of payments.
In the Feedback screen, the user is unsure if they are giving feedback about the app or about the restaurant experience. By changing the text, we can clarify that the feedback is for the restaurant.