How Online Collaboration Tools Boost Team Performance

According to Gartner, 30% of companies say that by 2020 their greatest competitive advantage will be the ability to exploit digital technologies. As organizations navigate this digital transformation – and adopt agile processes – they need software that helps their teams create and collaborate seamlessly.

Last year saw a flood of new online collaboration tools, but their focus on specificity and specialization has created as much chaos as they promised to eliminate.

That’s where Moqups’ all-in-one approach has an advantage. By bringing whiteboard, diagram, and design features together within a single, online app, Moqups puts your company’s teams together on the same page – literally.

Using an all-in-one visual collaboration platform like Moqups can transform your team’s workflow, boost organizational efficiency, and help your company thrive in a fully digital – and visual – world. Here are three research-backed reasons why.

1. Bridging Information Silos With Online Team Collaboration

Despite the proliferation of new online collaboration software, businesses are still incredibly siloed. Worldwide, 39% of employees say their coworkers don’t collaborate enough. 

This kind of isolation can have a devastating effect on organizations. When departments or divisions work in silos, they develop tunnel vision – and lose sight of the larger corporate strategy and priorities. The end result is wasted time, duplicated work, and costly mistakes. Frustrations mount, collegiality breaks down, and momentum is lost.

That’s why 75% of employers rate teamwork and collaboration as “very important”. They understand that collaboration increases transparency and morale. And that, in turn, fuels more engagement, consensus, and productivity. Companies that promote collaboration are 5x more likely to be characterized as high performing. 

But teams are much more likely to remain in their silos when they work with disparate tools – and communicate with different professional idioms. Moqups solves that problem by giving teams a shared visual space to think, plan, and collaborate together. This way, all voices get heard, and all stakeholders – not just designers – can shape and share ideas.

Business analysts, product managers, and IT consultants can make visual risk and SWOT analyses, use case diagrams, and business model canvases. Executives can build organizational charts and product planning roadmaps. Project managers and UX designers can create flowchart diagrams, wireframes, mockups, and prototypes.

Moqups’ all-in-one solution lets team members visualize requirements, clarify specifications, and produce a wide variety of foundational artifacts and documentation for any kind of project. 

2. Reducing Information Search Costs Within Organizations

Employees waste an inordinate amount of time chasing data and documentation through an elaborate labyrinth of repositories: Email, Slack, Google Drive, Github, Trello, and any number of whiteboarding, design, and prototyping apps. The majority (61%) of employees regularly access four or more systems and nearly one-sixth of them regularly access 11 or more. 

On average, it takes workers eight searches to locate the right document, and 44% of the time, they can’t even find the information they were looking for! As a result, workers spend 36% of their day just trying to track down and consolidate information. 

And it’s no wonder why. Visual documentation is often spread across a multitude of highly specialized apps – each targeted at a specific niche or use case. But these kinds of specialized tools – which lack interoperability – increase the information search costs for organizations. And their complexity and steep learning curve limit stakeholder participation and discourage collaboration.

Moqups, on the other hand, offers a unified team collaboration tool that bundles together the best of these features within one app – and provides teams with a clear source of truth. Wireframes, prototypes, flowcharts, mind maps, and moodboards can all live together in a single repository, drastically reducing information search time and cost. 

Adhering to the 80/20 rule, Moqups provides all the features you need, and none that you don’t. And its UI is both lightweight and accessible – so your entire team can skip the learning curve, find the documents they need, and get right to work.

3. Giving Due Recognition for Online Team Collaboration

Feeling recognized and appreciated are fundamental human needs. Yet an astounding 82% of US workers don’t feel that their supervisors give them sufficient credit for their contributions. As a result, employee engagement and motivation dissipate.

But when teams create on a myriad of platforms, it becomes difficult for their work to gain visibility. It can be challenging for senior-level managers to track down and access projects – especially if they’re not involved in production. As a result, too much work happens behind the scenes, without an opportunity to assess individual contribution, and reward achievement.

Moqups enables managers to pull back the curtain and gain insights into how team members have contributed at every stage of development. With Moqups, employee work is online, centralized within a single online collaboration tool, and easy to access through a clear and simple interface. That means that managers can easily monitor the entire lifecycle of a project, from concept to creation, and discover the hidden work – and heroes – that deserve recognition.

A Call for an All-In-One Visual Collaboration Platform 

Online collaboration tools have traditionally been the exclusive domain of designers, due in large part to their complexity, and the steep learning curve involved. Moqups offers the first-of-its-kind platform that empowers all members of an organization to leverage the power of visual content. In doing so, it helps to solve the most crippling problems confronting today’s organizations – information silos, steep information search costs, and inadequate recognition. The result is a fully engaged and empowered workforce that is primed to thrive.

To Wireframes and Beyond!

Helping teams create mockups is at the core of our mission. After all, it’s where we started – and how we got our name! But since we launched in 2012, Moqups has evolved to become much more than a wireframing tool.

We’ve added diagramming, prototyping, whiteboarding, charting, annotation, and commenting because we understand – and our users have shown us – that wireframing doesn’t happen in a silo.

For teams to wireframe effectively, they first need to research, strategize, and map out user flows. And once the wireframes are done, they still require high fidelity mockups and interactive prototypes for both pitching and testing.

All of this, before the designers and developers take over, is what we like to call ‘foundational’ work. It isn’t always pretty – and it can often be bafflingly complicated – but good thinking and planning results in a smoother, less expensive process – and a better final product.

And during this foundational stage, visual communication and collaboration is vital. Good, fast, sustainable decisions come from hearing all voices, checking requirements at the right time, and building genuine consensus before moving forward.

And that means having a single, accessible platform where every member of the team can contribute, suggest, revise and verify. An app that works with your team, not against them.

Last week, we passed our 1,500,000 user mark, and Moqups is now the first stop for product managers, business analysts, UX professionals, executives, and all kinds of cross-functional teams working on complex projects.

But if you are a UX designer, don’t fear! We’re not about to leave wireframing behind. We just want our users to be able to use Moqups in their larger research, planning, design and development process.

For instance, although we’re listed as one of the ‘Leaders’ on G2’s Grid® for Wireframing, our reviewers talk about the benefits of a platform that lets them go beyond just wireframing:

One of the most important things while in the early stage is the flow chart. With Moqups, I can do flowcharts and wireframes and sitemaps all in one project, which is awesome for managing.  

Celeste T.

This kind of feedback is great encouragement for us as we build up Moqups’ functionality. We know that there are lots of ways into a project – through competitor research, moodboards, sitemaps, user flows – and, yes, through wireframes! With Moqups, you really can begin anywhere.

Still, nothing quite beats wireframing for getting an idea out of your head and onto the page!

And, if you are new to wireframing itself, and want a clear, concise primer to get you going, check out Bridget Poetker’s article at G2, What Is a Wireframe? (+How to Create One in 5 Simple Steps). It’s a terrific starting point!

Try Moqups now for free →

 

What’s New: June 10, 2019

New Features:

  • You can now both color and highlight any selection of text – individual characters, words, or whole paragraphs – directly from the Quick-Format Text toolbar, making it easier for teams to write and edit content directly on the page.
  • The Stencil Library’s new ‘Callouts & Annotations’ category includes the versatile Callout, as well as newly added Bracket, Speech Bubble, and Thought Bubble stencils. All the annotation stencils are now sticky by default, and can be attached to any object. Drag the tail on to the object and release when you see the orange frame. If you don’t want annotations to stick, just toggle from ‘Sticky’ to ‘Normal’ in the Format Panel.
  • Users with project links can now request access if they have not already been granted permission.

Improvements:

  • Charts now display all the ‘Chart Type’ buttons directly in the popover toolbar so you can quickly experiment, and then pick the visualization that best suits your data – no matter which chart you originally chose.
  • You can now more easily select objects and edit their text within nested Components.

Bug Fixes:

  • Fixed a bug that prevented the Linear Gradient’s circular slider from rotating to 0 degrees.
  • When moving Custom Guides, the tooltip now displays coordinates as whole numbers – not fractions.
  • Object handles (for rounded corners, stars, polygons, etc.) now work with touch-based devices.

Speed Up Your Process With Components

With the introduction of Components, you can now create reusable elements that instantly sync across all instances of that element within your Moqups project.

1 Components_Intro

Turn any single object or group into a Component, and all copies of that element will automatically inherit any changes made to the original. This way, your team can apply quick, consistent updates within projects, and avoid the tedium of reformatting over and over – one object at a time.

By making it easier to tweak elements throughout a project, Components encourage teams to experiment freely, iterate and test more often, and accelerate the overall design and development process.

Components are particularly useful when creating and maintaining frequently repeated UI elements like headers, footers, logos, icons, modals, and device or platform-specific templates.

And the best thing about using components as a foundation tool, is that they have a cumulative effect; over time, the more components you add, and the more you nest instances, the faster and more efficient your future execution becomes.

2 Components_Overview

That’s why components – sometimes named ‘symbols’ – have become such an essential tool for building design systems. But you don’t have to be working within a comprehensive design system to take advantage of components’ power. They can smooth and speed any type of workflow – on any kind of project!

You may have already noticed the new Components button in our top-toolbar. You’ll find all of the Component and Instance controls there, and in the Component section of the right-click Context Menu. Let’s take a look at how they work:

Creating Components and Instances

Once you turn an object or group into a Component, it acts as a master to any and all copies – or Instances – that are made from that component.

That means that any formatting you apply to the Component is immediately reflected by every Instance in the project.

However, for maximum flexibility, instances remain independent of the component in their Coordinates (including Flip and Rotate), and Visibility. This means you can relocate or hide components without affecting the position or visibility of their instances.

To create a Component:

  1. Select any object or group on the page.
  2. From the Component button in the Top Toolbar, or the Component section of the right-click Context Menu, choose Create Component.
  3. Once created and selected, Components are identifiable by their orange ‘Component’ label, badge and frame; in the Outline panel, they are identified by an orange highlight.

3 Components_Create

To create an Instance:

  1. Make a copy of the Component using Ctrl/Cmd  + D, the Duplicate option in the Context menu, or simply hold down Alt/Option and drag.
  2. You can paste the Instance to any page within the project
  3. Now, change the size, text, color, or other formatting attributes of the Component
  4. Once the changes are complete, click outside the Component’s object-frame – and watch the changes propagate to all Instances within the project.

4 Components_Instance

Editing and Adding New Objects

Components and Instances – even those made from single objects – behave like groups. To edit any component or instance:

  1. Select it so you see the orange Object-Frame.
  2. Then, double-click so the thicker Component Edit Border appears in orange.
  3. Now, you can…
      • Click through to edit
      • Add a new element from the left-sidebar
      • Copy and paste an object in from the page itself

5 Components_Add_Object

Applying Overrides to an Instance

Sometimes, you may want to customize part of an individual instance, yet still leave it connected and responsive to its component for other changes and updates. For example, you might want to change at CTA’s color on a specific page, but still want that button to sync with its master for any future changes in size and text.

That’s why any changes made locally, to any individual instance overrides the component’s ability to change that specific formatting attribute (text, color, blur, rounded corners) in the future.

6 Components_Overide

And any overrides applied locally will have no effect on other instances, or the original Component itself. This allows your team to be consistent in design, but still responsive to the particular context of each instance.

Detaching and Resetting an Instance

If you’ve made local modifications to an individual instance, but then want to remove those overrides and re-apply the full style and properties of the component, select Reset Instance.

7 Components_Detach

And, if you want to turn an instance back into a normal object or group, just select Detach Instance.

8 Components_Reset

Locating and Restoring Components

You can leave individual Components in the context of a design, or create a separate project page where all your components can live – and then pin that page to the top of the Pages Panel.

And, if you’re working with an instance, and need to check or tweak the component itself, just click on the instance and select Go to Component from the menu. No matter where the instance is, you’ll jump immediately to its Component’s location within the project.

9 Components_Goto

If, for some reason, you delete a Component, and leave orphaned instances behind, just select any instance and choose the Restore Component option – and the component will magically reappear! Note that this works even for instances with overrides – you’ll still get the original component back.

10 Components_Restore

Components can help reduce errors, ensure consistency and, most importantly, save time by freeing your team from the tedious, repetitive work of updating and reformatting.

As always, we want to hear your feedback, so we can continue to improve your experience. So, please send us your feedback and suggestions at support@moqups.com .

What’s New: May 13, 2019

New Features

  • A Welcome Screen now greets new users and offers the option of starting from a selection of templates or from a blank page.
  • Charts:
    • Our New Funnel chart is great for visualizing website conversions, sales pipelines, customer retention, and PPC promotional campaigns.
    • When you select a chart on the page, new buttons let you quickly ‘Edit Data & Color’ or ‘Change Chart Type’.
    • You can now show value labels on the chart itself; you’ll find this option in Format > Chart Style > Plot.
    • You can also choose to render values as percentages, as part of the Plot options
    • We’ve improved the representation of negative values in stacked charts.
    • And we added digit-group separators to make large value numbers easier to read.

Improvements

  • In both the Image and Templates libraries, searches now include the names of folders.
  • When you export a single page to PNG, you now have the option of opening the exported file in a new tab.
  • We’ve improved the behavior of nested components after overrides and during reset.
  • The names of image-objects on the page are now reflected in both the Outline Panel and Format tab.
  • Double-clicking on the Rotation handle now quickly resets the Rotation Angle to ‘0’.

Bug Fixes

  • Object interactions are now preserved when you copy/paste, cut/paste, or duplicate an object.
  • Fixed a bug that caused the color picker from the ‘Replace Colors’ section to get stuck and linger on the page.
  • The automatic saving of Interactions is now more reliable.
  • In the Sharing window, we fixed a bug that mistakenly displayed the ‘Remove Collaborator’ option for Team Members.
  • Fixed a bug that caused the canvas to malfunction if, before login or sign-up, you selected ‘Show page thumbnails on hover’ option in Workspace > Advanced Settings.
  • Copying and pasting Components between projects now works more reliably.
  • When creating an Instance, and then nesting it within the original component, the instance is now correctly identified in the Outline Panel.
  • Fixed a bug that made the Preview button in the Moqups Main Menu inoperative.
  • The ‘New project’ pop-up modal now has the correct Team pre-selected when you create a project from the Dashboard.
  • In the Pages Panel top toolbar, we disabled the ‘Create a new folder’ button during searches.
  • Fixed a bug that prevented Interactions from functioning on unsaved projects during Preview.

What’s New: March 18, 2019

New Features:

  • Live Collaborator Cursors: We’ve made it even easier for your team to create and edit in real time by expanding Collaborator Presence to include both object selections and live cursors. Now, you can coordinate your work seamlessly by seeing who’s doing what and where. You can choose to show or hide ‘Collaborator cursors’ and ‘Collaborator selections’ in the Workspace menu.

Improvements:

  • When you select ‘Create hotspot’, the ‘Show hotspots’ option is now automatically enabled.

Bug Fixes:

  • Components:
    • Better experience of Components in the Outline Panel.
    • More consistent behavior of groups within a Component.
    • The ‘Arrange’ function now works with Components.
  • Hotspots:
    • ‘Show hotspots’ now works reliably in Safari.
    • Fixed a bug that caused Hotspots to be repositioned – away from their associated stencils – when switching to View mode.
  • Gradients:
    • Fixed a bug that caused the Color Stops to appear on the Color Field instead of on the Gradient Slider.
    • Fixed a bug that caused Gradient opacity to malfunction in Safari.
  • For the ‘Export selection’ option of the Context Menu, fixed a bug that caused a selection of multiple object to be exported as a group – instead of being exported as separate PNG files.
  • Importing Templates and Template bundles from our ‘Create’ pages – accessible through the ‘Use Cases’ link on our Landing Page – is now bug-free.
  • When you reposition a Comment, its new location is now reflected on the collaborators’ canvases as well.
  • On Combo Box stencils, the dropdown arrow is no longer affected by Stroke styling.
  • Removed an error alert that appeared if you added collaborators in excess of the Free plan’s quota.
  • Fixed a bug that made it difficult to collaboratively edit groups of objects in real time.

Go Further and Faster With Diagrams

When Moqups launched Diagrams in the summer of 2016, we knew our users were hungry for that functionality. At the time, we explained our rationale in both a short illustrated fable and a blog post:

Diagramming was once a tool used primarily by System Architects and Business Analysts. But now, almost every kind of project begins with someone – or some team being tasked with creating diagrams.

But since then, we’ve been amazed at how consistently our customers have incorporated diagrams into their Moqups workflow. In turn, we’ve been busy improving and refining the diagramming experience.

If you are a regular reader of our What’s New posts, you’ll have noticed a lot of diagramming releases over the last couple months. A lot of these new features help take the ‘grunt’ out of work – so you can diagram faster and smoother. Here’s a quick overview of our latest improvements:

UML Class, Use Case & ERD Stencils and Notation

Lots of teams turn to Moqups for diagramming because complicated, expertise-specific software tends to discourage collaboration and experimentation. As a result, our goal has been to make it possible for all kinds of stakeholders to skip the learning curve and get right to work.

At the same time, we also know that our high-end users want to stay within Moqups’ creative context when they diagram. And they want rigorous professional capability. That’s why we’ve added new UML Class, Use Case, and ERD Model sections to our Stencil Library, and have added a full range of Crow’s Foot start-and-end markers for diagram connectors.

Diagram Extenders

This is a huge workflow accelerator! When you’re mapping out ideas, it’s distracting to keep going back to the Stencils Panel to add to your flowchart. Now, you don’t have to. Selecting Flowchart Diagram, UML, or ERD Model stencils on the page will reveal arrows on all four sides of those objects. One click on any arrow will automatically duplicate the object, connect the two, and open text-edit mode so you can quickly name the new object.

When there’s an object immediately adjacent from the one you are ‘extending’, clicking the extenders will automatically connect those two objects. And, as you add new stencils to your diagram, the page automatically scrolls to the end of that flow.

For lightning-fast work, there’s also a keystroke: Shift + Alt/Option + Arrow keys will quickly add and connect objects.

Replace Flowchart Stencils

We all know the drill: You finally have everything styled and perfectly in place. But suddenly, the requirements have changed, and now you have to update a bunch of the flowchart symbols you’ve used in your diagram. This is the kind of repetitive work that’s tiring, and can easily make polished work messy again.

Previously, you would have had to delete the bad stencil, drag in the new one, style it to match, attach its connectors, and wiggle it into position.

Now, you just drag a new stencil over one on the page, and drop when the ‘replace’ icon appears!

Swap Start & End Markers

This little keystroke makes it easy to change the direction of your relationships, or reverse your flow: Hold down Shift + X to reverse the start and end markers of any connector. That should be easy to remember since it’s the same keystroke that reverses the Fill and Stroke style when an object is selected.

Refined Connector Styling

We’ve made a couple of significant improvements that make it quicker and easier to style Diagram connectors.

The first is that your connector’s default style now adapts to your most recent choices. In other words, when you style a connector, any subsequent connector you create will automatically adopt that style – until you change it again.

We’ve also made it easier to retroactively style connectors. Previously, if you wanted to mass-style connectors already on the page, you had to select and change them individually; now, you can select a group of connectors – and customize them all at once in the ‘Connector Style’ section of the Format Panel.

Improved Snapping

This is a small but beautiful detail for the alignment-obsessed: Snapping now works to the center of objects as well as to their edges, making it quicker and easier to align objects. This global improvement is especially useful when you’re laying out flowcharts and diagrams in staggered formations.  

Finally, if you’re an avid user of our Diagram feature, we want to hear from you about your experience, suggestions, or advice. Write us at support@moqups.com, or just leave us a comment below!