Overview
Goal
Simplify the process of bill splitting - taking away the process of calculating what you owe (or are owed) and remembering to pay your friend.
This concept started during a semester long project in college where a group of us acted as a start up having to create a new product with in the internet of things.
Process
Layout concept, problem, & need for an app like this
Market research & competitive analysis
Outline target users
College students aged 18 - 22; high school students aged 16 - 18; possible market for adults aged 22 - 28
Create styleguide
Flowcharts & wireframes
Draw simple wireframes to understand layout and hierarchy
Basic lo-fi designs
Hand draw each screen to get a sense of what kind of visuals we can use to portray different information
Hi-fi designs
Finalize V1 hi-fi designs
Design Challenges
1 - Connecting the user to the restaurant and their POS so users can directly access their bill.
Solutions:
- Implement a software in restaurant POS that allows users to access their bill once a PIN is entered
2 - Simplifying
Solutions:
- Charts and graphs to make things more digestible
- Visual cues (colors, highlights)
3 - Avoid information overload.
Solutions:
- Use whitespace and clear categorization
- Limit stats shown to most important ones
- Highlight relevant data
Background
What is SplitSec?
SplitSec was designed to make splitting the check effortless. Using our two-part system, diners receive a personalized PIN code generated by the restaurant's POS system, which links them to their bill stored securely in the cloud. From there, users simply select their items, set their tip percentage, and tap "Pay Now." Payments are seamlessly processed through a saved credit/debit card or bank account linked during account setup. With SplitSec, the hassle of splitting checks is eliminated for both diners and restaurants.
Market Research
Tab App
Tab is a mobile app that translates a photo to text. This way a user can take a picture of the bill and then select the items they ordered, but there is no payment integration. A user is then pushed to Venmo to complete the payment transfer.
Their UX and UI are very basic. It's incredibly simple and the app only does one thing. I think there is massive room for improvement but they were the closest thing we could find to a competitor and the process they have implemented is something I looked closely at.
Styleguide
I focused on colors representing trust and finances with some fun mixed in due to the audience being mostly a younger crowd; and fonts that were clean and simple.
*Note: this styleguide is for the newest version I'm working on. It's still a work in progress.
Sketches & Wireframes
Final Designs
V1
- 12 week timeline
- Presented at our showcase at the end of the semester
- Won student's choice award
V2
As I expanded my skills and knowledge, I decided to go a different route color-wise and also incorporate some financial tools like weekly spending, monthly spending, and more.
V3
After feedback I decided to iterate again and focus on a lighter, simpler design going back to concentrating on the actual problem that the product was initially intended to solve.
- Color scheme updated to be easier to see/read in a dark restaurant environment and for better accessibility
- Buttons are made more obvious
- Improved a lot of pages to be more intuitive
V4 - work in progress
I'm currently working on yet another iteration off of the assumption of a phased release.
First phase being having a "host" who will start a "party" for others to join, take a picture of the bill, and then the app would convert that image to a clickable list.
Second phase would move to implementing the POS software or device in restaurants, adding the ability to connect the bill to the app through the cloud.
Goals:
- Focus on UX improvements
- Focus on simplicity
- Phased release approach
