Free flowchart maker kit: Diagram wireframes with Justinmind’s new library
Start your UX design project off the right way: design awesome user flow diagrams with Justinmind’s brand-new Diagramming UI library
As you may have guessed by now, we’re into wireframing big time. In fact, we recently released two new UI libraries — our mobile and web wireframing UI kits — so you can wireframe sites and apps to your heart’s content.
Today we’re excited to announce the release of our latest UI kit: Justinmind’s Diagramming UI library. This widget library is full to the brim with pre-built UI elements and icons to help you wireframe user flow diagrams.
Before you start wireframing out your screens, designing user flow is the best way to ensure that your UX design process is in line with users’ needs, as well as your business goals. Our flowmaker widget library is the perfect tool to wireframe diagrams and validate use cases early on in the design process.
So if you haven’t done so already, download our brand-new Diagramming UI kit here. We’ll show you how to get set up and wireframing flow diagrams in no time!
What is Justinmind’s Diagramming UI kit?
Start your UX design project off the right way: design awesome user flow diagrams with Justinmind’s brand-new Diagramming UI library
As you may have guessed by now, we’re into wireframing big time. In fact, we recently released two new UI libraries — our mobile and web wireframing UI kits — so you can wireframe sites and apps to your heart’s content.
Today we’re excited to announce the release of our latest UI kit: Justinmind’s Diagramming UI library. This widget library is full to the brim with pre-built UI elements and icons to help you wireframe user flow diagrams.
Before you start wireframing out your screens, designing user flow is the best way to ensure that your UX design process is in line with users’ needs, as well as your business goals. Our flowmaker widget library is the perfect tool to wireframe diagrams and validate use cases early on in the design process.
So if you haven’t done so already, download our brand-new Diagramming UI kit here. We’ll show you how to get set up and wireframing flow diagrams in no time!
What’s in Justinmind’s Diagramming UI kit?
Our Diagramming UI kit is based on the Business Process Model and Notation (BPMN) graphical notation specification. This is the de facto standard for business process modelling used by businesses and organizations who want to better understand their internal business procedures and communicate them to users and stakeholders.
Our UI library is made up of five types of widgets for wireframing diagrams and making flowcharts: basic diagramming, flow, connectors, components and swimlane basics. Let’s take a look at each category:
Basic diagramming — events, gateways, activities and labels. This category includes UI widgets for defining essential actions in the user flow (flow objects).
Flow — sequence, bi-directional, message, conditional sequence flows, associations and annotations. These are connecting objects that show the order in which activities are performed in a user journey and are represented as solid or dashed lines.
Connectors — a set of connectors with labels that show the order of activities, with the addition of a description. Use the Connector Positive and Connector Negative widgets to create a decision tree-like section in your wireframe to explain possible consequences of user actions.
Components — a set of readymade icons and labels that provide instant feedback about user actions (e.g. the Refresh icon to signal that the page needs to be refreshed at a certain point in the user flow).
Swimlane basics — this category contains two pool and two lane widgets. Use these to define the outline of your user journey. Graphically, the Pool widget is a container for portioning a user flow from other flows, and the Lane widget is used to separate different activities by different users or personas within the same user flow.
Why do you need a wireframe flowchart maker?
Before you start designing your product, you need to know everything there is to know about your users, their goals and their needs. You also need to know how they are going to use your product. For instance, how will users book a hotel room from your website? Which users will be visiting your site? Essentially, you need to define your user journey.
A quick way to begin exploring your user journey is by creating a simple user flow diagram. Before moving on to the more advanced stages of the design process — i.e. high-fidelity prototyping and user testing — wireframing your flow diagram helps you determine which personas you’ll be designing for, as well as what user and business goals need to be addressed. Learn more about designing with personas here.
Wireframing the user journey can help you identify the type of content your site or app requires, what kinds of interaction you’ll need to include, the information architecture, etc., prior to jumping further into the design process.
Why do you need this Diagramming UI kit?
So why specifically our free UI kit? Wireframing a diagram with Justinmind’s Diagramming UI library helps bridge the gap between design intention and implementation. It also provides important details and clarity to your design assumptions before fleshing your designs out with wireframes and prototypes.
Our Diagramming UI library won’t just help you get to know your target users, it will actually enable you to visualize decision points at every step in the user journey. By simply dragging and dropping widgets to the canvas, you can map out exactly how and when users will interact with your site in order to improve the overall UX of the site.
Our use of standard UI elements and naming conventions (according to the BPMN) will also help to provide a common language for all involved in the design process — from designers, to developers, business analysts and stakeholders.
Getting started with Justinmind’s Diagramming UI kit
Follow these 4 steps to get started with Justinmind’s Diagramming UI kit:
- Download Justinmind and start your free 30 day trial
- Download the Diagramming UI kit
- Open Justinmind and create a new web prototype
- Import the UI kit into Justinmind prototyping tool. The Widget Library palette is visible on the left-hand side.
As soon as you’ve done this, you’ll be ready to start wireframing your flow diagram.
Making your flowchart with Justinmind’s Diagramming UI elements couldn’t be easier. Simply drag and drop widgets from the Widget palette to the canvas to get started. Next we’ll show you how to create a complete user flow diagram in your Justinmind web wireframe.
Web wireframing with Justinmind’s Diagramming UI kit
In our example, we’re going to wireframe a use case (step-by-step description of a process) of a user booking some hotel rooms.
In this particular use case, we have two personas in the user flow: the user (making the booking) and the hotel (managing the booking). Both must be included in the user flow in order for it to work.
Note that in reality, much of the activity by the hotel will be automatic, however, we’ve included it in our use case to give you a more complete picture of the user journey.
Check out our example here.
Wireframing the outline of your flow diagram
Let’s start by defining the overall process/activity within our use case. Start by dragging a Horizontal Pool widget to the canvas — remember that the pool element is used to represent the framework of a process or use case.
Rename your pool by going to the Properties palette and changing the default text on the left-hand side. We recommend using the name of the use case you are about to wireframe — in this case “Check in online now”.
Then, place two Horizontal Lane widgets inside the pool, one on top of the other. The lanes will represent the actions taken by each user persona.
Wireframing the actions of your personas
As you can see from the image above, we’ve used a whole combination of widgets from our Diagramming UI kit to map out the user flow of this use case. Let’s take look at the widgets we used and why:
Event — we used this widget to represent the main activities in the user flow, such as the user’s booking, the hotel receiving the user’s order, notifications and emails.
Sequence Flow — we used sequence flow widgets to show the reader which direction the user flow was moving in at any given point.
Connector Label — we used these widgets to connect actions and effects that needed some explanation. For instance, once the user has made their booking, they will receive an email prior to arrival, letting them know that it’s time to check in to the hotel. The connector label lets the reader know exactly when the user will receive that email, as well as pointing them in the direction of the next step in the process.
Association — these widgets simply link flow objects (such as the user’s check in with the order email).
Activity — activity widgets represent a task that the user must perform (such as clicking a URL, downloading an eKey by pressing a button).
Gateway — gateways have been used to show the direction of flow. Note that they shouldn’t be used to make decisions — combine them with Activity widgets to do so.
CTA — surprise surprise! Call-to-action buttons ;) Learn more about the dos and don’ts of button design here.
Affirmative/Negative — we used these widgets to signify what happens if the user does or doesn’t do something in the user flow.
End Event — the End Event indicates where a user flow ends.
Learn more about using business process modelling elements here.
Customizing your flow diagram wireframe
Justinmind’s widgets are all designed using atomic design principles, meaning you can easily customize them any way you like. To modify your UI elements, select one on the canvas and simply head to the Properties palette (on the right-hand side of the canvas).
From the Properties palette, you can change their size, color, transparency and position, and add a shadow, border or background layer to them fit your brand’s design guidelines.
Once you’re happy with your wireframe, you can share it with your team. To do so, you can either send them a link to view it in their browser, or add them as prototyping users to your Justinmind account. This will allow them to edit the flow diagram directly. Learn more about Justinmind’s Teamwork features here.
Best practices for wireframing user flow diagrams
Identifying with your users
When wireframing a flow diagram, you need to think about who will be using the website or app. Make sure that you clearly define the scope of the user flow by identifying the who, what, when, where and why of your flow diagram, making full use of your new widgets.
Think about user goals and entry points
Start by identifying the trigger of your user flow, or the user’s entry point. For instance, the user in our example may have reached the hotel’s website by performing an organic search. Your user flow should always include Start and End events, so that the reader can visualize the user journey in its entirety.
Making the most of your flow diagram
The whole point of making a flowchart is to establish how your users are going to use your site or app. Therefore, it’s essential that your flowchart be as clear as possible.
You need to take into account the visual hierarchy of the UI elements on the canvas and partition different personas and user flows appropriately. If necessary, create sub-flows to split user flows into phases if they are particularly long. The BPMN guide suggests creating “Call” Activity UI elements to show repeat events, which will help you to keep lengthy flows organized on the canvas. Learn more about creating your own widgets and UI libraries in Justinmind here.
Justinmind’s Diagramming UI kit — download now
If you need to map out the user flow of your website or app, Justinmind’s brand-new Diagramming UI kit is your new best friend. With standard UI widgets and icons, it takes no time at all to wireframe flow diagrams to share your designs with everyone in your team.
Wireframing with the user in mind just got so much easier. Download Justinmind’s Diagramming UI kit now to see what we mean.
