Chi Wai Lima | UX designer
hummings cover.jpg

Hummings

Brand identity, UX and visual design for a financial app

 
 

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.

icon woman ponytails.png

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

icon man hipster.png

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

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

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.