With over 10 million downloads, Splitwise is a popular app for shared flats or travel groups to keep track of money spent together and calculate the corresponding shares of the group members. However, users often get lost in the abundance of features and have difficulties navigating through the core functions.

Objective

The app was used by all team members and considered very useful, but sometimes the user experience was frustrating, and the UI design, from our perspective, was not meeting professional standards. We decided to undertake a fundamental redesign of the app.

Understand

Analysis

Our primary aim was to obtain a comprehensive understanding of the existing app and identifying the current issues with Splitwise. Various analysis methods were applied. The SWOT analysis was used to capture the strengths, weaknesses, opportunities, and threats compared to the competition. We utilized the Kano model to analyze and categorize existing features and subsequently prioritize them for further work. Through a survey and several interviews, we were able to determine the most common use cases, which features are well-received, and when frustrations occur. The insights gained from the research were used to create two personas, which would later help us make informed design decisions.

Setting a Scope

Based on our analyses, we were able to establish the focus of our redesign. In particular, the main function of adding a new expense has been causing confusion among users due to its current complicated structure and poor design. We identified useful features that were missing and would enrich the app. On one hand, we aimed to implement recurring payments, and on the other hand, currency conversion.

Explore

In the next step, initial solutions were developed using wireframes. Special attention was given to the development of a clear navigation architecture. After many iterations, the process of adding an expense was completely restructured. In the revised version, there is a clear four-step linear process.

By using design filters, we established attributes that would have an impact on all aspects of the redesign, including information architecture, tone, and animation. We opted for the attributes of simplicity, credibility, and kindness to guide us in the subsequent screen design phase.

Materialize

We defined all characteristics of the redesign using three key screens. Subsequently, the corresponding UI was newly developed. In particular, various color variations were created to find a suitable new style that encompasses all brand identifiers. The end result reflects the original colors of the app.

A practical and flexible design system was established, enabling an efficient and consistent implementation of the app. The inherently dry financial theme is livened up through data graphics for visualizing debt balances and appropriate new animations.

Conclusion

The numerous iterations on the navigation architecture proved worthwhile, resulting in a streamlined user experience. The subsequent design phase served as a valuable exercise in building a cohesive and efficient design system in Figma.