CHECKMATE
Mobile Application
UI/UX Prototype
An interactive application and website offering roommates the ultimate solution for splitting housing expenses and due bills.
The Problem at Hand
Prior to committing to a design, it is crucial to first identify the background of the problem by analyzing its target market and its critical pain points. The problem at hand is that more young adults are resorting to house-sharing options to mitigate living costs but are finding difficulty in tracking and splitting rooming expenses with their housemates. Current bill splitting applications have not fully met the criteria of this subject group and are not addressing the concerns of the target user.
Design Challenge
How can I address the concerns of sharing rooming expenses while providing an innovative approach to dealing with bill-splitting?
The Solution
Checkmate is an all-in-one mobile application capable of compiling all living costs & expenses to be split and paid between the roommates of the same house. The key objectives of this application are Efficiency; structured organization of bills and payments, Accessibility; intuitive user interface with quick access features, Resourcefulness; the ability to make direct payments within the app.
Role
Research
Ideation
Prototyping
UI/UX
Visuals
Tools
Figma
Illustrator
Unsplash
Timeline
October 2021 - December 2021
Type
Mobile Application
Research
Before starting any design production, the top three contenders of existing bill-splitting applications were identified and deconstructed. The first application, Splitwise, was found to have unintuitive features that were not found as user-friendly. They also do not provide the option to directly pay off expenses within the application and do not allow for the sorting of category lists. The next application, Settle Up, offers no option to recover deleted groups and transactions. Lastly, Splid lacks clarity on how to split bills and does not offer a communication feature for contacting groupmates. After collecting the data of responses for existing bill splitting applications, I was able to compile crucial pain points necessary for the success of my app design.
Key Features
Prioritized Bill Reminders
Quick-pay/Payment Transfers
Saved Digital Wallet
Receipt Barcode Scans
Receipt Image Uploads
Group Expense Tracking
In-app Communication
Competitive Analysis
Competitive Analysis
After the competitive research had been conducted, I moved on to establishing my application's sitemap and style guide components. It was also at this time that I decided to name my application Checkmate, which was made from a combination of "checking" your list of due bills with your "mates", which are the roommates. A mood board was also built using sources from Pinterest to define the color palette for Checkmate.
Process
Moodboard
Sitemap
Style guide
Component Library
Checkmate Sitemap
Mood Board / Style Guide
Ideation & Prototyping
Before committing to any digital designs, it is important to sit down with a pen and paper to have a brainstorming session. At this point in my process, I began sketching out key features that I hoped to implement into my design. I then digitized my sketches into mid-fidelity wireframes. Before moving forward with the high-fidelity wireframes, I conducted a feedback token session with my peers to gain some insight on what parts of my design can be refined.
After the feedback was implemented, I created the high-fidelity screens for Checkmate. During the iterations of the final designs, it is crucial to reference a style guide. By first determining the style guide for the application, I would be able to maintain consistency for the design elements. After all the copy and visuals were added, the finalized screens were then linked to perform as a functional prototype.
Process
Low/Mid-Fidelity Wireframes
High-Fidelity Wireframes
Prototyping
App Promotion
Promoting Checkmate
The last step to this design project was to create a promotional piece to advertise my new application. I decided to design an interactive website that would display feature highlight demos. In order to accomplish this, I animated and recorded gifs to be shown as the user interacts with the site. Feature descriptions are also listed beside the demonstrations to fully promote Checkmate.
Interactive Website (Screen recording)