This project was an individual effort from start to finish as instructed by BrainStation. Roles included project planning, visual ideation, prototyping, heuristic evaluation, creating a visual identity, and branding.

I began this project by brainstorming the personal struggles that I experience on a daily basis and realized that household bills sharing is a challenge that I’ve encountered throughout my “adulting years”. With this in mind, I performed market research on this issue to discover potential competitors, as well as a list of problem spaces and “how might we” questions. Followed by market assumptions and a project brief for myself.

To guide my understanding on the assumptions I was making for this design project, I generated a list of statements to determine what I thought may be true.

• I believe my customers have a need to share household cost with more ease.

• These needs can be solved with a social payment tool with cost tracking.

• The initial users will be college students and young professionals in Toronto.

• The main value a person/user wants to get from my product is efficiency.

• Additional benefit – organization, mindfulness, transparency.

• This product will acquire the majority of my users through campus ambassadors, word of mouth, and Facebook ads.

• This product will make money by selling ad spaces and premium features.

• The primary competition in the marketplace will be Splitwise and Interac.

• This product will beat them by being highly specialized and user friendly.

• The biggest risk is overcomplicating the problem instead of simplifying it. It will be solved through studying the past failed attempts by other developers.

• If the problem statement is proven false, will cause this product to fail.

To capture thoughts about my problem space, and what the design opportunity is, I wrote a short project brief that summarizes and clarifies the problem I’d like to address.

I then performed user research amongst my peers to gain first-hand insight on this matter and compiled my findings into an insight statement. This was then followed by building user personas and their journey maps, creating user stories, and finding epics.

The purpose of this interview is to gain insights on the costs sharing methods used by average households in Toronto, Canada. I interviewed a total of 4 people between age 20-35 and summarized my findings to further align with my target demographic.

• Money is a sensitive topic to bring up with friends, people tend to avoid it if they can.

• Respondents usually resort to discovering their own ways of keeping track of household expenses.

• It is tedious to have to manually track every household purchases consistently.

• People tend to let each other’s share pile up before settling with one accumulated payment.

• Interac etransfer is the most commonly used tool for roommates’ reimbursements.

• It is common to lose track of who owes what.

Participants demonstrated a negative attitude towards the organization methods used to track their shared household costs, claiming it to be vague and unstructured. Participants also expressed a desire to pay their accumulated share in a simpler manner.

The insight statement then allowed me to create user personas and journey maps to gain further insights on my target user’s needs and find design opportunities to solve pain points.

I then created 50+ user stories using the “As a… I want to… so that I can…” format and found 3 epics within those user stories, 1 of which was selected as the core epic.

• Manage shared household costs in one place.

• Increased household cost transparency.

• Hold roommates accountable.

According to the user stories and core epic, transparency and organization seemed to be the main causes of users’ frustration. The desire for roommates to stay informed on “why they owe what” is constantly expressed. Hence, I focused on solving this problem by providing users with a source to reference and track their shared household expenses, so that they are always on the same page. With a user persona in mind, I began to decide on a task flow that would simplify his experience in contrast to the existing solutions.

In this first iteration of the task flow, the user will access the mobile application and be greeted with cards of recent transaction activities made within the household in regards to shared household costs. The user then has the option to check his remaining share of the monthly balance, which will be separated into categories, and decide how much of each category the user would like to pay off today.

With a task flow now in mind, it was time to ideate and wireframe.

The exploratory sketches would then allow me to develop a paper prototype, which I tested with the Marvel POP app.

I then began my mid-fidelity wireframes by creating and comparing several versions of the home screen. The third screen stood out to me most so I decided to build my first iteration of prototype with it.

Two rounds of usability tests were then performed on participants that match my target demographic so I could gain insights and feedback on the usability heuristics of the designs. This usability test is performed through one-on-one user testing. Where the interviewer introduces the purpose of this test, followed by specific requests to complete a few tasks on the platform. All interviewees’ responses and actions are observed and documented. Design iterations were made after each usability test; grid spacing included.

During the 1st usability test, some participants were confused of the meaning behind of certain numbers and tab icons. A few comments were also made about the progress bar looking like a search bar. As well, a typo was spotted by all participants where I spelt “Unsettled” as “Usettled”. So I took those feedbacks and reiterated my design to prepare an updated prototype (as seen below) for the second round of user testing.

In this iteration, I altered the appearance of the progress bar, replaced user icons from avatar to real pictures, replaced a few tab bar icons, and altered some wording for clarity purpose.

During the 2nd usability test, participants felt that a lot of things were fighting for priority on the home page. A few also expressed the desire to pay portions of a bill instead of the full balance. As well, some participants continued to have trouble understanding certain tab icons despite the update. So i took those feedbacks to further reiterate my design in order to prepare a final mid-fidelity prototype (as seen below) for colour injection.

👇🏻 In this iteration, I…

• Simplified the home screen

• Added labels under the tab icons

• Implemented an iOS segmented bar

• Implemented a payment amount feature

👇🏻  Prior to proceeding from mid-fidelity to high fidelity, the wireframe spacing was adjusted according to the 8px grid system.

With the new design implementation, I also created an updated task flow that aligns with the features of my prototype.

To summarize my usability test findings – Overall feedbacks came back positive. Participants state that it is straightforward, and the requested tasks were easy to accomplish. However, majority of the tested users had trouble identifying selected aspects of the home page. Statements were made regarding its content heavy nature and the unclear hierarchy of information. Tested users also expressed confusion about the meaning of certain information that is presented due to improper use of wording or icons.

To solidify the idea behind this product, I began this process by creating a “This product is more… than…” list. Followed by a list of keywords that this product embodies. As well as a list of concept names and concept word-mark sketches with pen and paper.

• Casual than formal

• Efficient than tedious

• Automated than manual

• Transparent than confrontational

• Simple than awkward

• Easy than complicated

• Organized than vague

• Pleasant than content heavy

Pleasant, easy, simple, minimal, bonding, light, casual, futuristic, productive, organized, trust, transparent, security, unity.

After rounds of brainstorming, Treasurer was selected because it aligns most with the purpose of this application –  to simplify shared household bills between roommates.

Then I created a mood-board that captures the tone of my product. Colours are pulled directly from the mood board and are arranged and presented according to the WCAG.

In order to test out multiple colour schemes quicker, I reverse engineered my most updated mid-fidelity wireframe to low-fidelity. I found this extremely helpful in my decision making process because it allowed me to focus less on the details and more on the colour pairings.

Followed by the exploration of different styles of word-mark. Which was done in both black/white and coloured to help better visualize the final product. 👇🏻

Followed by app icon exploration. Initially done by sketches on paper according to the keywords that Treasurer embodies, most notably – unity, simplicity, minimalistic, bonding, and organized. 👇🏻

After repeated iterations and brainstorming sessions, the word-mark and app icon were finalized.

The puzzle piece symbolizes unity, bonding, and organized.

The word-mark symbolizes simplicity and minimalistic.

Then it was time to compile everything from my prototype to create a UI library. Which is where I encountered one of the biggest challenges, specifically the typography part. At this point in my project, I had already spaced everything according to an 8px grid. When I returned to inspect and compile my typographies used, 13 different font combinations (size, weight, and HEX code) were found, which resulted in a few hours of extra work to decide on unanimous fonts and re-spacing the user interface. Oh well, lesson learned.

In short, I built a UI library which covers the logo, colours, typography, iconography, buttons, navigation, card styles, modals, grid layout, and images used in the final prototype. Feel free to take a look at it here!

After an eventful ten weeks, it was finally time to create a marketing website for potential users to discover and download Treasurer. A desktop and a mobile version were both created for device optimization purpose.

Inspirations were compiled from KOHO, STACK, Splitwise, PayPal, Cash App, Google Wallet, Apple Wallet, and Brim Financial. Followed by paper sketches to explore different layouts.

Paper sketches allowed me a better idea of possible layouts of the website. To further refine the visualization of this project, I created low fidelity wireframes, followed by mid fidelity mock ups to explore the tone of brand narrative, brand stories, and product features.

Low Fidelity 👇🏻

Mid Fidelity 👇🏻

After rounds of iterations, high fidelity mock ups are created to showcase the product. 👇🏻

Being that this is my first attempt at UX Design, I am extremely happy with the final product. I have learnt a lot throughout this process – most notably turning criticism into insights and letting go of ideas.

If this same project was introduced to me today I would explore more mid-fidelity wireframes to avoid tunnel vision. As I felt an odd attachment towards presenting my home screen with cards throughout this process, which is definitely not a good practice if I intend on becoming a versatile product designer.

Anyways, thank you for reading this.

If you have any further questions or inquiries, feel free to contact me via clarencechoy@outlook.com. Always happy to chat! 

👉🏻 Paper Prototype 

👉🏻 Figma Prototype

👉🏻 Style Guide