Link Search Menu Expand Document
Countable Ops Manual

UX Design Process

Table of Contents

Purpose

A guide to getting started Wireframing to effectively communicate the about a project’s goals and solution approach to the project stakeholders. In particular, the wireframe contains everything needed to pass to a designer to develop high fidelity mock-ups, or to a developer to prototype an MVP.

Scope

Gives guidelines to get more information out the wireframing process.

Use the following Template to create your wireframes in Miro. See below for instructions on specific panels, in bold.

Guidelines

Before Wireframing you should do these tasks first (sections of Miro board above):

  • Undertake a discovery process to determine the main problem your product will solve.
  • Inspiration Look at similar products you or others worked on before, to glean what UI patterns work well for your problem domain.
  • User Stories Clarify who uses the product, to accomplish what, and why they would do so
  • Information Architecture List of the different views and how the user navigates between them. These are the pages you will include in the wireframe.
  • User Flows Understand the Business Process Flow or User Journey (what steps does the user take in order to enact the user stories?)

The Wireframe is the first visual representation of the product, and serves as a way to consolidate all the information above and make it digestible for stakeholders.

Your wireframe should:

  • Show the full navigation of the app in at least one of your views, even if you are designing just a small section of UI inside that.
  • Group components by priority and task relatedness to minimize the user “jumping around” (visual heirarchy)
  • Make it clear how the user accomplishes the User Stories, and the order of interactions.
  • Make it clear what task the user is doing in each view. (editing, viewing information, navigating)
  • Use common conventions where available: You don’t need to reinvent the wheel when it comes to sign-in, menus, inboxes, notification badges, error message/banner behaviours, etc. Users expect these basic patterns in their commonly used apps to feel similar.

Resources