Case Study — Milkbone Underwear

IT’S A DOG EAT DOG WORLD!

UX & UI Design by Maria Verdicchio — Rob Morton — Luc D’Ippolito


THE BRIEF

We met with our client to discuss the design of a financial literacy website and/or app called, ‘Milkbone Underwear’.

This financial literacy platform would be useful to both Canadians and Americans, offering solutions to help maximize their savings and minimize their taxes.

It would also cross-promote a non-fiction book currently being written on the same topic.

The target demographic for the book is millennials and teens, however it would also be suitable for people of all ages.

CLIENT MUST HAVES:

  • allow a person to make an account,
  • in the form of a Quiz, offer some relatively generic questions about their specific situation (income, partner status, rent/own, expenses, debts, etc.), creating their financial personality type,
  • it compares their answers against a database of information that is created from the tax code of the U.S and Canada, as well as from a mapping of investment types,
  • from the Quiz it creates a custom, specific response for the user about ways they can restructure their finances, expenses they should claim, or investments they could make in order to improve their overall financial stability,
  • it does not save any personally identifiable information on central servers, is clear about protecting consumer rights and privacy

This information set the stage for our interview questions with our User groups of Millennials and Teens. We had three weeks to come up with a prototype and present it to our client.

One of Norm’s quotes, from CHEERS, and the premise for the name, ‘MILKBONE UNDERWEAR’ https://youtu.be/YvP1IwoJJXU

RESEARCH

We did a comparative/competitive analysis to see who offered financial advice. We looked at apps, websites and books, and compared them to each other and our goals. Some of the more popular ones we found were:

  • The Wealthy Barber & Wealthy Barber Returns— financial advice for Canadians in book form only,
  • Rich Dad Poor Dad (est. 1996) — financial education books, website with articles and blogs, board game, investment game app., offers coaching, workshops, courses, and real estate advice, U.S., U.K. and Canadian advice,
  • CRA website — has a quiz to determine your financial situation compared to0 other Canadians, but very dry and visually not a good design,
  • Youngandthrifty.ca (est. 2009) — website, book, 2 millenials from Manitoba, blog and advice, free ebook, some videos, not visually interesting,
  • Learnvest — has a quiz, gives financial advice on the phone, or pay for a plan, U.S. focus.

YoungandThrifty.ca was the closest competitor due to the type of advice they offered, they were Canadian, and their User group is Millennials.


INTERVIEWS

Luckily, we each knew alot of Teens and Millennials, so we had no problem finding potential Users to interview. The only struggle was getting them to commit to a 20 minute interview. I created an online Survey that I targeted to Millennial age friends on Facebook. This allowed for input from a wider audience from all over the world.

After our interviews we compiled our data to create an Affinity diagram.

Luc and Rob going over our Affinity diagram

A trend we found from our interviews and competitive analysis was that it varied widely on the person's life situation as to what their financial needs are. If you’re married with kids, your financial outlook is quite different than if you’ve just graduated high school or are attending University. To create something that appealed to individuals in all of these situations was going to take some creative thinking.

We started by pulling out their common values, motivations, behaviours, and needs, and what stood out was:

  • the ways they learned about finance (if they did) were varied. Online searches, friends, parents, and self help books, were most common.
  • there is a huge knowledge gap for alot of millennials around their finances — How to plan, what to do, how to invest, or save for their futures.
  • they would like resources and inspiration related to finances but don’t know where to go or who to trust to learn about managing their finances.
  • it feels like alot of work for them, which can be overwhelming.
  • the thought of taking control of their finances also seems ‘boring’, so it’s hard to get motivated to learn.
Our User’s PAIN POINTS and NEEDS

The Problem

Some of the quotes we got from our interviews:

‘It’s boring, so I’m not motivated to learn about it’
‘I don’t know where to start the process’
‘It’s another world’
‘I feel I’m bad with my money’

The Solution

To engage our Users, our product would have to be:

  • a resource that will minimize the idea that taking control of your finances is work, and eliminate the overwhelming feeling that goes with it.
  • able to assist millennials achieve the level of knowledge they need to take control of, and be comfortable with, their finances.
  • easy to use, and easy to navigate for information,
  • not perceived as too ‘pushy’,
  • a website because most people preferred it for reading and doing big tasks,
  • fun to look at and use,
  • able to offer various types of learning options,
  • free to use.

UI ELEMENTS

We met for the second time with our Client to talk to him about our research findings and recommendations. We also wanted to do a 20 Second Gut Test with him to find out his visual style.

The websites from the test that our Client chose. Out of the 22 websites we showed him, with 20 seconds to view each one and mark from one to five — five being the best.

Simplicity, Clarity, and Captivating were our Client’s impressions of the web pages he chose. We’d have to see how and if we could relate his style to our User’s. He was impressed with our initial outcomes from our research. As he came from a gaming background, he had been through alot of User testing and research in the past.


We took the 20 second Gut Test and the Affinity diagram outcomes to create a Design Inception which would guide the look and feel of our Moodboard, and our product.

UI design inception
Moodboard I created from our Design Inception and Gut Test outcomes

We needed to convey fun, inspiration, and trust, in order to keep our User’s motivated, so we incorporated some of the colors from that came out of our interviews to represent those words with— yellow, orange and blue.


SCOPE

At this point, we still had a few questions we needed to sort out to incorporate our User’s core needs, and were fighting time constraints.

How to direct Users from the book to app and vice versa?

Is it an app or a website?

To UI or not to UI?

We decided to create a mid-fi website and app, as we were unsure if we had the time to do the UI elements for hi-fi prototypes. From interviews, Users preferred a website to read articles and watch videos, and it would be easier for taking our Quiz. If we did have time, we’d create an app as well.


PLANNING

We created our User Persona to help us keep in mind who we were designing for while testing and designing.

Suzanne — our main User amalgamated from our Interviews

FEATURE LIST

Based on what we now knew about our User, our features would include:

  • a Quiz to learn their financial personality type,
  • Goals — set up with a default for the User (which can be changed). Some goals would be financial challenges based on their personality type, or learning challenges that are recommended, like articles, blogs, podcasts or videos,
  • Curated information, based on the User’s money personality, related to learning about their finances in various formats — ‘VICE’ style articles, inspiring/educational tips, photos, links to magazines, podcasts, videos, peer/celebrity advice, etc.,
  • a forum to create community (or at least a link to a Reddit forum to start),
  • A link to buy the book.

DESIGN, BUILD, TEST

Our research and UI design had taken longer that we had expected, and Rob had already started on the wireframes in Sketch, so we decided to test in mid-fi instead of paper.

It was proving a challenge to figure out how to make the language on the navigation bar sound fun so our Users would feel inspired to engage. The information architecture was proving tricky as well. We had also incorporated a secondary navigation bar with article topics.

our three different Navigation bars to test on Users

Should we place the brand name on left or in the middle?

We needed to determine our Topics via testing as well — what do our users most want to know about?

Test results:

  • In the first version (at the top), Users weren’t sure where to go first, and the font was smaller on the top navigation bar, which made them think it was less important. They didn’t understand the name, ‘Milkbone Underwear’ either.
  • In the second version (above middle) we tried to come up with fun Topic names on the secondary navigation bar, but there were issues with the amount of room, Users didn’t understand some of the terms.
  • We finally rearranged Topics to top navigation bar (see bottom version) because people didn’t know what the website at first look.
  • Users were used to seeing the name of the website on the left, so we moved it from the centre to the left.
  • We also moved title to left to not break up the Topics and to keep the section grouped together.
  • We had to figure out what to do about the name as well. Our Users were too young to have watched ‘Cheers’, and some had never heard of it.

Our next test was, how do we get people to take the quiz?

#1

Take the quiz!
it’ll take less than 10 minutes (really)
Whatever your relationship to your money we won’t judge,
it’s a dog eat dog world out there. We want to help you feel good about money by making it easy to learn how to use it. We’re not pushy — once you know your financial personality type, we’ll suggest ways you can become an expert!

#2

We want you to feel good about your money
so let us help you see how easy it is to learn how to use it!
Find out your money personality.
Take the quiz
(it’ll only take a few minutes, really)

Testing showed that people didn’t understand why they needed to take a quiz, what ‘your money personality’ was, or what the ‘personality quiz’ was.

So, we changed it again, and made the language more succinct but Users still didn’t understand exactly.

#3

Understand All Things Money
Take the personality quiz
We’ll curate a playlist of videos, articles and challenges to get you in the pilot seat.
Version #3

The three of us went back to the drawing board, and brainstormed for a few hours to come up with the look of the HOME page and navigation bars again.

Brainstorming Session

We came up with some ideas, going back to the Affinity Diagram outcomes and the results from our User testing, then went back to the mid-fi screens and re-iterated.

We wanted people to be prompted to take the quiz, so we minimized the navigation to create a hamburger style menu. When scrolling down the regular navigation bar would then drop down as a fixed header for the rest of the page.

We added a tagline to title because Milkbone Underwear didn’t make sense or relate to finance for Users.

Now when we tested with the changes, Users understood what to do, although they still questioned the name, Milkbone Underwear.

We had created mobile first, so we were now ready with both desktop and mobile mid-fi to upload to Invision. Hours before our presentation to the Client, Rob decided to add some colour and UI elements. We ended up going with the mobile version to present.


USER FLOW

Now we had a viable User flow with multiple points of entry, and Users funneling through the quiz.

USER SCENARIO

Suzanne is walking home from teaching her yoga class at the Open Door studio on Main. She needs to get back to studying for her digital design course. It’s been a challenge to not let the studying burn her out, but she’s found that her yoga classes 3 x week have helped balance it all out. And, she’s made some friends through the class who she really relates to. In fact, one of them has told her about a new book and website about personal finance for millennials, so she wants to check it out.

She still has some money saved from working full time as a yoga instructor prior to starting school, but it’s only in a chequing account at the Credit Union. If she could figure out a way to make some interest on it, and that website helps, she’d be so happy! It’s been really hard to think about saving and investing and all of that, because she knows so little. Her mom never taught her about finances, she was too busy working two jobs to support her and her brother. Her dad died when she was a teenager, but her mom was there for her and her brother. She feels lucky to have such a tight family — her little brother nicknamed them, ‘The Three Muskateers’. He watched alot of old movies as a kid — t.v. was a great babysitter.

She plans to get a full time job at a small digital agency when she’s finished her course, at least that’s the plan. She’ll start saving for a down payment on an apartment as soon as she can too, so she really needs to figure out the best way to do it. She hopes this website, Milkbone Underwear, will be able to help her!


SUMMARY

What did we achieve?

  • We created a CTA to buy the book,
  • We added CTAs after articles,
  • We suggested there be a web address within a chapter of the book in the ‘financial personality type’ chapter,
  • We created a profile dashboard page for the User,
  • We gamified the User’s progress/achievement of reading lists,
  • We created a funnel to quiz,
  • The Quiz ‘placeholder’ was created, as alot more research would be needed to actually create the questions for the quiz,
  • We created Challenges for the Users to motivate them to learn more,
  • We created article titles that had a sense of humor and related to the Users,
  • We added ‘money personalities’ in the form of characters.

What would we add if we had more time?

  • Add information and links to events like meetups,
  • Come up with a new name, which the Client agreed to after we told him our findings during testing,
  • Test and re-iterate after changes,
  • Add discounts to see financial experts talks,
  • Create competitions between other Milkbone Underwear members,
  • Start a proprietary community forum for them to connect with other Users,
  • Finish the UI elements,
  • Add foreign language translation,
  • Create google analytics, stay on top of SEO updates.

PROTOTYPE

Milkbone Underwear prototype
Show your support

Clapping shows how much you appreciated Maria Verdicchio’s story.