ShareNest
Expense-sharing app and responsive website
Making group expenses effortless, transparent, and stress-free for everyone involved.
Overview
The product:
ShareNest is a cross-platform product that helps friends and families split group expenses and manage shared budgets effortlessly. Designed for both mobile and web, it simplifies tracking, transparency, and communication around shared finances.
The problem:
People often struggle to keep track of shared expenses, especially when living together, traveling, or managing group activities. Existing tools can feel complicated, lack automation, or make coordination difficult across different platforms.
The solution:
ShareNest helps groups easily split and manage shared expenses through transparent tracking, flexible payment methods, and shared budgeting goals. The app allows users to create or join groups, split bills using either round or exact methods, and view shared balances in real time. It also includes a built-in chat option to make communication between group members easier and more organised.
My responsibilities:
Conducted user interviews and identified key pain points around shared expenses
Performed competitive analysis of budgeting and bill-splitting apps
Defined personas, user journeys, and user flows
Ideated solutions using “How Might We” questions and Crazy 8s sketching
Created low-fidelity and high-fidelity wireframes
Built interactive prototypes for usability testing
Conducted usability testing and analyzed findings
Iterated on designs based on user feedback
Understanding the user
User research: Summary
I conducted five interviews with people of different ages who had experience splitting bills and saving together in groups such as families or friends. The goal was to understand how they manage shared expenses and what challenges they face.
Findings showed that while users value fairness and transparency, many feel awkward discussing money, struggle with manual tracking, and want simpler, more automated ways to manage shared payments.
User research: Pain points
1
2
3
4
5
Persona:
To better understand users’ motivations and challenges, I analyzed interview findings and identified key behaviors, emotions, and frustrations around managing shared expenses.
Based on these insights, I created two user personas to represent different types of people who split bills or save for shared goals. Below is the primary persona that guided most of my design decisions throughout the project.
Problem statement:
Emily is a student living with others who needs a simple and transparent way to split bills, because she gets frustrated when calculations are wrong or forgotten.
Storyboard:
User journey map:
To better visualize the user’s overall experience and emotions while managing shared expenses, I created a user journey map based on interview findings and my primary persona’s behavior.
This map outlines each step, from creating a group to notifying members and highlights users' feelings, challenges, and improvement opportunities along the way. It helped me identify key pain points and design opportunities to make the process more seamless and emotionally positive.
Starting the design
Sitemap:
To define the structure and navigation of ShareNest, I created two sitemaps; one for the mobile app and one for the responsive website.
The sitemap helped me organise main features such as group creation, expense tracking, and payment setup, ensuring that users could move smoothly between the tasks.
User flow:
After defining the sitemap, I created user flows to visualize how users would move through key tasks in ShareNest. This helped me simplify steps, remove unnecessary actions, and make sure the experience felt natural. I designed separate flows for the app and the website, and the one shown here represents the main flow for the mobile app.
Paper wireframing:
Based on the research insights — including user pain points, goals, and journey stages — I began paper wireframing to explore how layout and features could best support user needs. This low-fidelity approach helped me quickly visualise and iterate on different ideas.
Low-fidelity digital wireframes:
After exploring different layout ideas through paper wireframes, I moved on to creating low-fidelity digital wireframes in Figma.
These wireframes focused on the core user flow and incorporated the most promising ideas from the sketching phase, helping me build a more structured and testable version of the design.
Silent video demonstrating low-fi prototype of the mobile app
Low-fidelity prototype:
After finalising the visual design and layout, I built an interactive low-fidelity prototype to demonstrate the core user flows. The prototype shows how users can create a group, add expenses, and track shared balances in a simple and transparent way. It helped communicate the overall look and feel of the app and test its usability before extending the design to larger screens.
Usability study:
To evaluate the low-fidelity prototype, I conducted remote moderated usability testing with 3 participants who regularly split bills or share expenses.
Each session lasted about 15-20 minutes with follow up questions, and focused on key tasks such as creating a group, adding an expense, and viewing shared balances.
The goal was to identify any usability issues, confusion points, or missing feedback in the flow.
Usability study findings:
1
2
3
4
Refining the design
Mockups:
Based on the usability test results, I refined the design to improve clarity and navigation. I removed the pie chart since users found it confusing, renamed some buttons and sections for better understanding, and added a new activity screen in the bottom navigation bar. This screen lets users easily view their sent and received transactions.
These high-fidelity mockups represent the updated version of the app with clearer structure, improved usability, and a smoother overall experience.
Sticker sheet:
This sticker sheet defines the foundational elements of the ShareNest design system, ensuring visual and functional consistency across mobile, tablet, and desktop experiences.
It includes the core UI components (buttons, inputs, navigation bars, pricing cards), color palette, typography, icon set, spacing, and radius scales.
Some additional components such as toggles, search inputs, social authentication buttons were designed but not displayed here to keep the overview focused and concise.
Silent video demonstrating hi-fi prototype of the mobile app
Hi-fidelity prototype:
After finalising the visual design elements and refining the layout based on usability insights, I created a high-fidelity interactive prototype in Figma. This prototype demonstrates the final look and feel of the mobile app, including navigation, interactions, and visual hierarchy. It helped validate the flow and overall usability before moving to the website version.
Responsive web design
Starting the web design:
After finalising the app design, I began working on the responsive website to make ShareNest accessible across devices. I decided to design for three breakpoints — mobile, tablet, and desktop — starting from mobile and scaling up. This approach ensured consistency and a smooth user experience across different screen sizes.
I began the process with quick paper wireframes to explore layout ideas and align the overall structure with the app’s design. This helped me maintain visual consistency and prioritise key features before moving on to high-fidelity wireframes and prototypes.
Mockups:
After exploring different layout ideas in the paper wireframes, I moved on to creating high-fidelity wireframes for the website. I designed for three breakpoints, carefully adapting the layout and interactions to fit each screen size while keeping the experience consistent with the app. This stage helped me refine the visual hierarchy and navigation patterns, ensuring that the user flows established in the app translated naturally to larger screens.
Hi-fi prototype:
I built an interactive high-fidelity prototype to demonstrate the key user flows and responsive behavior of the website. The prototype focuses on the desktop breakpoint, where users can explore features such as creating a group, adding expenses, and managing shared goals. Designing the prototype helped me validate usability and ensure consistency between the app and website experiences across all screen sizes.
Silent video demonstrating hi-fi prototype of the website on desktop screen.
Accessibility considerations:
1
2
3
Going forward
Impact:
ShareNest helped simplify the way groups manage shared expenses and savings goals. Participants mentioned that the concept could reduce misunderstandings around payments and make group budgeting more transparent. The design also showed how a small product can create a big difference in maintaining trust and communication between friends or families.
What I learned:
This project helped me strengthen both my design and technical thinking. I became more confident in applying consistent spacing, colour, and component variants across multiple screens. I also learned how to design adaptively for different screen sizes while keeping a unified experience. Most importantly, I learned to think about users who interact with each other, not just with the product — focusing on how design can support collaboration and communication within groups.
Next steps:
1
2
3
Thanks for reading this far!
I'd love to hear your feedback, chat about design over coffee, or explore new opportunities together.
Thanks for stopping by
© 2025 - Amir Shiri