Complex User Flows & Design Process

From beginning to end, your product needs a plan. I've got one.

My Experience

Throughout my UX career, I have been presented with problems both enormous and manageable. Each time I take the same approach, below is a process document created for Career Fair Plus:

  • Research: Analyze what users want; build the right product.
  • Design: Create pathways to give users what they need; build the product right.
  • Test: Confirm the results with users, discover opportunities to improve.
  • Repeat.

Three Stages of Design

Despite its creative points, all product design boils down to a methodical, scientific approach. While this design procedure can vary according to constraints and the specific task, in general the process must cover three essential stages, with the potential for plenty of iteration in between each.

Research — Analyze what your users want (“build the right product”).

Design — Create ways to give them what they want (“build the product right”).

User Testing — Confirm our results with users, or discover what we need to change.

Often this cycle is repeated for the same task or set of tasks, with each iteration bringing the product closer to perfection. Moreover, the stages are always one after another. Testing should be done intermittently with design to incorporate the results in later designs / iterations.

Design Documentation

Research

The research phase is where we make sure we’re going in the right direction. This is the point of the design process where we attempt to understand our users. Collecting data through user research (interviews, customer service logs, field studies, etc.), and a bit of empathy, will give you a good idea of whom we’re designing for, and what they want or need. Additionally, we’ll want to understand the needs of the stakeholders or owners, just as important as the end-users.

Documentation

The research-stage documentation can be broken up into two sections: collecting the data and what you do with it.

Stakeholder Interviews / Kick-off Meetings

The first thing is to understand business needs and technological requirements, and the best way to do this is to ask the sources. The questions asked and the notes taken will determine how close to the mark your final product hits.

User Interviews 

Just like stakeholder interviews, you need to ask the right questions to get the most helpful answers. User interviews can prove invaluable in understanding the people you’re designing for.

User Surveys 

User surveys are easier to orchestrate and can cover more people, than 1:1 user interviews — plus they are natural documentation that is easily forwarded to teams. Surveys are great for taking a quantitative approach to qualitative data.

Competitive Audit 

Examine the strengths and weaknesses of our competitors using an overlaid heuristics diagram. Evaluate areas such as ease of form completion, clarity of navigation, accessibility, trust factors, etc.

Showcasing Data

User Personas

Once we have adequate data on our users, we can build fictional user personas. These act as stand-ins for the actual user during the design process, focusing more on behaviors rather than demographics.

User Scenarios

These logic exercises take personas a step further — they outline how a persona would act in a specific situation, including what pages they visit and why.

User Journey Maps

These are invaluable for understanding our user’s journey, they map out the personas and user scenarios at each step of the experience. User emotions, quality of experience, product weaknesses, and other factors can all be documented.

Product Documentation

Documentation like product requirement documents and functional spec documents consolidate market and user research into a unified vision. Style guides help ensure consistency and adherence to best practices during the design stage.

Design

Design documents are often the physical design itself, we typically create these in either Figma or Adobe XD. They change in both form and complexity as the design process advances, and the types of documents, including their fidelity, can vary greatly.

While there are many advantages to designing quickly and creating a final product as soon as possible, it’s important not to cut corners. That doesn’t make them all necessary, though we may skip ones that aren’t applicable to our project or add relevant value.

Sitemaps

These are outlines of our information architecture, showing how our pages are connected to one another.

Wireframes

These are the barebone structures of our product; dedicating time to building one allows us to flesh out our sitemap without more complex details as distractions. The most basic form of prototyping to explore the efficiency and usability of your design. Good for brainstorming and inviting feedback from others due to its simple format and lack of colors, images etc.

User Flows

Once we’ve done enough user research, we can start outlining how the pages in your design correspond with user actions. User flows are fast shorthand notes that help you improve the efficiency of your design. You can evaluate the amount of friction at each step and minimize steps when possible.

Mockups

These allow us to focus solely on the visual details of our product, creating a hi-fidelity reference for how it should look.

High-Fidelity Interactive Prototypes

The last iterations of your product before the live version. Hi-fi prototypes are ideal for fine-tuning the interaction design and animations.

User Testing

Usability testing is the strongest influence on design decisions, we must employ testing for more complex design tasks moving forward. It helps ensure we aren’t forcing users into unnatural paths of behavior, and also counterbalance stakeholder feedback. This may not however be the final stage —  the results of the tests often lead to further research and iteration.

This stage must not only come after the design phase. Testing should occur early and often — it should happen alongside the design process at different intervals so that the results can be integrated into further designs. As a minimum, test between multiple iterations.

User Testing Documentation

Testing documentation can come in the form of plans, the tests themselves, and the results. Share everything among the team, so a standardized form for these documents will streamline the process.

Usability Test Plans

These outline our test goals and procedural details such as the location and time, or even the specific questions/tasks. These are especially useful for stakeholders to understand what’s being tested and why.

User Tasks

We need to describe to users the exact tasks we wish for them to perform. Be specific, avoid jargon, and don’t provide too many details on the steps needed to accomplish the task, that is what the user will be showing you.

Usability Test Script

If we are monitoring or moderating the user test, we need to employ a script to ensure consistency across tests.

Usability Reports

Once we have the results of the testing, we’ll need to make the data comprehensive to members of various departments who may not have your specific knowledge. The presentation of the data is crucial to ensuring that everyone interprets it correctly.

Wrap Up

Any documentation that doesn’t make the process easier is wasteful, and likewise any documentation that helps, no matter how frivolous it seems, is not a waste.

Documentation should come about naturally, as a result of necessity or best practices. Staples like wireframes, mockups, and prototypes are the most common, but less popular documents like customer journey maps or test plans can, when done properly, be just as useful. However not every step is required for every UX task, one must determine the best course of action for each task.  Only create documentation that moves design forward.