My Budget+ is a personal finance and budgeting app designed for iOS.
THE CHALLENGE
I was asked to direct a team of designers and programmers, to build a simple, but comprehensive money management tool, that is effortless and easy to use. The app will track the users money usage, create budgets and calculate net worth, all in one place.
I was charged with constructing a UI that was intuitive and non-threatening. The app needs to be easy to navigate and use by anyone, no matter their financial understanding, with a clean and progressive design.
RESEARCH & PLAN
User Research - We conducted thorough user research to created the right user experience, which meant having complete understanding what the user wanted from a money management tool. After initial interviews with financial planners and ordinary app users alike, I determined that most users were looking for a tool that took the guess work out of tracking their money, and they wanted a simple fill in the blanks format that summaries their finances automatically.
Competitive Research - I, with my team, researched the top money management tools found in the app store and on the web and determined that most only focused on one area or another. They either tracking finances or managed budgets, but there was no comprehensive app that did everything well.
Analysis and Plan - From the research it was clear that this budget app would be very extensive, with many interconnected components and multiple facets to consider and incorporated.
I devised a detailed project plan and had several meeting to work out all discrepancies and questions before proceeding to the initial design preparations.
PREPARE FOR DESIGN
Information Architecture & User Flow - based on our research we devised and constructed a few user flow charts and came to consensus on a final user-flow.
Wireframe - from the final user flow we started sketching out our initial designs to ensure we were on the right path before, building the initial wireframing and prototype of the budget app.
DESIGN
Using the wireframe prototype and keeping the user research in mind, we started the final visual design using Adobe Illustrator. We selected a simple, white and green interface, with large icons and a condensed sans serif typography for easy readability.
Also, during the visual design we referenced similar features from other apps and web platforms, exploring their feasibility and function before finalizing our design.
FINAL DESIGN ANALYSIS
We finished the process by testing and reviewing the prototyped budget app with real users and programmers to pin-point any final issues and discrepancies prior to development.
FINAL IMPROVEMENTS & REVISIONS
Our final analysis concluded that our inclusive on-boarding experience was well received among users, but user wanted additional reminders and instruction the first few time in the app to learn the many different features available in the app. So, we needed to design a simple but clever solution of strategically placed messages, that periodically appeared throughout the app to explain the many helpful features available to them in the app.