Splitwise App Mock Redesign

Redesigning the Splitwise App on a Small Scale

Problem: How can I make it easier for users to navigate the Splitwise app and add their expenses?
As a personal project, I decided to redesign some of the Splitwise app screens—focusing on the navigation and the UI for adding expenses. As an added bonus, I used InVision Studio for the first time to implement my designs.

Splitwise Redesign Project

Splitwise is a mobile app that allows users to total expenses between friends and automatically transfer payments. Though this app is very useful, I found issue with its usability and design. I used it for the first time a month ago for a friend's birthday trip and it definitely made it easier to split expenses within the group; however, I struggled with understanding exactly how to use the app. Therefore, I thought this would be an ideal mock project to further my app UX/UI design experience.

To begin the process, I had a friend explore the Splitwise app (on an Android device) and had a set of questions for them as they did so. Some of the questions pertained to the navigation and others to the "add expense" screen. My friend offered the following feedback:

"When I clicked the home button, nothing happened—I was on the same page I was before. It was weird. The expense screen was very overwhelming. I didn't know what options were required."

After receiving my friend's feedback, I began to sketch out some new designs for the app. One of the major issues I felt that needed to be addressed was the navigation. Splitwise technically doesn't have a "home" screen. Instead, when a user opens up the navigation and clicks on "home", the navigation is simply minimized and the user is on the same screen as before opening the navigation panel.

Splitwise Sketches

Splitwise Wireframes

In order to solve the navigation issue, I decided to create an actual "home" screen that would replace the current "activity" screen for the user and allow them to see all current expenses. This simplified the navigation and gave the "home" call-to-action in the menu navigation more of a purpose.

Splitwise Comparison Side-by-Side

Another issue that was addressed in my small scale usability test concerned the "add expense" screen. Even the opening animation for the screen seemed a little overwhelming. When I first clicked on the button to add an expense, I thought the app crashed because the animation was so jarring.

Therefore, not only did I redesign the UI for this particular screen, but I also created a new micro-animation that softened the transition between the "add expense" screen and the rest of the app. Rather than have the "add expense" information open up in a diconnected new screen, my proposed design expands a bottom sheet to display that same information. This keeps that information more connected to the app experience by allowing visibility to the rest of the app behind a slight overlay.

Current Splitwise Animation

Proposed Splitwise Animation

After I redesigned some of the Splitwise screens, I had my friend walk through a simple prototype and provide new feedback.

"I feel like it’s easier to add an expense now because everything is on its own line and I like that there is now a home screen because you have a nice, easy-to-follow overview of what people owe you and what you owe."