UX Design Guides
Create the Product

This step is about translating requirements for a "useful" product into a "usable" product.

Here, you need to think beyond basic functionality and provide the user with a narrative through your product that makes sense to them. Focus this design effort so that it is both effective and efficient, providing known value to users as quickly as possible while keeping development costs down.

At this point, you should clearly understand the use cases that your product needs to support; who you are designing the product for and what goals they are trying to accomplish. If these are not crystal clear, then please read "Understand the Problem Space".

Your focus now is to create a holistic solution for these use cases. In order to ensure that the product will be a success, you need to have:

  • A unified vision of success. There needs to be mutual trust, collaboration, and ownership across the project team & stakeholders in the definition of project success & in the process to use to get there. Success should be defined in terms of providing a great user-experience to the users of your product.
  • A clear design process. A thoughtful, repeatable process to ensure that decisions are made with primary value on and careful consideration of the impact on the user experience.

Recommended Approach

Set yourself up for success.

  • Focus on the right solution.
    • Solve current, known needs.
    • Design and build to support user workflows, not functionality.
    • Aim for Minimum Viable Product (MVP) & iteration rather than perfection.
  • Cultivate trust in the design process to ensure all decisions are user-focused and rationale based. The whole team needs to trust in the design process as a means to make product decisions. If you allow room for whim or non-user-focused opinion to dictate even the smallest of design decisions, you cannot guarantee that the end-product will holistically represent user needs. Decisions need to come from ux expertise, as based in user-rationale & supported by user-data.
    • Conversations revolve around rationale stated in ‘benefit to the user’.
    • Personal opinions can be stated, but are not valid currency for decision making.
  • Build your product as you design. Don’t separate design from creation. Get the team agilely building toward the current design thinking. We follow the Iterative Fidelity Development framework (see the "Design your product" section below) to help keep everyone on the same page.
    • Communicate often around where design thinking is and what is being built.
    • Be agile. Start simple and go from there. It is far easier to rebuild an implementation of a simple solution to make it more complex (if there is good user-based rationale for it), rather than rebuild a complex solution to make it simpler.

Iteratively build your product.

You will want a thoughtful approach to how you will design your product. Don’t confound your design by trying to design everything at once. In our process, we treat information & interactions, layout, user interaction enhancement, narrative cohesiveness, and visual design as distinct iterations. To do this:

  1. Understand your audiences' information & interaction needs.
    1. For each supported use case, use your "workflow diagrams" (The steps your users will take to realistically set out accomplishing their goal(s), independent of implementation.) to determine the information and basic interaction needs of your users at each step.
    2. Document the information & interaction needs in simple bulleted lists.
    3. Highlight information and interaction needs that are based on risky assumptions.

    2. If you are not confident in your assumptions, validate them with your audiences.

  2. Create a layout that supports the needs.
    1. Determine the scope. Ask what information will be supported in your product and what information lives elsewhere.
    2. Organize the content. At a high level, determine how information and interactions are organized in your product. This organization should ideally match the workflow diagrams to ensure that the users' information and interaction needs at each step are being presented to them accordingly. The organization of information and interactions can be documented as an Information Architecture diagram or a Pageflow diagram.
      1. Determine how information and interactions will be grouped into pages. Consider what types of pages [LINK] will support the users in their workflow. Document the pages with simple boxes and the page content in simple bulleted lists.
      2. Determine how a user will get from page to page, following their movement from initial contact with your product through successful completion of their goals.
      3. Have team members use your user workflows to walk through your layout diagram. Correct areas where they become stuck and cannot find critical information or interaction (including navigation).
    3. Begin building your product semantically. At this point, developers can see what pages, information, and interactions are needed for the product and can begin building it out in production-ready code. Use the simplest and most semantically-correct HTML elements that you can in order to convey the structure of your product and function of interactive elements.
    4. Prioritize information on each page.
      1. Determine relative priority of the information on each page (from your audience's perspective) across your product.
      2. Make and implement design decisions that reflect this relative priority of information. This will include style and placement of information. (e,g. creating wireframes).
      3. Determine confidence you have in your solutions.

    3. If you are not confident in your solutions at any point, validate them with your audiences.

    • To determine the best grouping of information to create an overall Information Architecture (IA) for your product, use a card sorting method.
    • To validate your IA, conduct a task-based study, using lo-fi prototypes (e.g. Pageflow diagram, paper prototype, etc) to keep users focused on testing how the IA supports them through their workflows.
    • To test usability, we recommend conducting a task-based study, using lo-fi prototypes (e.g. paper, wireframe fidelity interactive prototype, etc) to keep users focused on testing how the information layout supports them through their workflows.
  3. Look to enhance the user interactions across the product.
    1. Always start with the simplest solution for supporting user navigation through your product (for software, starting with vanilla, semantic html).
    2. Look for opportunities to enhance the experience (e.g. find-as-you-type searching), being intentional to ensure that functionality is appropriate and is created semantically.
    3. For websites and applications, all interactions should be keyboard navigable.
    4. Determine confidence you have in your solutions.

    4. If you are not confident in your solutions, validate them with your audiences, preferably with an interactive product.

  4. Build narrative cohesiveness through your product.
    1. Walk through you product to ensure that the content (page titles, headers, content, and instructions) guides the user through a cohesive linear narrative as they complete their goals.
    2. Look for opportunities to more efficiently and effectively communicate information to your users. (e.g. Maybe a diagram or bulleted list conveys information better than paragraphs of text?)
    3. Make sure that the accessibility narrative is fully supported. If there is something conveyed in the visual narrative, make sure that it is translated into semantic code that will be effective for screen reader users.

    5. This is a good time to fully validate:

    • The usability of your product through the supported workflows.
    • The accessibility of your product through the supported workflows.
  5. Create a cohesive visual language for your product.
    1. Determine final branding elements. What ties the brand identity together? Are you adhering to existing branding guidelines?
    2. Pick final look & feel for the site, including colors, fonts, and other visual considerations.
    3. Visuals typically are trying to communicate something to the user. This is a good opportunity to validate how well they are working, as well as testing that they don't adversely affect the usability or accessibility of your product.

    6. This is a good time to fully validate the out-of-box experience of your product prior to release.

Common Pitfalls

Process set up to fail

  • Doesn’t ensure user-centered decision making.
  • No stakeholder buy-in.
  • Lack of trust in process.
    • Design by committee.
    • Death by 1000 cuts.
  • Lack of trust in Designers.

Conflating your thinking

Trying to solve everything at once (IA, UI, Narrative, A11y, & Visual Design). Hard to validate & discern what might be causing user issues with your design.

Relying on big handoffs

Every handoff involves translation and is an opportunity for miscommunication. The more you can work together, the better.

Useful Resources

Design Process

Design Artifacts

Designing for humans

Working with stakeholders

Support for UW projects