How to Create a Screen Flow Diagram for a Smartphone App

Starting Your Diagram

Begin by opening your project in Software Ideas Modeler. If you're working on an app, you likely have some screens already defined using User Interface Diagram. Our focus will be on visualizing how these screens interconnect.

Add a New Screen Flow Diagram: Click the Plus button in the tab bar to open the diagram menu. From the Wireframing group, select "Screen Flow Diagram." This action creates a new tab with a blank canvas, setting the stage for your UI/UX design exploration.

Building the Flow

• Insert a Start Node: Every flow begins with a start point. Find the Start Node element in the toolbox and drag it onto your canvas. This represents the entry point in this user scenario.
• Add Your First Screen: Click on the circle on the right side of the Start Node to automatically add a Screen element. This action signifies the transition from the start point to your app's first screen. Right-click on the flow connector and select "No Interaction" to indicate that this transition occurs automatically, without user input.
• Adjust the Screen Element: Modify the size of the Screen element to resemble a smartphone by right-clicking on it and selecting the "Smartphone" option. Adjust its dimensions to match a typical smartphone's vertical aspect ratio. Change the style according your preference, e.g. "Flat Cyan.
• Incorporate Screen Details: Drag your Mobile App diagram from the Project tree onto the Screen element. This enriches your screen flow diagram with the actual UI design, immediately showcasing the interface's look and feel.
• Duplicate Screens Efficiently: To add another screen, copy the first Screen element and paste it. Select "Paste as an independent copy." This method preserves the size and style settings of your original screen element, ensuring consistency across your diagram without the need to reconfigure each element from scratch.
• Detail Your Flow: After placing your screens, use the Flow tool to draw connections between them. For each flow connector, specify the interaction type - Touch in our case, since we model a smartphone app, in the Properties sidebar and set the appropriate referenced element (like a button or an interactive area). This level of detail helps clarify how users move from one screen to another and interact with your app.

Expanding the Diagram

• Add More Screens: Repeat the copy and paste process to add screens from your project for each step in the scenario. Connect these screens using flow connectors. Specify each connection's interaction type and referenced element to accurately represent the user's journey.

• Finalize Interactions: Ensure that all screens are interconnected according to your app's navigation structure. Pay special attention to the flow between screens, using the Properties sidebar to define each interaction's specifics.

Investment Management App Example Scenario

We'll create a detailed screen flow diagram for an Investment Management App using Software Ideas Modeler. This step-by-step guide will help you visualize the user journey from logging in to managing investments, ensuring you can draw the complete diagram with precision.

Initial Setup

• Open the Software Ideas Modeler and load the Investment Management App project. The example project has these mobile app diagrams: Login View, Investments, Add Funds and Investment Details.
• Add Screen Flow Diagram: Click the Plus button in the tab bar. From the Wireframing group, choose "Screen Flow Diagram."

Constructing the Flow

• Place a Start Node: Locate the Start Node in the toolbox. Drag and drop it onto the canvas. This represents the entry point into your app.
• Insert the First Screen Element: Click the circle on the right side of the Start Node to add a Screen element. Since this is the entry screen, right-click the flow connector, select "No Interaction."
• Configure Screen Appearance: Adjust the Screen to a vertical rectangle, mimicking a smartphone. Right-click, choose "Smartphone," adjust its size to reflect a typical smartphone aspect ratio, and change its style to "Flat Cyan."
• Set 'Log in' Diagram: Drag the 'Log in' diagram from the Project tree onto the Screen element. Rename the element to "Log in."
• Copy 'Log in' Screen: Right-click the 'Log in' Screen element, select copy, then paste it as an independent copy to maintain its size and style.
• Create 'View Investments' Screen:
• Rename the copied Screen element to "View Investments."
• Drag the 'Investments' diagram from the Project tree onto this Screen element.
• Establish Flow from 'Log in' to 'View Investments':
• Use the Flow tool to draw a connector.
• In Properties, set interaction to "Touch" and refer to the "Log in" button.
• Repeat the Copy and Paste Process for both 'Add Funds' and 'Investment Details' screens, ensuring you maintain the consistent look by preserving size and style.
• Rename and Add Diagrams:
• For 'Add Funds': Drag the 'Add Funds' diagram onto the screen, renaming it accordingly.
• For 'Investment Details': Follow the same steps with the 'Investment Details' diagram, naming it "View Details."
• Create Flows to New Screens:
• From 'View Investments' to 'Add Funds' and 'View Details', establish flows using the Flow tool.
• Set each flow's interaction to "Touch."
• For 'Add Funds', refer to the "Add Funds button"; for 'View Details', refer to "Investment Item."
• Add Transition From 'View Details' to 'Add Funds':
• Draw a flow connector for user navigation between these screens, specifying the Touch interaction and the referenced element to the Add Funds button.
• Add Transition From 'View Details' to 'View Investments':
• Draw a flow connector between these screens, specifying the Touch interaction and the referenced element to the Back button.

Investment Management App (Screen Flow Diagram)

Download the Final Project with Screen Flow Diagram

For those interested in exploring the completed version of this project, including both the mobile app wireframing diagrams and the detailed screen flow diagram, we have made the final project available for download. This comprehensive resource is designed to serve as a practical example, illustrating the application of the principles covered in our tutorial. By reviewing the final project, you can gain deeper insights into the process of creating effective screen flow diagrams and apply these techniques to enhance your own projects.