Milkbone Underwear — Case Study

UX/UI Design

This case study documents my last community partner project during my time in the full-time UX Design Professional Program at RED Academy. Our team was tasked with designing the first prototype of a financial literacy platform that would complement a non-fiction book targeted for millennials.
Project Timeline | 3 Weeks

Brief

0.1 — The Challenge

Our client is in the early stages of exploring a financial literacy platform that will help millennials learn about the world of personal finances and take control of their financial future (instead of hide from it). The plan is to pair a fun and humours yet informative, non-fiction book will a digital experience that adds value for readers and also acts as stand alone resource that can cross promote book sales. Our challenge was to create the prototype for this digital experience.

0.2— The Team

Our team consisted of 3 UX designers all taking the User Experience Design Professional Program at Red Academy. We worked together on all aspects of the project. I took the lead on facilitating our planning and white boarding sessions and building out the digital wireframes.

0.4 — Planning, Timeline & Process

After the kickoff client meeting. We met as a team to discus our first thoughts, talk about scope and map out our timeline and process. We had a 3 week turnaround for this project. First we outlined each week long sprint of our project.

  • Week 1 — Research (Scoping, CC analysis, User Interviews & Analysis)
  • Week 2a — Planning (Personas, Scenarios, User Flow, Ideation)
  • Week 2b — Paper Prototyping (Nav, Feature & User Flow Testing)
  • Week 3 — Mid+ Fidelity Prototype (Copy, UI, & Value Testing)

0.5 — First Thoughts & Scope Questions

The biggest hurdle that came up right away was the size, open endless of the project and the fact that we had zero content to work with. The book hadn’t actually been written yet so we were really just working on an idea, a value proposition that hand’t been tested yet. After reading the brief alone we weren't quite clear on exactly what the client wanted us to build. We spent a good chunk of the meeting trying to pin this down, but it seemed like he didn’t really know yet either.

This provided an interesting question. When working for a client on a new project that is still an invalidated idea, where do we start our UX process from? Do we take the clients idea at value (he is the client after all) and start UX-ing and testing how we can make the best version of this idea. Or do we back up to the beginning and first try to validate our clients value proposition hypothesis, the idea itself. Where does the role of UX designer end and roll of Lean business consultant start!

0.6 — Defining Project Scope

We set up a follow up meeting and concluded that our job was to both explore the value prop hypothesis and come up with a more fleshed out idea of out what the project could be. We would the develop a high level prototype of this idea that he could use as proof of concept to learn more about the project and use to pitch the book & digital experience platform to investors. Because we of course didn’t yet have complex questions and algorithms to determine a users financial personality, or examples of the advice we would be giving them we would build a prototype of how the experience work with dummy questions. We would however explore a few ideas of what the content could look and feel like.

0.7 — Clarifying Client Goals

We concluded that one of the core aspects of the project is the idea that people have different financial personalities. The digital experience would be anchored around helping readers discover their financial personality, and furthermore give them tailored resources and tips to help them achieve their financial goals. The Project Goals Would be as follows:

  • Provide additional value for readers of the book
  • Be a stand alone resource for financial literacy
  • Cross promote sales of the non-fiction book
  • Ask a series of questions to determine a users financial personality
  • Offer helpful information and advice tailored for that users needs
  • Make financial literacy fun and appealing to millennials
  • Make sure the product is also suitable for people of all ages

1.1 — Competitive Comparative Analysis

We researched a number of competitors and websites that overlapped with our product in different ways. We looked at branding ideas from websites like Wealth Simple and LearnVest for industry context. Since these sites are product marketing pages as opposed to a content based resources like us we used them to look at branding and tone but not structure. Next we identified direct competitors in terms of value proposition. We explored Richdad Poor Dad, The wealthy barber, and Young and Thrifty book and website. Young and thrifty is the only direct competitor we identified in terms of book, web resource and target audience. We looked at the CRA, IRA, Banking website(s) to get a better understanding of content Information Architecture strategy. Then we explored popular millennial content websites like Vice, Ny Times and Buzzfeed for common content layouts, flows, elements and content styles that our target audience is familiar with. Lastly we explored quiz websites like ____ and especially 16 personalities for strategies to funnel users into the quiz, when and how to ask for personal information and account creation and site structure for tailored content once users have taken the quiz.

1.2 — User Interviews & Data Analysis

All interviewees want to be more financially literate than they are, and are a bit embarrassed or ashamed of there current state of knowledge. All interviewees had a real desire to actively plan for the future. They know they should be and really want to but most currently aren’t doing anything about it. The goals of users to get a good paying job, save for retirement invest in their future were all pretty much universal. The motivation was clearly there but for the vast majority it wasn’t enough to over come the battlefield of real and perceived barriers to getting 
started. Key worries and barriers that came up again and again were

Affinity Diagram

Pain Points & Barriers

  • Being overwhelmed and intimidated, not knowing how to start, or where to look
  • The content is so boring they couldn’t stay focused or worried they wouldn’t be able to
  • Assume that the content will be too hard to understand
  • Personal perceptions that they are inherently bad with money and aren’t able to plan or save
  • Worries about who to trust and how to find legitimate information

Wants & Needs

  • Easy to understand
  • Fun
  • Not boring
  • Credible and trust worthy

1.3 — User Persona

We created a user persona from our interview research to help us identify who we are designer for, so we can align our strategies ad goals as we work through each design challenge.
[User Flow Image Goes Here]

2.2 — Scenario

We used written Scenarios and walked user stories outloud to better understand the users problems and how they would use our tool.

2.4 — User Flow

After reviewing and discussing the information we learned from the interviews we mapped out different versions of how imagined our website to work.
[User Flow Image Goes Here]

2.5 — Core Solutions and Features

Words go here

The key value proposition of the website is to help millennials become financially literate and help them take the first ste. a resource of fun, helpful easy to understand easy to find personal finance information and advice.
financialy literate

Fun
because these address our users core needs and pain points. The website will be the bridge that our users can use to get over the barriers they identified. We want the website to feel like a light and fun buzffeed / vice style content website. The article titles and writing style should reflect a very personal light and “real’ feel.

3.1 — Paper Prototyping

After outlining the core elements, features and user flows of the experience we created rough paper wireframes for all necessary screens. We each worked on differnt aspects of the flow

In human–computer interaction, paper prototyping is a widely used method in the user-centered design process, a process that helps developers to create software that meets the user’s expectations and needs — in this case, especially for designing and testing user interfaces. It is throwaway prototyping and involves creating rough, even hand-sketched, drawings of an interface to use as prototypes, or models, of a design. While paper prototyping seems simple, this method of usability testing can provide a great deal of useful feedback which will result in the design of better products. This is supported by many usability professionals.

Paper Prototyping

3.2— Mid Fidelity Testing

3.3 — High Fidelity

(Homepage)

1 Logo & Name — The name “Milkebone Underwear” proved to be a sticky challenges throughout testing. Less than about 20% of our interviewers and testers drew the cheers reference. Most took it as a cue that this was either an underwear brand or a pet service. Because the client wants to focus on a millennial audience part of our feedback from testing was to do more research on the name choice it’s self. However assuming the name would stick we added coins to the logo which helped prime more users that this was a website about money.

2 Primary Nav — We used a two part nav pattern referenced from buzzfeed to separate the 4 topic sections (budgeting, taxes, debt, investing) loud and clear on top of the website. First we wanted them to easily accessible for quick reference and reaffirm that the websites primary function is an information resources. Additionally because we are working with a unique name, we wanted to help users clearly understand that this is a financial resource, by having these financial words front and centre on the site.

3 SubNav — When reading from left to right “Take the quiz” is the first thing the reader sees. This is the core CTA of the website which is why the reader sees it first when exploring the sub nav. Next the reader sees “the book” which adds credibility to the website if they are not familiar with the brand , or reminds them that the authors of this website also wrote an entire book that they should think about buying. The community page follows and about us is last so its second easiest to easy to find for new comers looking for validation or answers about what this website is.

4a Hero Image — Is an opportunity to position the young brand and fun laid-back feel of the website.

4b Hero Text — The top line stamps the value proposition of the website with as few words and as simple language as possible. “Finally” is reaffirms the layed-back young voice of the website.

5 Personality Type, Characters— The use of multiple unique characters cues the users to understand the idea of various financial personalities.

6 CTA Copy — Pitches the value proposition, users will gain by taking the quiz and why they should do it.

7 Reading Lists— is located immediately under the value prop and CTA cues readers that this is a content website. The common blog preview gallery reaffirms this and is referenced form major content sites used by are users such as Vice, Buzzfeed & New York Times.

8 Start Here “Reading List” — is the very first curated reading list and is created specifically to hand hold users through the very first barrier of ‘not knowing where to start’ and ‘feeling overwhelmed’. The goal of this reading list is to get users from 0–1, help them understand the first layer of jargon and how the world of personal finance fits together.

9 Article Images — Are humours, light, utilize bright colours, pop culture references and animals where possible. This is a cope aspect of the brand and website and major feature that sets it far away from the boring stock images of banks and other financial websites.

10 Article Titles — Are the the real voice of this website. Where ever possible titles are humours or use conversation language, the exact language someone might ask their friend or wonder to them self in their own head. This reinforces the casual, friendly and unscary nature of the website, that is core to our users’ needs.

(Members Area)

11 Signup Gate — Words go here

12 Personality Type Dashboard— Words go here

13 Learning Progress Dashboard— Words go here / Untested

14 Financial Personality Break Down— Words go here / Untested

15 Reading Lists— Words go here

16 Reading List Articles— Words go here

15 Article — Words go here

16 Hamburger Menu— Words go here

Reflection

Words go here

Prototype

Show your support

Clapping shows how much you appreciated Robert Morton’s story.