Applications Advocates - Miro Wireframes

This month's Applications Advocate is Senior Business Analyst, Jamie Taylor who told us all about Miro Wireframes.  

Jamie outlines the main features of the tool, why you might find it useful, and tips for getting the most from it.

Name of application

Miro Wireframes (found within Miro Apps)

How to use it

Miro is web based and can be accessed at https://miro.com/

An account is required to use it, which can be set up for free. However this is limited to viewing boards only. This is probably sufficient for most stakeholders who will only need to view the board and comment on the wireframes that have been created using the Wireframe Library app but a creator will need a full account - a license costs $100.  If you work for IT Services, please get in touch to find out about the corporate account.

Once you have an account, the Wireframe Library app can be located in the apps section of Miro.                     

What it does

The Wireframe Library app gives you access to a suite of user interface elements that can be pulled together to create a wireframe of a screen. 

Each element can be pulled into the wireframe by dragging it onto the canvas and then be moved around, resized, and recoloured as required. 

Miro is an interactive whiteboard at heart and so creating the wireframes in it would be like doing so on a physical whiteboard with other people in the room being able to add to it and make comments. This is the main strength of using a tool like Miro for wire framing and it also gives you access to a range of other tools for commenting, reacting, making meeting notes, to-do lists, etc. which are available across the Miro solution. Miro and its Wireframe Library app can obviously be used in isolation and then presented to stakeholders at a later date. 

How it looks

The screenshots on the right show some of the components available for you to pull into a wireframe. They are all designed in the same style and labelled appropriately. You can use the search bar shown at the top of the screenshot to search for a specific element. 

Also shown is the icon list, search and keyword buttons (where the mouse cursor is hovered over). The icons list is fairly extensive and allows you to find what you need by either searching or clicking on one of the keywords below the list of icons. Similar to the components, these can be dragged into the wireframe and manipulated in the same way.

When you open the Wireframe Library app, you see an example wireframe. This gives you a good starting point as it include many popular elements and also some general tips to consider when building a wireframe. All of the elements on the page can be moved, resized and edited as desired. 

Miro Wireframes – best bits and top tips 

  • Use frames to create a more dynamic wireframe. Frames are like areas of interest on a Miro board which, when cycling through a series of frames, move the user’s view of the board to a specific location. You can also add links to a button in your wireframe. Those links can lead to a separate website or can link to another frame within the wireframe. This is useful as it can more dynamically illustrate the flow of the system and allow users to click through and see what happens. 
  • Keep your wireframes simple especially in the beginning. Note down the basics or critical features and add them to your wireframe. Other desirable features can be added at a later date.
  • Avoid using pictures, colour or other design features as this will take the focus away from the navigation and layout which is what you want your stakeholder’s opinion on initially. 
  • Don’t be afraid to use some of the other apps available within Miro to help explain the wireframe or to hold comments. Miro has a large selection of tools that can be used to help improve the use of the wireframe. ​

It’s a life-saver for…

  • Lo-fi wireframes – it’s not a tool a graphic designer would use to convey style, colour and animation nor is it a tool a developer would use to build a prototype but it’s got enough functionality to build a wireframe that illustrates the basics. Add that into the fact that you can build it collaboratively and you have a really great tool to kick start you system design. 
  • ​Hybrid sessions – As hybrid meetings are becoming ever more common these days, Miro itself is a great tool to relieve some of the problems with running this type of meeting. All participants can be logged into the whiteboard and participate fully at the same time. All it requires is someone with access to a board which they can share with the other participants.  ​

What makes it better than its closest competitor?

It’s low barrier to entry – you don’t have to be a designer to use this tool, all of the elements are very basic and limit your options on what you can do (in a good way). Other tools that are more geared towards designers have a much steeper learning curve than Miro.

It’s ability to collaborate – with other tools, you’ll likely be building the wireframe alone and sharing a PDF or image file with stakeholders afterwards. Miro allows you to build it collaboratively and could reduce the amount of time spent going back and forth to stakeholders for their views and opinions.  

​It’s other tools – as well its Wireframe Library app, you also get access to tools to post comments, add notes, draw arrows, add charts, add Kanban boards, or add mind maps, to name a few. This can turn a simple wireframe into a huge idea board which can evolve other the life of a project.

Do you have a favourite application?  

Get in touch and let us know.  To find other applications in this series, just type 'Advocate' into the search box at the top of this page.