SplitsZees
A class project (fictional) peer-to-peer money-sharing app based on the UX research process.
The Problem
How might we help create a digital wallet with ease of access and a convenient avenue for peer to peer payment, eliminating the need for cash or outside resources?
The Challenges
Solve the IOU problem for good by taking away excuses for not paying peers
Simple and quick access for getting paid without a bank, cash, or ATM
Integrate the app name into everyday conversation (“Let’s SplitsZees this bill!”
Digitally pay peers no matter where you are
S.W.O.T. Analysis
SplitsZees vs. Competitors
After completing the S.W.O.T. analysis, I determined two things:
SplitsZees has the opportunity to add extra security measures that other apps don’t provide in order to bring in more users
SplitsZees needs to visually differentiate itself from other apps in order to be noticed among other already existing apps
Discovering the End Users
“I like low maintenance, I have enough going on in my life.”
There were key 2 themes that were revealed from the user interviews I conducted:
Productivity is important
Users do not want unlimited options. Their goal is to get into the app, find what they need, and move on with their to-do list.
Enjoyment is important
Simplicity and aesthetic matters more than security. Shortcuts mean the user can move more quickly through the app, which increases their enjoyment of the product.
In the interviews, patterns became evident which gave a grasp of who the users are and a glimpse of their life.
Journey Map
What I learned from interviews and journey mapping…
Problems I Discovered:
“Friends forget to pay me back when we split the bill.”
“I don’t have time to figure out another app when I have other things going on.”
“Money is a private matter. Others don’t need to know why I’m sending money.”
Solutions I Created:
Create a ‘reminder’ within the app to send notifications to other users
Design the app with simplicity to allow users to easily navigate like it’s second-natured
Keep transactions within the app private
Lo-Fi Mockups
I was able to cleanup my sketches and begin my lo-fi mockups after getting feedback from end users. I started with icon because they would be the non-verbal cues for guiding users through the app. Whereas written communication requires cognitive processing, which slows things down, icons provide intuitive access at the fingertips of users.
When I made my initial sketches, the main feel I wanted to emphasize throughout was a sense of ease: keeping the layout simple so any user could move through without extra thinking.
Originally, this design included a calendar feature. The idea was to help provide user with an avenue to remind their friends to pay them back. I later removed it, though, as further interviews and testing told me it made the app “too cluttered.” The calendar really changed the focus of the app, and I believe this feature could still be added later on with more testing.
Wireframes
Wireframes allowed me to see how the layout would function before moving onto mockups.
Mockups
Initially, I had the settings under the “account” page for users to scroll down. However, I discovered during testing that users were naturally attempting to scroll on the “menu” page to access the settings, even though I had not placed them there.
I then placed the settings beneath the “dark mode” feature on the “menu” screen and kept the arrow as another visual clue.
In my initial draft of the “notifications” page, I knew I wanted users to easily distinguish between various transactions that would occur within the app.
After testing, I recognized the need for more visual contrast and utilized the UI to differentiate between transactions that have already taken place and ones that are still pending.
I
created a receipt-like look because of the already associated connotation of
spending or transactions. This created another
nonverbal cue to improve usability.
Other User Feedback . . . Don’t re-invent the wheel
60% of tested users did not understand the “talking bubbles” icon for the notifications and suggested that a bell icon was the more common and already known choice. Which in the second iteration was changed to not re-invent the wheel.
50% of the tests revealed the users were already trained to look for the menu icon to be anchored in the corner of the app, so in the next iteration I anchored it in the right corner, thus leveraging the common usage.
Prototype
Style Guide
The style guide consists of the crucial elements that lend to SplitsZees’ ease of use, easy to find what you need and easy to execute your goals as a user.
The SplitsZees colors are all mainly cool as they are known to be calming. The red/orange was chosen as a bright color pop after the founder mentioned his affinity for reds. The colors are a playful contrast that coincide with the overall feel of the app and also set SplitsZees apart from competitors, always serious mid range blue.
The idea was to choose relaxing colors for the target audience to feel enjoyment and success while using the app, even if it’s only a brief encounter with SplitsZees, so that they are most likely to be return users if it is a pleasurable experience.