6 weeks | independent | brand audit, feature redesign, ux/ui design
Improve the user experience by conducting a brand audit and redesigning a core feature the Splitwise App
When testing the app with new users, it was often misidentified as a platform to send money. Because Splitwise is a financial app with a user interface that's very similar to Venmo, it's easy to see how new users got confused. Additionally, this service offers many interesting and innovative features that users were not aware of because the design hides them away under icons and buttons.
Where do I go from here?
Splitwise is a financial tool for recording and dividing shared bills and payments, used to remove potential discomfort and confusion that can result from splitting shared expenses.
What's wrong with it?
First of all, what even is Splitwise?
My objective was to organize the features more clearly, and create a more exciting user experience, so users will focus more on the benefits of Splitwise and less on comparing it to their banking apps.
TLDR: People think Splitwise is a fancy Venmo - but it's not.
My goal was to move away from the Venmo resemblance by making the visual design sophisticated and lively and creating a more straightforward layout, boosting credibility and minimizing confusion.
I started by building a style guide to create consistency and maintain transparent functionality throughout the redesign. The new visual style is designed to add excitement and clarity. I used color and shape to delineate functions and make the features as clear as possible. I found Raleway to be a great typeface for Splitwise because it has a credible appearance, but also has personality that falls in line with the brand. By changing the background from white and including bright gradients, Splitwise no longer resembles Venmo or a typical banking app. Instead it now makes the more mundane process of dividing expenses vivacious and exciting.
How it looks - visual design
How it works - interaction design
The choices I made when redesigning the Splitwise "Add a Bill" feature, where made to not only differentiate it from other apps, but also to ensure clarity in the functionality.
While the labels at the top of the selection screen confirm that the user is to select either the payer or recipient, the red and green gradients here were chosen to reaffirm this action. This prevents the user from accidentally confusing the payer and recipient.
I decided to tackle redesigning the "add a bill" feature because it seemed to cause the most confusion for new users. With this feature the user divides and records shared expenses with friends.
I replaced icons with drop down buttons that let the user clearly write out their shared expense. The feature now reads like I.O.U., which is truer to the functionality of the app than the previous Venmo-like design.
I decided to utilize selection screens that slide up, so that the user can remain on the same New Bill page the entire time in order to minimize confusion and keep this function as simple as possible.
I created a confirmation micro-interaction that occurs once the user has completely filled out their bill and hits send. All of the words come together to read like an I.O.U., then the bill folds up into an envelop and sends away. This affirms that the user has completed the "Add a Bill" task while also emphasizes that what they have created is an invoice, and that they haven't sent any real money yet.
Ultimately, my design solution aimed to captivate and delight users for the few moments they engage with the app.
How it ends - motion design