Is it possible to budget and have fun at the same time?
Following the path to financial empowerment can feel overwhelming, too rigid, and just plain not fun. The Hummings app, geared toward Millennials, helps the user with the struggle of saving for a rainy day or that coveted vacation to Thailand yet still enjoy everyday life.
My role
One of two UX/visual designers
Co-created UX concepts and prototyping
Goal
Create brand assets that are unique and sets the app apart from the other financial apps
Strike the right balance between serious financial education and fun
These assets would help the founder/product manager (client) hire additional staff and present the app to potential investors.
Process
Personas
The client had done some initial research (prior to hiring UX/visual designers). Her main goal was to see how people handled their personal finances. She eventually saw that Millennials felt differently about what it meant to spend and save, thus it was important to understand why and how that audience would navigate a financial app differently from other users.
My three roommates and I share everything–cable, phone plan, Amazon Prime, Hulu, Netflix. I guess this is the new “friends and family!”
- Erin, 26, investment analyst
I worked 100+ hour weeks in the past five years at McKinsey. I got my company to pay for business school. Yeah! Now, what am I going to do for my living expenses in the next two years?
- Jimmy, 27, business school student
Key insights from initial research
Visually, Millennials expected a certain cuteness or playfulness from app interfaces
Finding it hard to make ends meet, the audience needed more incentive to care about saving money for the future when they really needed the money right away
Competitive research
The client wanted the Hummings app to stand out from the other financial apps in the market. Upon doing competitive research, we saw that most of the apps used shades of green to exemplify money and stereotypical visuals pertaining to financial matters.
We wanted to move away from green and create a UI that would show that dealing with financial matters can also be fun and rewarding.
During competitive research, we saw that most apps used green to indicate that they are financial apps.
Brand identity
The word hummings brought to mind a hummingbird, a unique animal accomplished at collecting food and distributing energy. A tropical color theme inspired by the bird’s coloring would help Hummings stand out in a sea of green-colored apps.
We created a friendly mascot named Hummingbot who would guide users through saving and spending.
Logo with tagline
Wordmark-only logo
Hummings app icon
Color palette
Typography
Information architecture
Site map
Sketching: visual design and UI
Samples of onboarding wireframes
Reviewing wireframes with co-designer
With our first set of initial wireframes, we created a clickable low-fidelity prototype to start getting feedback before going too far.
Usability testing
A guerrilla-style usability testing was done at a cafe using a clickable, basic prototype on a mobile phone. Users were asked to complete three tasks.
Complete onboarding questions
Input information into the daily spending tracker
Moving some savings into a bigger ticket item such as a vacation
Findings
There were too many onboarding questions
People had major issues setting up funds for each category type (bills, living expenses, rainy day fund, wishlist)
With these findings in mind, we shortened the number onboarding questions and set out to improve the interaction required to allot money to different categories.
Improving the Set Budget screen, which includes the rainy day fund. Left, wireframe used during usability test; right, updated wireframe. Improvements included larger numbers, contrasting colors, and adding the info tooltips.
Additional wireframes
A very important aspect of forming a habit is to repeat the behavior everyday. I created illustrations with Hummingbot as a guide asking the user to set up a daily reminder.
Setting reminders
Hummingbot’s friendly tone of voice and affirmation upon receipt of information lets the user to know that someone cares and will reply quickly.
Ask Hummingbot help screens
Result
The visual design and wireframes enabled the founder to add staff – a developer and a copywriter. The client also used these assets in her presentations to apply for initial funding from investors.