COLAB23 PORTFOLIO

Expense Buddy

A user-friendly web app designed to simplify the task of recording and managing business-related travel and vehicle expenses for self-employed individuals and business owners. By addressing the challenges of meticulous record-keeping and documentation, our product aims to streamline the process and help users maximize their tax deductions while reducing the risk of rejection during government audits.

Product Experience

Problem Space 

Problem Background  

Self-employed individuals and business owners who depend on their vehicles for work face a critical financial challenge when it comes to deducting car-related expenses from their taxable income. Accurate determination of the portion of vehicle usage attributable to business activities is a prerequisite for claiming these deductions. Currently, this requires meticulous record-keeping of business-related mileage and comprehensive documentation of vehicle costs. Failure to maintain proper records could result in the rejection of expense claims during government audits. The urgency of this issue is highlighted by the growing number of individuals transitioning into full-time delivery drivers or ride-hailing service providers post-pandemic. For example, Uber, the largest ride sharing company in the United States, has experienced a 31% increase in drivers, reaching a record five million global drivers.

Research Insights

Our team, composed of Project Manager Ryan and Designer Connie, conducted user interviews to gain insights into individual needs and the barriers faced in tracking car-related expenses. We decided to develop a web application instead of an iOS app due to the time and cost associated with publishing an app on the Apple Store. With a tight deadline of under 8 weeks for the MVP, our goal is to expedite essential feature deployment and gather user feedback through the web application/prototype before proceeding with the Apple Store submission.

Key themes and findings

  • Ambiguity about whether a trip is a personal or business expense leads to inaccuracies and potential government audits.
  • Users primarily rely on the standard mileage method but are unaware of which method (Standard mileage or actual expense) suits their needs best. Understanding how to maximize tax benefits would be motivating.
  • The current methods of compiling a logbook by cross-referencing receipts, bank statements, emails, and calendars are time-consuming and avoided by users while on the job.

Competitor Analysis 

We conducted a competitor analysis to understand how mileage apps are currently addressing this problem space. We explored competitor apps in detail and identified two main pitfalls to avoid in our solution:

  1. Tedious manual input: We aim to make information input as fast and simple as possible, considering that users are often on the go.
  2. Information overload: Competitor apps like TripLog, Everlance, and Hurdlr have been reported to have a learning curve with non-intuitive UI and an abundance of features that attempt to cater to every type of 1099 worker. Not all 1099 workers have the same tax needs, and the target audience is unclear upon sign-up.

Key takeaway: While automatic trip tracking sounds promising in theory, it can be error-prone in practice. All four competitors have automatic mileage tracking features, but users have reported bugs, such as mileage being out of sync and the Autostart feature not always working.

Solution Explanation

Landing on a Solution through Ideation and Design

After several rounds of ideation and prioritization, we have outlined four main flows for the MVP:

  1.  Manual input of trips, allowing users to classify them as business or personal.
  2. Odometer readings for personal trips, enabling users to maintain complete mileage records.
  3. Manual input of expenses, with a simple interface for entering amount, name, and category, aiding users in identifying tax-deductible expenses.
  4. Generating reports for users to receive a high-level overview of mileage and expenses. Detailed reports can be sent to their email and shared with their accountant.

Pivoting and de-scoping

Due to time constraints, we decided to streamline the project scope, focusing on the addition and review of trips. The primary goal for the MVP is to address the most significant user pain points, creating a platform for users to accurately document trip mileage and purposes.

Lofi & Hifi Mockups

Lofi Mockup
High Fi Mockups 

Iterative Design Learnings

We conducted usability tests with five target users who navigated all three flows. All users completed the tasks, resulting in a 100% completion rate. All 5 users rated the "Add Trip" and "Add Expense" flows as very easy to use.

Iterations

3/5 users expressed confusion about the preselected date and time on the “All Trips” Page and wanted to make sure that the date and time could be edited, assuming that they would record the trip later. It wasn’t clear that the date and time were changeable. To resolve this, Connie iterated the date and time picker to be interactive in appearance, providing a visual cue that users can modify the date and time, especially because users tend to record mileage later. 

In the later stages of the project, we could continue usability testing after the first round of iterations is completed. 

Implementation Details

Technical implementation

Where is it hosted? 

  • Frontend on Netlify
  • Backend on Render
  • Database on ElephantSQL
  • Source Code on colab’s Github 

What is your tech stack?

  • React, JavaScript on the Frontend
  • Flask, Python on the Backend
  • SQLAlchemy, SQL for the Database

Technical challenges

What was the hardest part of development?

  • The Google API places suggestions and map routing 

Does your app have any scaling issues?

  • Our app also needs to be implemented into a mobile application

Future Steps

We intend to proceed with the project following the conclusion of the bootcamp. There remain 3-4 pivotal features yet to be developed to effectively address the users' concerns and improve their experience. Because the “Add Expense” and “Email Report” flow has already been designed and tested, our next steps will be to build out these features. 

Learnings

Product Manager Learnings:

Ryan Ngai

Learning to Focus

We all have great ideas, but when building a product, we need to concentrate on the most important issues due to time and budget constraints. Our goal is to create a successful MVP by tackling the biggest problem first.

Keeping It Simple

While looking at similar products on the market, we noticed that having too many features can make it harder to solve customers' main problems. We want to learn how to make our product simpler and still effective.

Better Team Communication

Every team member has their own way of working. We want to make sure we all agree on how to do things. Even when we face challenges, we aim to talk things out as a team and make decisions together. We also managed to coordinate meetings across different time zones.

Designer Learnings:

Connie Nguy

There’s a lot of overlap between the roles of product designers and PMs.

PMs and designers work closely to ensure that product strategy aligns with user-centered design, and design decisions align with product goals. I’m grateful to have gained experience descoping the MVP with our PM to meet our tight deadline.

You can get valuable dev feedback without a handoff-ready product.

I’ve learned the importance of collaborating early and often with our developers as they could clear up any questions I had in the low and mid-fidelity wireframe stages. I’ve learned that I don’t need to wait to show my work - it’s better to have more 15-minute quick calls to clear up questions rather than designing for long periods, and passing off all flows at once. In the future, I plan to involve developers early on in the design process.

As designers, we don’t need to know how to build it ourselves, but we need to meet our developers halfway

Even though DevMode in Figma is great, they don't tell our devs everything they need to know about our designs. For example, designers must communicate what a card would look like if a name is longer than the text used in the design. Dev tools are important, but so much more goes into a solid, collaborative environment between designers and developers.

Developer Learnings:

Krishna Patel

Figma’s DevMode is very helpful with providing CSS layouts and styles, but it’s not as easy as copy-pasting.

Especially applying styled-components as how to design reusable components, the DevMode provides the style and layout of the element, 

Blockers are usually discussed during the planning stages and they’re often difficult to identify very early.

Unless you are an experienced developer, you just don’t know what to anticipate what is not going to work during development.

Backend training (Personal learning)

I’m surprised I enjoyed building the backend of this project, even though the focus of this learning program is for me to hone my frontend skills. Perhaps I should widen my job search and apply for full stack engineering roles, as well.

Developers Learnings:

Gian Carlo Torres

&

Meeting Tight Deadlines: The Role of Trello Tickets

When you are sticking to a tight deadline, it is easy to bite off more than you can chew. It is hard to estimate how long something takes to program. Sometimes something really difficult gets done in an hour and something easy takes much longer than expected. Trello tickets helped keep us on track with follow-ups with the PM.

Figma's Design Benefits and AI Constraints

Figma's real-time collaboration platform makes it easy to access design files which is really helpful for removing the thinking when it comes to colors, active states, etc. However, I do find that Figma's AI generating capabilities, while useful for basic interactions, can be limited for more complex web interactions, requiring additional tools and development work to bring the vision to life.

Full Team Learning