top of page
Project Objective
I designed this app to solve the confusion and inefficiencies that often arise when splitting expenses during group trips. By allowing users to track who paid for what, assign payment responsibilities by amount or percentage, and account for discounts or exceptions, I aimed to create a clear, fair, and transparent cost-sharing experience tailored for group
Solution
I designed an app that lets users track and manage shared expenses during group trips by assigning payments based on specific amounts, percentages, or individual contributions.
Users can also log who received discounts and who covered which items, ensuring clarity and fairness. Built-in features for visualizing contributions and settlements help reduce misunderstandings and streamline the process of splitting bills among group members.
Role
UX/UI
Duration
6 Months
Tools
Figma
Adobe Creative Suite
Miro
Market & User Research
These survey questions are meant to find the pain points of the users who travels face when managing group expenses. They aim to see if unclear tracking has caused frustration or conflict and what issues people face when splitting costs. Questions about fairness and uneven payments show the need for more flexible options. By asking if everyone would join a shared app, even non-active members, the survey will test how open groups are to using one tool.
User Survey
To validate SplitMate’s concept and uncover pain points in managing shared expenses, I conducted a user survey focused on group travel scenarios. Five participants responded to questions about fairness, tracking clarity, and preferred platforms.
Key findings
-
75% experienced unfair expense splits, often due to unclear tracking.
-
Web apps were preferred for ease of access.
-
Top frustrations included manual calculations, lack of transparency, and confusion over who owes what.
-
Desired features included flexible splitting, auto-calculation, receipt uploads, and summary reports.
These insights confirmed that users are seeking solutions that prioritize fairness, clarity, and automation. The findings played a key role in shaping the next phase of the UX design by highlighting the importance of flexible splitting methods, transparent expense tracking, and streamlined group coordination. Grounding the design in real user needs ensured that the product direction remained both relevant and impactful.
Competitive Analysis
Both Splitser and Settle Up solve the general “who owes who” problem, but neither fully supports the unique complexity of travel expenses. By studying them, I identified specific gaps and opportunities that are guiding my design choices.
User Persona
User Journey Mapping
To design a product that supports the main user persona, Daniel Park, I created a user journey map that illustrates his experience from awareness through advocacy. This helped me understand not only what he does but also how he feels at each stage, from curiosity and hesitation to frustration and trust. By mapping Daniel’s actions, touchpoints, emotions, and pain points, I identified friction such as difficulty choosing between similar apps, hesitation from group members, and the repeated effort of explaining how the app works. These insights guided design decisions including a guest mode, streamlined onboarding, and in‑app tutorials.
Feature Prioritization
For this case study, the primary focus for MVP was to solve the core problem of group payment friction with maximum efficiency. To achieve this, I strategically prioritized Must-Have features that are non-negotiable for app utility, including the ability to add friends and members and the crucial function to split a bill both equally and unequally. These elements form the foundation of the user experience, allowing them to manage group expenses. Features like currency conversion, receipt scanning, and AI suggestions were classified as Nice-to-Haves, reserved for future iterations.
Low-Fi Screen Flow
As part of the UX case study, I included a flow chart to represent the Information Architecture (IA) of SplitMate’s bill‑splitting feature. IA organizes tasks and decision paths, helping stakeholders understand how users progress before moving into screen design. By mapping the bill‑splitting process first, the flow chart provides a foundation for the low‑fi screen flows that follow.
Hi-Fi Design
The high-fidelity flow features 11 screens capturing the final visual style and interaction details of SplitMate, reflecting insights gathered throughout the design process.
Interaction Design Research (TD Web app)
1
Accordion Dropdown
❇️ Component description
The Accordion is a collapsible container that reveals or hides information when clicked. It helps organize content into sections, reducing clutter.
On the Transaction History page, clicking the filter icon triggers an accordion dropdown that reveals or hides filtering options, allowing users to refine displayed transactions efficiently.
Located at the bottom of the page, clicking the “Legal Notes” text expands a dropdown that reveals seven linked pages, providing users with access to detailed legal and policy information.
2
Collapsing Text Animation
❇️ Component description
The Collapsing Text animation occurs when a section is clicked, triggering the text to shrink in size as the content expands. This provides a smooth transition that draws attention to the newly revealed content while maintaining visual hierarchy and clarity.
When a section is clicked on the Transfer between my accounts page, the header text smoothly shrinks in size.
3
Toggle Switch Animation
❇️ Component description
The Toggle Switch Animation lets users switch between two states, such as “Activity” and “Manage.” When clicked, the active label smoothly transitions with motions
A two-state toggle that switches between “Activity” and “Manage.” When clicked, the active label smoothly transitions with motion feedback and navigates the user to the corresponding page.
I conducted this research to understand how users interact with key components of the TD web app and to get insights that I can apply into SplitMate. These findings helped me refine interaction patterns, enhance clarity, and create smoother, more intuitive user flows in both designs.
Interaction Design
Interaction design is essential in UI/UX because it shapes how users feel and act within a product, turning static screens into intuitive experiences that build trust. To improve the onboarding carousel, I added swiping illustrations and fading text to guide users. Navigation works by mouse swipe or Next button, making the experience clear and easy to understand.
The Group page interactions show the underline bar shifting between Members and Expenses while text color highlights the active tab. Hover effects emphasize the Add New Member button, and the chevron rotates to expand or collapse expense details in an accordion-style dropdown. These interactions make group navigation faster and clearer.
Usability Testing
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Address the Discovered Problems
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Responsive Design
Focusing on mobile responsiveness, I designed adaptive layouts for onboarding, expenses tab, and bill-split screens. The onboarding flow uses centred illustrations with swipe-based transitions, while the expenses tab features thumb-friendly cards and a fixed bottom bar for quick navigation. On the bill-split screen, interactive elements such as toggles and amount inputs scale responsively for reducing tap distance.
Takeaway
✅ I learned how to conduct user surveys, which provide quantitative insights and uncover broader user needs. choices easily.
✅ I discovered how creating user journey maps helps visualize goals and pain points to guide empathetic design.
✅ I learned how to audit other products and apply findings to design decisions.
✅ I learned how to create clear documentation that helps audiences understand design
✅ I observed through auditing the TD app’s interaction patterns and designing interaction design for SplitMate how micro‑interactions enhance clarity and build trust with visual feedback.
✅ I understood how to conduct user testing with UserTesting.com to validate assumptions and refine flows.
Next Steps
☑️ I will conduct user testing to validate the bill‑splitting flow and refine interactions based on
behavior.
☑️ I plan to explore features like automated receipt scanning, smarter split suggestions, and expense summaries to improve transparency.
☑️ I aim to evaluate integration with third‑party tools such as receipt scanning APIs, OCR services, banking connectors, and travel apps to automate data entry, reduce effort, and extend SplitMate’s usefulness.
☑️ I would collaborate with developers to assess feasibility, optimize performance, and ensure animations translate smoothly into production.
bottom of page