Financial Literacy Web & Mobile Prototype – UX Case Study

Role: UI Designer, UX Strategist

This case study documents my a 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


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 endedness 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 hadn’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 Client 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

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 online quiz experiences like BuzzFeed quizzes and a personality type resource website called 16personalities for strategies on: how 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.

2.1 — Scenario

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

2.2— Deciding on Design Strategies

We discussed the known problems and ideas and examples of effective solutions and strategies from the research and outlined a set of design strategies to guide the process.

  • Making the entire experience as light and fun as possible to offset the dread associated with the subject matter. Use humour if possible
  • Making the everything as simple as possible counteract the overwhelm of the subject matter.
  • Mirror the effective youthful, and informal voice and charm of other millennial content based websites such as Vice news and Buzzfeed.
  • Deliver bite sized free information on financial literacy in a language our audience understand. This becomes the value proposition and reason for visiting and returning to the website.
  • The website provides a place to interact with concepts from the book and developing a deeper relationship with the brand as well as the ability to share ideas from the book digitally with friends, further marketing the book.
  • Consider quizzes, progress measures and gamification to organize how users digest the content on the site rather than randomly viewing articles. Use and leverage sense of accomplishment to drive further action, and showcase unread content.
  • The website is a ‘freemium’ style marketing tool for the book. Users discover the website, find the information helpful and become inspired to read the whole book.

2.3 Deciding on a Features list

We discussed and teased out possible solutions and narrowed the following potential feature list to solve the problems and goals of our client and users.

  • Tagged and Categorized Blog Articles as the key unit and organization of digestible information.
  • Financial Personality type Quiz & Information set to give immediate personalized value to users and facilitate buy-in and on-boarding to the platform
  • Grouped & Curated Blog Information based on the User’s money personality, related to learning about their finances in various formats — blogs, inspiring/educational tips, photos, links to magazines, podcasts, videos, peer/celebrity advice, etc.

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.

3.1 — Paper Prototyping & Low Fidelity Wire Frames

After outlining the core strategies, features and user flows of the experience we created rough paper wireframes for all necessary screens to begin quickly teasing and testing out how the user flow would be idealized in screens.

As we tested the paper prototypes to narrow down what the screens would need to do what and how they would be displayed, we move to low fidelity grey scale wireframes on sketch.

Lastly we added minimal UI and design elements to communicate as simple feeling of the brand and tone we imagine for the project to be as effective as possible.

Paper Prototyping

3.2 — Desktop Homepage: Mid Fidelity UX Prototype

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.

3.3 — Mobile Members Area: Mid Fidelity UX Prototype

11 Signup Gate — When users click the “start quiz cta” they are graced with a simple sign up gate.

12 Personality Type Dashboard— After completing the quiz, users meet their financial personality type with a profile outlining their tendencies as well as reading list curated for that personality type.

13 Learning Progress Dashboard— Users can track their progress to organize their learning and leverage sense of accomplishment to motivate further reading

14 Financial Personality Break Down— This portion of the financial personality profile visualizes financial personality traits.

15 Reading Lists— organize and sort blog articles into helpful bit-sized lists. Like a todo list the reading lists organize and simplify a path and place to start reducing overwhelm and anxiety.

16 Reading List Articles— We used depth and sunk drawers to visually demonstrate how the articles are connect to the themed reading list.

15 Article — Articles use a familiar blog format and intentionally cute and humours titles as well as clear headings throughout the content to make skimming and referencing easy.

16 Hamburger Menu— A simple side nav affords an opportunity to inject fun and colour into the experiences by way of the brand gradient


Client Goals Met

  • 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

Update — Strategy Validation in 2019

In 2019 Wealth Simple, the financial planning service has used a similar strategy to add value to the website and drive potential customers through value creation using helpful content with friendly millennial style blog titles just like we proposed in March 2017!


Leave a Reply