My Role
Art Direction, Visual Designer, User Experience Designer
Tools Used
Invisionapp.com, Adobe Photoshop, Adobe Illustrator
The Problem
SavvyMoney needed a redesign of their existing product, SavvyMoney Pro. The redesign consisted of 1) simplifying the user experience to make it easier for user to use; 2) create a v1 version of the product that would developed upon a Bootstrap CSS framework that would be extensible to a responsive design for v1.1. and 3) create a visually stimulating visual design utiliizing a Flat UI design and photographic background images that would reflect modern design trends and compete with competitor products..
Process
In this project I served multiple roles: product manager defining requirements; user experience lead leading the UX and usabilty; and visual designer, doing all of the visual design for the application. I lead brainstorming sessions with the CEO and VP of Product and defined the requirements; design concepts, and led discussions around the concepts. To quickly iterate and get feedback from stakeholders and developers, I used rapid prototyping and created an interactive Invision prototype (invisionapp.com) to gather feedback and generate documentation from the comments via PDF export, rather than creating wireframes in Omnigraffle and a UX specification, and then visual design mockups.
The Design
Add Accounts
The user goes to add a debt account to SavvyMoney Pro.
A list of accounts appears that can automatically be added. The accounts appear due to integration of Yodlee as the backend account aggregator.
The user enters a search term and returns accounts they can add that match that search term.
The user selects an account and signs into the financial institution.
The account is added. There is latency as the financial data is sucked down through the feed. The progress bar is animated and shows the progress as accounts are added. The user can go ahead and add other accounts or move onto the next section.
Multiple accounts are added to the account page.
Goals
The next step the user specified their financial goal.
Create Financial Plan
The user then created their financial plan.
Compare Plans
The user could create a single plan or compare a plan.
Review Plan
The user would then review their plan and go on to the application dashboard.
Before the Redesign
Below are the prior SavvyMoney Pro visual designs. Stuck in 2005. Done in 2011.
