Ian Crasta
Sr. UX Design Consultant
Made with

Personal Expenses Tracking App

Wally Next

Introduction

Project Background

Wally Next is a personal finance and budgeting app with over 1.7 million registered users. What began as a nifty finance tracking tool in 2012, over the years, started to become confusing as the functionality grew, which resulted in decreased user retention.
The founder approached us with user feedback from the past 2 years, usage data and a product roadmap for the next year.


Project Goals

  • Understand the issues faced by new and existing users while using the app
  • Reorganising the architecture of the app to make it coherent for easy navigation and exploration
  • Designing the experience with the use of established UX patters on the platform aiming towards recognition rather than recall
  • Redesigning the visual language of the brand keeping usability in mind

Business Goals

  • Increase retention rates after users sign up
  • Lay the foundation for expansion of premium features

Project Plan

Team

  • 1 Lead UX Designer (Myself)
  • 1 Junior UX Designer
  • 1 Visual Designer/Illustrator

My Key Responsibilities

  • Product strategy
  • User feedback analysis
  • MVP definition
  • Primary wireframes
  • Visual design coordination
  • Project management
  • Developer handoffs

Design Tools

  • Sketch
  • Invision

Process

My process varies across projects and is determined by factors such as the goals of the project, the business needs, the problem that is to be solved, project time, etc.
For this project, I used the following process
  1. Stakeholder meetings and Product understanding
  2. Design
  3. Delivery

Product Discovery

Stakeholder Meetings

We had meetings with the founder to understand the product in its entirety and the issues faced by the users. After having detailed discussions with him, it became clear that there were a lot of features which seemed hidden due to poor design. He also had a compilation of all the user feedback received over the years. Thus his involvement became vital to the success of the redesign project.

In the interest of time, we decided to work on a feature basis e.g. transaction input, a feature, was worked on individually. At the start of a new feature, we would have a detailed discussion with the founder again during which we would go in-dept to understand all of the current and upcoming additions to that feature.

Design

Personal Expenses Tracking App

Wireframes

After we redesigned the architecture of the app, we worked on medium fidelity wireframes based on the priority of features. These wireframes would be reviewed, iterated on and then finalised before going to the visual designer. Below are a few highlights of the wireframing process.


Home Screen

The home screen was redesigned keeping the current users in mind while also adhering to the new IA.

Personal Expenses Tracking App

Add Transaction

We designed a bottom-sheet pattern that could be used in multiple scenarios such as changing the category, business, currency, etc.. The bottom-sheet would function as an overlay when invoked, and would expand to an advanced view when dragged upwards.

We used such an approach to enable users to make the editing of Add Transaction suggestions as swift as possible.

Personal Expenses Tracking App

Create lists, reminders, notes, etc.

Again, a flexible design pattern was created for adding items such as lists, notes, reminders and attachments. We were able to do this by using the Atomic Design methodology

Personal Expenses Tracking App

Visual Design

Our requirement for the visual design of the app was to ensure great usability especially for new users while maintaining the previously used brand colours and use of icons. We also worked on making the app visually fun and friendly through illustrations.

I was responsible for ensuring that the UX thought process and interaction concepts were captured completely by the Visual Designer.

Delivery

Team Syncing

I was involved in ensuring that all design queries from the development team were addressed at the earliest in order to meet deadlines.

Assets, screens and style guides were shared through Invision.

Project Learnings

This was a very fast paced project. In terms of subscribers to the app, this was the largest I had worked on. I had to be cautious in making changes in design that could adversely affect existing users.