User Flow and Wireframe Development

Agenda

• Understand the concept of User Flow and its importance.
• Learn how to create a User Flow Diagram.
• Develop wireframes for key screens in a user journey.

What is a User Flow?

Definition: A User Flow is a visual representation of the steps a user takes to achieve a specific goal within an app or website.

Importance:

• Identifies potential roadblocks.
• Ensures seamless user experiences.
• Helps align design and development teams.

Symbols in User Flow Diagrams

Example User Flow Diagram in Real Life

Diagram:

• Start: Begin the process.
• Lamp doesn't work: Check if the lamp works.
• Lamp plugged in?: Decision point. If not, plug it in.
• Plug in lamp: Action to plug the lamp in.
• Bulb burned out?: Decision point. If yes, replace the bulb.
• Replace bulb: Action to replace the bulb.
• Repair lamp: Repair the lamp if needed.

Steps to Develop a User Flow

Example: User Signs Up for an Account (Activity in worksheet section 1)

1. Define the user's goal: Example - "User wants to sign up for a new account."
2. List the steps involved: Break down the process into simple actions.
3. Identify decision points: Highlight where the user might face choices or errors.
4. Draw the diagram: Use symbols to represent actions, decisions, and endpoints.

Common Mistakes to Avoid:

• Skipping user research
• Making flows too complex
• Ignoring alternative user paths

Types of User Flows

• Task Flows: Simple step-by-step user interactions.
• Wire Flows: Combines wireframes with user flows.
• User Flow: Tracks the user's entire experience.

Wireframes and Sketches

Definition:

• Simplified drawings or outlines of the app's screens.

Levels of Fidelity:

• Low-Fidelity: Basic sketches focusing on layout and structure.
• Mid-Fidelity: More detailed, including some interface elements but without full design.
• High-Fidelity: Near-complete designs with visual details, colors, and interactive elements.

Best Practices:

• Keep it simple and focus on functionality
• Use placeholders for images and text
• Iterate based on feedback

Why Wireframes Are Important

• Helps visualize the structure before design
• Saves time and reduces rework
• Ensures user experience consistency
• Facilitates better communication among teams

Common Mistakes in Wireframing

• Too much detail too early
• Ignoring usability and user experience
• Not considering different screen sizes
• Skipping feedback and iteration

Detailed Specifications

Functional Specifications:

• Detailed descriptions of how features work.
• Include data handling, interactions, and error handling.

Design Specifications:

• Specifics on visual elements such as colors, fonts, and iconography.
• Reference to style guides or design systems if applicable.

Interaction Specifications:

• Descriptions of animations, transitions, and interactive behaviors.

Wireframe vs Prototype

• Wireframe: Focuses on layout and structure.
• Prototype: Includes interactions and animations.

When to Use Which?:

• Wireframe for planning.
• Prototype for testing and presenting.

Best Practices in Project Documentation

Clarity and Precision:

• Use clear language and avoid ambiguity.
• Consistency:
• Maintain consistent terminology and formatting.

Visual Aids:

• Use diagrams, wireframes, and charts to complement text.

Version Control:

• Keep track of document versions and changes.

Collaboration:

• Involve stakeholders in reviewing and updating documentation.

Example Wireframes

Example wireframes for mobile shopping app / Source: Balsamiq.com