MatchDog Build Your Portfolio Project: Flow

The most important tasks found in the upper-left quadrant of your prioritization matrix are those which most users will spend the majority of their time performing. At a minimum, these are the ones that need a full flow design to show how (and with what logic) the user will transition from screen to screen. Which objects are on a given page should be a decision you previously made via the combination of your UX architecture and screen archetype selections.

While your prioritization matrix may be slightly different from the sample in the book (table 9 or 10), the MatchDog organization can’t succeed in its mission unless the following 3 flows are highly usable and contain the fewest possible steps that can hold all the business logic.

User profile building (to collect the information to base the match on)
Dog selection (and maybe short-listing to narrow down to a few favorites)
Dog delivery (meeting, setup and other arrangements to take the dog home)

Sample flows are shown in the book, but there are of course valid alternatives. Those in the book may not be suitable for your architecture and archetype combinations. It is up to you to decide.

Project Brief

Review the full project brief for MatchDog again. With your initial screen design from the prior step, you start to be able to imagine the movie script in your head now.

You may draw ideas from the examples in the book regarding MatchDog flow design. The book intentionally scaffolds this project with examples and discussion of various options for two of the critical UX flows. However, you are the designer, and the flow should reflect your optimized grammar. Your grammar may be different from the one the example flows in the book are based on. You can accept those flows, use them as starting point and refine them or propose equally valid alternatives that meet the functional objectives and maybe even have fewer steps.

Goal of This Exercise

The goal of this exercise is to practice the technique of defining user flows for the most important task sequences in your MatchDog design. These user flows will define how the primary actions the user can take on the various objects will navigate them from screen to screen.

Activities You’ll Perform in This Exercise

In this activity, you will draw boxes representing your primary screens (typically containing one or more objects) and show which global and local actions will move the experience from one screen to another of unflood the content within a single larger screen. You will identify the branching and business logic that needs to be implemented during the navigation to complete the end-to-end pet adoption process with symbols such as the diamond (user decision) and triangle (system decision).

Equipment You’ll Need in This Exercise

Pencil and paper or a vector drawing program such as OmniGraffle or Visio will work fine. You could also use PowerPoint. Any drawing program that can automatically maintain the line and box connection points will increase the speed at which you can create legible UX flow diagrams.

Design Your Flow to…

Create your own alternative flow for the profile-building process.
Create your own alternative flow for the dog-selection process.
Create the final flow to arrange meeting the adorable dog and taking ownership (dog delivery). There is no precedent in the book for this scenario, so you are now faced with a “clean sheet of paper” opportunity instead of re-factoring a previous flow example.
Define the flows for any remaining tasks in your top-priority category if they are not already covered by the 3 above.

Remember to annotate all your flow diagrams with object types and action names that move the flow forward so they can explain themselves to developers and potential reviewers of your work without you in the room.

Iterate the Design of Your Grammar, Visualization and Flow to Simplify It

Now that you have a complete set of artifacts for grammar, visualization and flow, it is once again time to try to simplify. You have probably identified friction points during the flow design process where you may wish to make a change to your visualization layer decisions or even to the core grammar.

Construct Your Interactive Prototype

When you are convinced you have arrived at the simplest and most cognitively compact solution at these first three framework layers, it is time to stop sketching and switch to the construction of your interactive prototype.

Make sure you have an interaction design language level of consistency across your entire design. When the same action appears in multiple screens for a different (or the same) object, it must do the same thing and hopefully be in the same proximate position.
Use the guidance provided in the Elegance chapter to lay out your exact pixel grids for screen construction.
- Use as few pixel-grid templates as possible.

We recommend that you invest in building out your prototype to a level where you are assured it can hold all the tasks in the MVP prioritization matrix even if you don’t simulate all the possible flows and pages in the prototype. This alone will make an outstanding portfolio piece along with all the synthesis and analysis steps along the way that document your skill in Semantic IxD.

Wrap up This Exercise

The UX flows that you just created have accomplished three important things. First, you have specified the logic for the primary navigation paths within the UX design. Second, you have specified the business logic that developers will need to implement in order to code a functional system. Your developers, product managers and technical writers will be delighted with the clarity this particular IxD artifact brings to the table to keep all stakeholder expectations in alignment during the product development lifecycle.

And… third, they have validated that your choices in UX architecture and design patterns can connect in the minimum number of steps – and potentially through iteration you have found even better visualization design patterns than your initial choices and even found ways to further compress your conceptual model grammar.