top of page


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.













October 2021 - December 2021


Mobile Application



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

Slide 16_9 - 5.png

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. 




Style guide

Component Library

Checkmate Sitemap

checkmate sitemap.png

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.


Low/Mid-Fidelity Wireframes

High-Fidelity Wireframes


App Promotion

Bouncing iphone - Frame 1_edited.png

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)

bottom of page