Hi all! My name is Christina Burgomistrenko and I am a systems analyst from Rubius. In this article, I talk about my design experience and compare several popular tools for creating wireframes that a business/system analyst can use in their work.
Why design an analytics interface if there is a designer?
When moving to a new project, I always get involved in the interface design process (alone or in tandem with a designer). Creating interface sketches at an early stage of the project plays an important role and allows you to visualize the work of future functionality, helping the Customer to “take a look” at it in advance. Sketch design is a kind of bridge between idea and implementation, which allows you to quickly make adjustments and clarify details before the project moves to the development stage.
It is in this context that the choice of tool for the analyst becomes critical since the right tools can significantly simplify the approval process and ensure effective interaction between all project participants.
If design begins without a designer, it is important to remember that an analyst is not a designer! His “minimum” task, as a rule, is to create a design at the level wireframeswhich will allow you to conceptually demonstrate the logic and solution to the problem with which the Customer came.
What is a wireframe?
There are 3 types of design layouts: wireframe, mockup And prototype. The key difference between them is the different stage of readiness/development.
At the “analytics” stage of the project, when the target solution is not yet clear, “outlines” of the future system are developed, they are called “wireframes/sketches”.
The wireframe will allow you to display:
-
information structure of the future system,
-
basic content groups,
-
the basic logic of interaction between the system and the user (visualization of some use cases).
After this, a designer/interface designer/developers gets involved and details it, working out the wireframe down to the details, taking into account components, colors, coloring, shape of buttons, interactivity, etc. As the level of detail increases, the wireframe smoothly becomes a mockup, and then a prototype.
PS The design sequence may differ in each project. Detailing of wireframes can be different depending on the task and opportunities in the project. Often, at the first stage, a mockup or prototype of the system is immediately developed, after which it undergoes regular adjustments, because at the time of discussion the exact logic of the work was not determined.
Analysis and comparison of tools for creating wireframes
I did the analysis six popular instruments for designing interfaces in the context of an analyst’s work.
It is important to note that these tools are unfamiliar to me (previously I always used Figma in my work), but this time I will try to study them “from scratch” and create a wireframe for an imaginary task. At the same time, I will record the time that I need for development each instrument and design one screen in the form of a wireframe.
List of tools:
Tool |
Description |
Type |
Released |
A tool for creating realistic functional prototypes. |
Desktop application |
2004 |
|
Interactive online whiteboard with the ability to collaborate on diagrams and sketches. |
Online service |
2006 |
|
An open source tool from the Vietnamese company Evolus. |
Desktop application |
2015 |
|
A tool for creating wireframes, interfaces for future websites, landing pages, mobile applications and programs. |
Desktop application |
2017 |
|
A virtual whiteboard tool for collaboration. Allows you to create diagram sketches that resemble hand-drawn diagrams. |
Online service |
2020 |
|
A new generation graphic editor with artificial intelligence for UI/UX and Web design. |
Online service |
2023 |
About the test task
So, let’s imagine that we work at Microsoft. The Customer came to us and asked to create a certain “Settings” window for the new version of the OS – Windows 11. We conducted a series of interviews with stakeholders and understand that the window should look like this:
But there is little problem — this idea is still only in our head and we, as analysts, decide to design a wireframe to discuss the nuances with the Customer, developers and designers. At the moment, we know for sure that the window should have the following interface solutions:
-
main menu in the form of a list with a search bar,
-
nested tiled list (tile) for navigation within the selected section,
-
emphasis on information about the user and his device.
So, install all the software and start solving the problem.
On the Internet you will probably find reviews of all these tools, but there is a nuance – they were all written by designers or interface designers. In the work of an analyst, design efficiency is extremely important. Since most of my tasks have a “due yesterday” deadline, the sketches of the future design quickly become outdated and/or remade. In this regard, I highlighted 4 main evaluation criteria (maximum score for each criterion is 5):
-
Time (for mastering the tool and designing one wireframe);
-
Ease of use/interface (how easy it is to “understand” the tool’s interface, to search for the desired action without unnecessary complications, clear instructions or a minimum of steps to complete certain tasks);
-
Convenience (comfort, efficiency and satisfaction from using the tool);
-
Component Libraries (number of user interface elements, libraries of ready-made components, including for different OS). Here we will share the availability basic components (buttons, checkboxes, selectors, etc.) and complex/composite components (tables, menus, datepickers, etc.)
Result in Axure RP
Advantages |
Flaws |
Time for development and design |
– low entry barrier, |
– there is no free version, for full-fledged work you need a subscription (from $25), – there is no web version (desktop only), – the commenting function is available only to the author. |
24 min. |
Result in Miro
Advantages |
Flaws |
Development time |
– low entry barrier,
|
— export with image distortion (for the free version), |
35 min. |
Result in Pencil
Advantages |
Flaws |
Development time |
– low entry barrier, |
— there are no complex elements within one library, |
35 min. |
Result in Balsamiq Wireframes
Advantages |
Flaws |
Development time |
– low entry threshold, – there is a search by element, – export without image distortion, – there are basic and complex components, – there are basic icons, – there are libraries with components (iOS, Android). |
— you cannot create a highly detailed wireframe (only paper-style elements), — there is no possibility of collaboration (in the free version), — there is no web version (desktop only).
|
24 min. |
Result in Excalidraw
Advantages |
Flaws |
Development time |
– low barrier to entry, – there is integration with Mermaid artificial intelligence, which allows you to create a diagram, workflow, flowchart based on a text description, – export without image distortion. |
– there are no basic interface elements and icons, – there are no libraries with components (there are only standard geometric shapes), – you cannot create a highly detailed wireframe (only paper style elements), – the multi-user mode is unstable (changes of other users are not always displayed in “online mode” “). |
21 min. |
Result in Lunacy
Advantages |
Flaws |
Development time |
– there are basic components and icons, – there are basic libraries (Apple, Windows, etc.), – export without image distortion, – you can create a highly detailed wireframe. |
— high barrier to entry (it’s difficult to understand where to start, you have to look for where the components are located), — there are no ready-made templates for complex elements, — complex search by element.
|
44 min. |
Evaluation Summary Table
Tool |
Time |
Ease of use |
Convenience |
Component Libraries |
Total score |
Axure RP |
24 min. |
4 |
5 |
5 |
14 |
Pencil Project |
35 min. |
5 |
4 |
4 |
13 |
Balsamiq Mockups |
24 min. |
5 |
5 |
4 |
14 |
Miro |
35 min. |
5 |
4 |
3 |
12 |
Excalidraw |
21 min. |
5 |
5 |
2 |
12 |
Lunacy |
44 min. |
3 |
4 |
5 |
12 |
From the analysis I will make some basic conclusions:
-
All instruments, except Lunacy, have a low entry barrier and can be easily used by an analyst for design. Choose depending on what visual result you want to get.
-
The promised “artificial intelligence” in Lunacy generates only texts, avatars, and helps remove backgrounds from pictures (which, in fact, has always been available in Figma through plugins). Some kind of “magic” with semi-automatic generation of wireframes will not happen.
-
Easiest to learn turned out to be Balsamiq Mockups, Excalidraw and Axure RP, but using the first 2 tools you can maximally design low-detailed wireframes in a “paper style”. If you need something more powerful, then it is better to pay attention to other tools.
-
Taken together, three criteria (ease of use, convenience and variety of libraries with components) turned out to be the best Axure RP and Balsamiq Mockups. Here it is worth keeping in mind that Axure RP does not have a free version for comfortable work and you must have a subscription.
-
Master Pencil Project and Miro was a little longer, but in the case of the Pencil Project this was due to the wide variety of possibilities available. Therefore, I recommend spending a little more time to master it, so that you can quickly design wireframes of varying detail.
Acknowledgment and Usage Notice
The editorial team at TechBurst Magazine acknowledges the invaluable contribution of the author of the original article that forms the foundation of our publication. We sincerely appreciate the author’s work. All images in this publication are sourced directly from the original article, where a reference to the author’s profile is provided as well. This publication respects the author’s rights and enhances the visibility of their original work. If there are any concerns or the author wishes to discuss this matter further, we welcome an open dialogue to address potential issues and find an amicable resolution. Feel free to contact us through the ‘Contact Us’ section; the link is available in the website footer.