As our group moves from gathering users’ needs & stakeholders ideas, and towards developing pilot projects for a Guardianship Navigator, we have been doing design work to ensure that the end-product will be usable, innovative, and successful.

On this page, please find some of our design work product, including the first-draft Prototypes of some of the navigators we are considering, our Guiding Principles about how any navigator should be designed, and a Pattern library of how other websites achieve the same functions that our navigator will perform.


As part of the design process, we are making rough-and-ready first drafts for the Guardianship Navigator products our stakeholders have requested. Please find our mock-ups, sketches, and drafts — they are meant to get feedback, and are not final versions.

Our human-centered design approach means that as we develop our Guardianship Navigator platform & tools, we put the users of these products first. Based on our user research & our design training, we have created a set of Guiding Principles that will guide all of our design and development work.


  1. Discover Your Users: Do research and collect data about who will be using your site. Build personas — fictional composites of your most common users. But know that all users of a legal site typically have a defining feature: They feel dumb about the law. But they also want to be strategic.
  2. Know your User’s Motivations, Tasks, Mode, and Mental Models: Know what query/question/problem your user is coming to your site with — and answer that right away. Look at your past data, do interviews, find out what the most common missions users of your service have. Do everything you can to address this as soon as they first engage with you, to let them know that they’re in the right place and make it easy for them to get their motive satisfied.
  3. Build around use cases: Frame the solutions as responses to particular problems/personas. Use the persona & user research you have done. Give distinct entry points and paths for different users you’ve identified.
  4. Design for the Most Unsophisticated User. Even if they are experts. Even if they are law-savvy. Even if they are well-educated. You can give shortcuts to more sophisticated information. But start with a hierarchy and orientation that is eminently clear — and let the experts unbury the sophisticated information or bullet straight to it via some ‘expert touch points’. Guide everyone else, the majority of your users, with a strong, clear design.
  5. Strike the Balance of Guiding the User & Cutting the User Off: It is your obligation to support your user & guide them strongly. At the same time, you cannot deprive them of choices. You can not cut off options for them to pursue their rights and opportunities, even if it makes your design ‘less clean’, ‘more confusing’ — or it goes against your instinct about what’s in their ‘best interest’. It is up to them to make the choices, you can only do so much — and you shouldn’t over-design them into a corner.

  1. Orient your user immediately as to what path they may want to take. Present a roadmap that orients them, that lets them see what you have on offer & where they may want to go. Anticipate what they will likely need & tell them the pathways to get the information & tools to get them there
  2. Give relevant Entry Points to your site’s resources. Present scenarios or personas as entry points. First present the most basic possible pathways (likely, categorize the type of legal situation you’re dealing with, choose a ‘type of law’ path).
  3. Build a Clear Hierarchy: Present information in a clear, thoughtful hierarchy. Only disclose what is necessary at that moment. When you do present it, make sure it is presented with clear logic & rationale.
  4. Do not present long lists of resources. Present resources in categories based on answers to specific questions (how to solve this need? how to accomplish this task?). Do not present alphabetic lists. Categorize and group them. Present indexes based on how your user understands her problem, names her problem, categorizes her problem. That is not usually be the first letter of a term for the problem — a term she may not even know.
  5. Stage information. Present very limited information in the first place, with a limited set of options that the user can pursue — and gradually uncover more specific, in-depth information she is seeking out. Have a comprehensive set of information on your site, but do not present it at first. Let the user unpack it if she wants it. Otherwise, give summaries, shortcuts, headlines, and other ways to digest main points without having to spend time reading through comprehensive explanations, lists, options, etc.
  6. Be consistent, be familiar. At each step, have a consistent template of information you’re providing to them. Borrow these patterns from other dominant services and products in your area. Put your user at ease so they know what to expect, where to find things, how easily to scan & shortcut through your material.
  7. Create a Dominant Flow-Pathway. Have a path of least resistance, especially for the new user and the naive user. They want to just flow through process in the quickest, least thoughtful way possible (the ‘No-Brainer’ mode). Make it easy to stay on path — don’t give lots of other options or pathways when they’re on a path. If most of your users are naive to the experience or content, then rein them in. Give them more of a single-use path, that lets them accomplish a task with very clear & strict direction from you.
  8. Give Shortcuts: Especially for expert users, allow them to jump off your dominant flow-pathway. Give lots of shortcuts to find the right bit of information for the user who is coming to the site ‘with a bullet’. Right from the first page, let the user go to the Specific Tasks that she wants to accomplish, through a search box, an index, or a common-shortcut list. Don’t lock your user into the dominant-path. Do not make them feel trapped. Let the user ‘Off-Road’, wandering farther afield, to dive in more, to try things out, especially if they are in expert mode and want something very specific. Give these off-roaders the ability to undo, reverse, and go back to the home-path.
  9. Use white space, do not crowd: space out all of the resources you are providing. Add icons and pictures to flag different categories, tasks, path-entry points. Do not crowd pages with lots of text and options.

  1. Allow for multiple modes of interaction. Give users multiple ways to get their intended task done, based on their user preferences. Like, some may want to browse to find the right thing and check it out; others may want to bullet to get right to an answer for their query.
  2. Give rewards, sense of achievement. Let the user check things off, feel they have progressed, be rewarded by the interface for having got through material. Provide immediate reactions when a user has taken a step, so they know it has registered & they feel satisfied that it is done.
  3. Make the possible interactions direct, clear & limited. Make it very clear to the user at each page/section/step what they should be doing— and what the effect of their actions will be. Give clear tips for each possible action the user might take. Give one screen per goal. Don’t crowd with too many functions or tasks, make it clear what the goal is.
  4. Reduce the number of clicks. Let the user stay on the same page for as long as possible, but stage & selectively reveal/hide the information on the same page. Put in enough details for a person to know what they’re clicking on (don’t make them click for them to find out what will be at the link). You can use hover to give the details without a click. Also try to avoid too much scrolling, closing, clicking…
  5. Once a user has made some choices, give Targeted & Bordered Resources. Once a person has chosen a certain pathway, then you know which specific area of your site that she wants to be in. Wall off the other resources on the sites from her, so that she doesn’t accidentally cross over into another area that doesn’t apply to her. She can come back to the home & restart her search if she wants to enter another area of resources.
  6. Give Status Mechanisms to keep users aware. Tell your user if there’s been a failure, if conditions are changing, what the status of a process is, when things are being saved, what can be done/undone.

  1. Architect your resources into an integrated system. Take a step back to look at all the resources you want to offer to your user, and organize them into a coherent flow of content. Sort & categorize it, cut repetition, and find where you are missing resources that you need to collect.
  2. Unbury your materials out of PDF and Word documents. When you are presenting legal documents, forms, resources, or otherwise to your user, present them whenever possible on your website, in html, and not as an attachment in another file format (most common culprits: the links to the .pdf download or the .doc download). Take it out of these other formats and lay it out into the flow of your site. If the material is meant to be filled in by the user ( like a form) or printed off (like a training manual) then give them the option to download the .pdf or .doc — but always present it live on your site first, and give the user a clear way to download it in the non-html format.
  3. Only use the plainest of plain language. Rewrite your existing resources into terms that are meant for the layest of lay users, even when your target audience is very well-educated & familiar with law. Take out all jargon, or define it immediately & in simple terms if you must use jargon terms.
  4. Make your knowledge visual, graphic, and easy to look at. When you can, transform your text into (or add to your text with) icons, photographs, diagrams, cartoons, and scenarios. Even putting a face on each page will help your user pay attention & relate to the content better. Particularly when you want a user to pay attention to a piece of content, put an image with it.
  5. Convert long paragraphs into digestible formats. Big chunks of text will induce gloss-over & misunderstanding. Break them apart intelligently & strategically. Use as many checklists and bullet-points as possible, so that the user can designate individual steps and concerns easily.
  6. Keep your content Up-To-Date & Correct. Do not let your information go to seed. Keep pruning. Remove resources that are out of date. Check back with contributors. Recruit new donations. Recruit updates. Users will tune out from your resource as a whole if even part of your resources contains faulty or irrelevant information.

We’ve collected together examples of websites & designs that perform the same functions as our concepts for our Guardianship Navigator products. Each set of patterns are oriented around an essential set of functions, that the site is trying to provide for the user.

The examples provide a variety of possible ways to achieve the essential functions — some better than others. We’ve collected them together to start identifying good practices & patterns, and areas for improvements, that we can integrate into our prototypes.

Legal Help Portals

These images are all of legal self-help and services sites from the Internet, on a desktop computer. They are landing pages that are intended to orient the user — a person seeking legal help — and get them on the best pathway to find support, information, and other resources that will help them resolve their problem.
The main functions of the Legal Help Portal are to:

  • greet the user & engage her to stay on the site
  • give her some basic orientation as to what is available
  • help the user frame her problem in terms of the language of the site/domain
  • give the user options as to what paths she might take for her problem
  • direct the user to the option that best suits her need
  • give the user resources to follow-through on the option she has chosen

Triage & Diagnosis Tools

These are examples of how websites do preliminary ‘intake’ of a user — having them categorize their situation, evaluating whether they belong on the legal path they want to take, and to recommend other paths they may want to consider.
The main functions of the Triage Tool are to:

  1. Gather a first level of information about a user’s situation
  2. Help the user put a name on their problem
  3. Show them possible paths they could take
  4. Help them decide which solution path is most appropriate
  5. Cut them off from paths that they’re not eligible for
  6. Figure out what type of service to provide them (at what expertise level, with what kind of vehicle, with what level of hands-on support)

Process Guides

Process Guides are walk-throughs of a legal process, to help a user understand what the route is from point A (a problem state) to point B (a resolution of the problem). It can incorporate other tools inside of it (triage, intake of info, filling of forms, etc), but its main purpose is to present the user with a map of a path and action steps to move along the path.

The main functions of the Process Guide are to:

  1. Provide orientation, birds-eye view of what to expect to the user
  2. Help user estimate time and effort necessary to get through the process, and where the sticking points are
  3. Set accurate expectations of what the process will be
  4. Let the user feel like they have some knowledge and can have control, co-piloting ability during the process
  5. Help them imagine what is coming, let them feel prepared
  6. Give step-by-step details of what to do & what may happen, so they can take the right actions at the right time

Know Your Rights

This branch of legal designs is meant to engage a lay audience about an unfamiliar area of law, and educate them about how it may apply to their situation. These designs say: You are now in the strange world of law. Here is how this world works, who the relevant people are, what the rules are, and what you should know to thrive here.

Leave a Reply

Your email address will not be published. Required fields are marked *