Fairshare Solutions
Fairshare is a fintech company focused on addressing the complexities of bill splitting in group settings. We have created an ecosystem that easily integrates as a point of payment option and allows users to split bills equitably.
My Role
Lead Designer
Project
Design App
Timeline
March - May 2024, 3 months
Tools Used
Figma
Overview
Background
Designed and delivered high-fidelity prototypes for a startup that aims to enhance the experience of splitting a bill. Worked asynchronously as the sole-designer, building style guides, component libraries, and prototypes for essential workflows.
Existing Design
Project Handoff | Original Designs
When approached by Fairshare to redesign their app, I was given their existing prototype with designs from their old team. Below are some of the screens from their initial deliverable. This prototype was made in AdobeXD and had limited functionality and workflows. When passing over the project to me, I had to start from scratch. The goal was to create an entire new design system for the team, with a built out style-guide, component library, branding, and workflows. Given the absence of a PRD, I had the responsibility of envisioning how to bring their idea to life through a new app.
App Redesign
▶︎ CLICK on the screens to play
The first assignment was to create a new onboarding process that was simple yet efficient. Working within the constraints of the required information that Fairshare requested, I designed a workflow that allowed the user quick and direct ways to enter in their credentials. Upon account creation, the goal is to get users to immediately add their payment information so that they can begin using the app’s payment functionalites.
If a user decides to wait and add payment information later, they may do so and continue with account creation. They will be prompted once re-entering the app to update their information, or upon first payment.
Onboarding | Account Creation
Onboarding | Payment Method
Part I: App Redesign
Home Page | Wallet & Spending
Different iterations of the home page that centers around your virtual “group card” in your Fairshare Wallet. The home page surfaces key information and workflows of the Fairshare experience: Account Balance, Wallet, Account Information, Recent Transactions, Spending Analytics, Search functionality, and more.
Home Page | Recent Transactions : Spending
Below are the screens that show Recent Transactions, Monthly Spending and Monthly Saving. The transactions show the username, date, time, and amount. Spending and saving allow users to track their payments monthly, with the ability to set limits or goals to spend more responsibly. Below users can filter transactions based on categories like travel, food, location, etc.
Home Page | Wallet
When designing the wallet, I tried to make it intuitive to users by matching Apple’s Wallet. Here, users can view their Fairshare cards and Payment Methods. If they choose to edit information or add a new payment method, they can do so here.
Home Page | Video Prototype
▶︎ CLICK on the screen to play
Shown is a preview of the high-fidelity prototype of the home page.
The preview features micro-interactions as seen with the group credit card, spending and saving, as well as the ability to change the card color.
Fairshare wanted to surface account balance and the credit card at the top of the page, with widgets below that directed users to the most important workflows.
Part II: App Redesign
Groups Pages
Another feature of the Fairshare app allows users to create and join groups to track and make payments. Each group has a card preview and a main page. Upon entering the group page, users are presented with more information related to group members, outstanding payments, date, time, location, payment method, group ID, etc.
Groups Page | Upcoming & Past
▶︎ CLICK on the screen to play
Shown is a preview of the high-fidelity prototype of the groups page.
The preview features micro-interactions as seen with the joining a group or making an advanced payment.
Fairshare wanted to display the groups in a separate page that allowed users easy navigation to current and past groups they were a part of.
Groups Page | Create New Group
Another aspect of the Groups page is creating a new group. Creating a new group requires users to input information like: Group Name, RSVP Due Date, Category, Payment Type, and optional Description, and Payment Method. Users will then invite friends to join the group, confirm they entered in the correct information, and agree to the terms and conditions before the group is officially created and posted.
Fairshare Value Add | Bill Splitting
Group Payment Workflow
The most valuable part of the Fairshare experience is the act of splitting the bill. This workflow centers around that process, either through manual input or scanning the bill. Users then pay through item select or equal payment, selecting purchases that they are individually responsible for.
Payment Workflows
▶︎ CLICK on the screens to play
Below are three prototypes of bill splitting methods and payment. The first video follows a user manually inputting the items of the payment and sending the bill to those in group. The second video shows a member of the group selecting the items from the dinner, and paying the associated amount. The third video follows a user scanning the bill and sending the receipt to the group. It then follows the process of loading up the group wallet and making the payment from there.
Payment | Manual Input
Payment | Item Select
Payment | Scan the Bill
Reflection
Deliverables & Takeaways
My time with Fairshare was a unique opportunity to work with an early stage startup without a developed design system. It allowed me a lot of freedom to iterate and come up with designs for their workflows that had little constraints to begin with. However, doing so without a PRD or with a team of engineers made it harder to align on functionality and feasibility of certain workflows at this stage. Therefore, the goal shifted to showcase essential features of the app so that it could be presented to investors in an effort to raise money. Other parts of the app would be developed at a later stage.
Special thanks to Charlie Dipaolo for giving me this opportunity and allowing me to be a part of Fairshare’s mission!
