Context

The big picture is that people are spending more than they have, the cost of living is constantly rising, some are trying to save down payments for first homes and pay off student loans simultaneously, people aren’t saving for retirement, and video games are $50 a pop.

Now to the details: According to my research, young professionals and students in their 20s and 30s generally manage their finances by logging into their bank account and seeing what the balance is. They typically don’t keep a strict budget, but think of money as inflows and outflows and keep a mental tab of how much they have. If they have to save for a bigger purchase, they come up with the amount to save and allocate money toward that goal. The one time of year they see their expenses broken down categorically may be when their credit card company sends them an annual report of their spending.

A Finabler persona crafted from user research. Click on image to view full PDF.

Approach

User research in the form of interviews, self-reporting financial diaries, and surveys gave me the background knowledge to understand how finances are handled, and what problem areas need to be addressed to make keeping track of finances easier.

A few themes emerged that I applied directly to the design of Finabler. People want to:

• Manage all financial accounts in the same place
• Track money categorically, not just chronologically
• Get help creating and sticking to budgets
• Set and meet savings goals
• See how future changes in income/expense will affect their overall budget
• Allocate money toward goals, bills, etc to better see how much money they really have to spend

Detail of a dependency diagram I used to brainstorm all the goals of Finabler and how they are related

Outcome

Finabler went through several rounds of design iterations, gathering feedback in the form of peer review, participatory design, and usability testing along the way.

During usability tests, participants successfully completed all the tasks they were given. Participants liked the encouraging voice of the application, and said it was intuitive, simple and clear. Participants indicated that they would like more information – the home page should give them at-a-glance status of their finances, budget, and goals. Mental models also came into play during usability tests, with each participant indicating how they would expect something to work, or what would be best for them, such as incremental goals for people with a less-steady cash flow.

Select Finabler wireframes – but please download the clickable PDF to experience it yourself.

This is the second iteration of the template – I made changes based on feedback we received after the template’s first quarter of use. Try out a sample course yourself here.

I developed a site architecture in collaboration with Women & Girls CAN’s Executive Director and board members, and presented wireframes to illustrate the structural blueprint of the website.

The group pointed me to a few different websites they liked, which I used for inspiration for design and color palette. We decided on the colors, and I spruced up an existing logo with a new typeface.

The website is hand-coded in HTML and CSS – for now. A wordpress version is in the works so that Women & Girls CAN will be able to update their website or add new content as they grow.

I worked collaboratively with Beyondmedia staff to develop the site architecture and developed wireframes so we could begin to visualize the contents of each page.

Chain of Change home page wireframe

Chain of Change profile page wireframe

After Contextual Inquiry sessions where we had observed our interviewee’s work flow, I would create sequence models to capture the steps to accomplish a certain activity. Two sequence model examples are below.

We presented our findings and recommendations to the project team, and I designed wireframes to communicate the new feature in all its various states.

Download a PDF of the wireframes to see more screens

Below are deliverables that I had primary ownership of for the PerShop site – I collaborated with our other HCI person on Information Architecture and wireframes, and another team member for the User Profiles.

Information Architecture

PerShop’s information architecture. (click to view full version)

General User Profile

People both new to Persian rugs and seasoned veterans

Interests: Fine Furniture and Art, Antiques, Rugs

Gender: Male or Female

Martial Status: Single, Married, Domestic Partnerships, Widowed, Divorced

Age: 29-70

Education: Some college or advanced degrees

Vocabulary: 10 Grade reading Level or Better

Computer Skills: Novice to Expert experience with Internet Explorer, Google, etc. Access to the web with a 56K or better modem, preferably DSL or cable modem

Income Range: $60K+

Physical Constraints: Not a issue

User Scenarios

John and Jean Smart are newly married yuppies living on the north side of Chicago. Jean is a Lawyer and John is a doctor. They have an affinity for the finer things in life. They have an interest in antiques and fine furniture. Their combined income is well over 150K and their free time is very limited. They recently moved into a new townhouse in Lincoln Park and would like to purchase a Persian rug.

They recently purchased and new PC for their home and it has a quick DSL connection, so perusing the web is not a problem. Their favorite search engine is Google. They on average spend about twenty minutes online at a time. Mary is sort of a worry wart, she requires a site that has been hacker tested and a nationally know credit card verification system.

They have spent some time looking for a Persian rugs in brick and mortar retailers, but as of yet have not found a rug they liked, so they decided to take their search online. The dimensions of the rug they want are roughly 5 X 8 feet. They are not sure for what to look for in a new rug so they need to be educated on the options in purchasing a Persian rug. During a Google search, they find PerShop.com and find a whole educational section on what to look for in new and Old Persian rugs in respect to style, construction and age. Jean is the boss of the family finds that the new flat-weave traditional rug was to her liking. So she went into the traditional new Persian rug dropdown and selected the 5 X 8 foot rug that she desired. She paid for the rug and had her shipping insured. She spent twenty minutes online.

Roy Lane is a single male bachelor with quite a Persian rug collection already. He is in the market to get his mother a Persian rug for her 65th birthday because she has always admired his collection. He is an appraiser at an auction house, so he already has a good idea of what he is looking for. Cost is not a factor in his purchase.

He has a new laptop and he uses it home and away on trips. His home has a wireless network, so perusing the web is not a problem. He often uses Google to find antique deals on the internet. After many successful online transactions, his concerns about online security have been allayed, however he still prefers to buy from retailers with a professional web presence and a design sensibility that he feels he can trust.

Roy knows that his mother’s house can accept an 8X10 foot rug. Through Google he found a new site PerShop.com that stocks a large inventory of antique rugs from a variety of regions. Roy is able to search for rugs by region, style, size or color, and decides to look at what is available in the Khorassan region, as he has always admired their rugs. Jerry spends about an hour poring over the different rugs and reading their descriptions, including where they were acquired and their weave type and condition. He eventually settles on a dark, lush colored rug with an incredibly detailed floral pattern. Roy is assisted in his decision by information on screen linking to specifics about carpet maintainability and weave strength, and he bookmarks this information to eventually send his mother. Roy is able to insure his purchase and send immediately to his mother’s house for her birthday. His task took about an hour and a half.

Wireframes

PerShop wireframes – Home page, and Shopping Cart. View all the wireframes here (PDF).

Prototype

View the prototype site here. I programmed the front-end HTML and CSS, and my classmate served as visual designer. The back-end integration is not included in this version.