Personal Expenses Tracking App
The founder approached us with user feedback from the past 2 years, usage data and a product roadmap for the next year.
- 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
- Increase retention rates after users sign up
- Lay the foundation for expansion of premium features
- 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
ProcessMy 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
- Stakeholder meetings and Product understanding
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.
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.
The home screen was redesigned keeping the current users in mind while also adhering to the new IA.
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.
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
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.
The app can found here: https://itunes.apple.com/us/app/wally-next/id1178011327?mt=8&
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.
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.