Designing a complete mobile app, design system, and user experience
We designed an app that helps you track your travel expenses and split any payments with friends. Keep track of who owes what, how much you've paid for different categories, and make payments directly in the app.
Platforms
Figma, Webflow
Data With a View
We began by defining the relation between data points, what inputs are necessary, and how data is stored was an important step in setting up the conceptual foundation of the user interface. This provided a way to put a view on the data, which streamlined the product requirements and clearly outlined the organization of the app.
Designing the Interface
Mapping out the database schema defines different ways the product is organized. For example, the Trips table lists each trip record that expenses are linked with. When considering the layout of the user interface, Trips is represented as its own section. A trip also needs to be created first, in order for expenses to then be linked. This also outlines some of the initial user flows for creating new records.
.gif)
Interactions & Prototype
We started this project with the trips page, representing all of the data points available for that page. These included: the trip name, description, location, category tags, the dates, the expense total, which profiles were tagged on that trip (who was included on the trip), and the paid status (paid or not paid).
Once the framework of the design was in place, new features were incorporated into the concept. These included liking posts, uploading photos, comments, and exporting posts.
Interactions were carefully chosen based on the visual input from the user interface. Pages that push in from the right side can be closed by swiping from the left side, tabs pan the corresponding way, fly up menus close down, etc. More importantly are the sections that open as an overlay versus a view reload. If a user closes an overlay the previous section is still visible, uninterrupted. This can be especially beneficial in scenarios where the user needs to engage a creation flow (like creating a new category), without needing to change the view.
.png)
.png)
More of our favorite projects
These are some of our favorite projects across industries, products, and disciplines. We love celebrating the results of our work with our collaborators!
Let's chat
We have worked with all kinds of industries and companies to develop better digital products, services, and brands that set them apart from their competition.
Contact Us