Skip to content

Design Overview and Tools Used

MissyM2 edited this page May 9, 2020 · 11 revisions

Design Principles

Money management is hard and emotional for consumers. We created the high-level design principles based on user research to guide the design and decision-making process for creating money tools.

  • Helpful: Break down information into bite-size pieces to make it easier for consumers to understand and apply. Give guidance that is clear and actionable.

  • Human: Use plain-language, conversational language, and a warm tone. Remain conscious of the cognitive load placed on the user, and how much the user is able to absorb.

  • Trustworthy: Design elements are consistent with CFPB design system and content represents authority and trustworthiness without patronizing.

  • Individualized: Personalize content, data, and output wherever possible.

Process

Our design process, in general, consists of four main areas. It is a highly iterative process that includes all members of our project team and the CFPB team. The goal is to come up with a solution that is robust and reflects the true needs of its future users.

Framing the problem

The goal of framing of a design problem is to formulate the problem and understand important constraints that the solution will need to satisfy. Our user research supports the problem by telling us our users are, what kind of situations and context they're living in and working in, and what their needs are in relation to the problem that the designer is trying to solve.

  • User research
  • Competitive analysis
  • Data analysis and summary

Tools: Mural

Exploring the solution space - Ideation

We generate a lot of ideas as a way to generate a high-quality solution to the problem.

  • brainstorming
  • sketching

Tools:

Finding a good solution

  • scoping
  • consideration of constraints
  • scenarios, storyboards, personas
  • design rationale

Refining the solution

  • wireframes
  • lo-fi prototypes
  • early evaluations
  • mock-ups, mid-fi prototypes
  • additional evaluations

Tools used: Figma, InDesign

Clone this wiki locally