Managing shared expenses within friend groups can often be a source of friction. Payback, a new app developed by Drexel University’s User Experience and Interaction Design (UXID) students, aims to eliminate this hassle by providing a simple and intuitive platform to track group payments and split bills effortlessly.
The Challenge: Streamlining Group Transactions
The Payback team identified a common pain point: the difficulty in accurately calculating expenses and managing group transactions among friends and family. Existing apps often feel outdated or create further confusion when dividing costs. The goal was to create a user-friendly solution that simplifies the entire process.
Goals and Objectives
Over six months, the Payback team worked to:
- Research their target demographic and analyze existing competitors to determine user needs.
- Create low, mid, and high-fidelity prototypes, iterating based on usability testing feedback.
- Build a comprehensive design library to ensure seamless handoff to the development team.
- Develop a working web app for the project, prioritizing MVP (Minimum Viable Product) functions.
The Payback Solution: User-Centered Design and Development
Payback’s approach centered on understanding the needs of its target audience (college students and young adults) and designing a visually appealing and easy-to-use app.
Research-Driven Design
The design process was heavily influenced by user research and competitive analysis:
- Initial Interviews: Gauged user interest and identified necessary functionality.
- Competitor Analysis: Examined apps like Mint, Splitwise, TriCount, and Venmo to understand their strengths and weaknesses.
- Target Audience: Focused on users aged 16-32, identified as the most likely to split bills. Personas and journey maps were created to empathize with potential users.
- Usability Testing: Conducted with 32 users across low, mid, and high-fidelity prototypes to identify and prioritize design improvements. Severity charts were used to categorize and address issues effectively.
Branding and Visual Design
The team carefully considered color connotations related to finance and aimed for a fun and accessible brand identity, steering away from the typical blue/green palette. A rounded typeface was chosen to enhance the playful feel, and the color scheme was tested for color contrast and accessibility for various forms of colorblindness.
Design System and Dev Handoff
A comprehensive design system was created to ensure consistency throughout the app, including component organization, typography, color guides, and grid/spacing guidelines. Zeplin was used for developer handoff, providing a centralized location with inspection tools for pixel-perfect coded prototypes.
Development
The app was built using:
- React.js
- Chart.js
- Bootstrap
- Framer Motion
The front-end development focused on building out each page, with attention to design accuracy and accessibility. Back-end development centered on calculations, splitting algorithms, and data management using Firestore for storing expenses and group information.
Content and Microinteractions
Friendly and inviting language was used throughout the app to enhance the user experience. An interaction guide was created to document important microinteractions for the development team, though not all could be implemented due to time constraints.
Conclusion
Despite challenges, the Payback team successfully created a concept, researched, designed, and developed a mobile web app that helps users split bills with friends. The team’s designs cover a wide range of functions and adhere to standards to ensure consistency. The development team built out nearly all front-end pages and completed core back-end functionality. Key lessons learned include the importance of starting library building and coding sprints earlier, using Zeplin effectively, and clearly defining the MVP scope early on.