Combining User Flows with Elegant Designs | Lucidchart Blog
Skip to main content

This is a two-part story about how Mozilla uses Lucidchart to keep product managers, UX designers, and developers in sync. Make sure to check out part two for more on product development!

Mozilla logo

Mozilla—a company you’ll likely recognize from its web browser, Firefox—develops open-source software to make the Internet safe and accessible to all. And, as it turns out, creating a space where people feel empowered to learn, create, and collaborate takes an extraordinary act of collaboration.

To achieve the company’s mission, product managers, designers, and developers all need to work together, even from different parts of the globe. Across multiple teams, Lucidchart helps Mozilla employees map out applications completely and easily. The web-based diagramming tool saves time and creates a shared understanding amongst the team before they press forward to build powerful software for a powerful Internet experience.

Illustrate an entire workflow

It all started when Ryan Feeley and John Gruen, both UX designers at the time, worked on Firefox Sync, which synchronizes bookmarks, browsing history, add-ons, and other information across multiple devices. The feature had been around for a while, but it was tricky for users to set up, so Ryan and John planned to design a simple username and password flow.

These designers wanted to keep everyone up to date as these changes happened; however, the inner workings of an application like this one become complex and involve multiple potential states. One screen won’t capture the application in its entirety.

And to top it off, Ryan worked in Toronto, and John worked in New York. To design this new workflow, they would need a way to communicate remotely.

So Ryan turned to Lucidchart. Using this tool, he and John could create user flow diagrams on unlimited canvas space to show all possible flows of the application. Because Lucidchart exists in the cloud, Ryan and John could both work on the diagram simultaneously. They could then share this diagram with developers and nail down the user flow before they started the final visual design.

Lucidchart includes all the shapes in the standard visual vocabulary that Ryan and John use—diamonds for decision points, dotted lines for conditionals, circles for concurrent actions, etc.—so these user flows are easy to read and understand. When he wants to “get really fancy,” Ryan has turned to other features, including links.

Minimizing duplicate design artifacts and duplicate work

Ryan discovered that Lucidchart, combined with the file-sharing service Dropbox, could solve another issue that he and John experienced as UX designers. Designers publish their work for different groups in different forms, including user flow diagrams, interactive wireframes, high-fidelity mockups, and usable graphic assets. In this instance, Ryan didn’t want to overwhelm the rest of the Firefox Sync team with the full UX documentation he gives the developers.

Having multiple versions of the same design creates an issue because design artifacts become out of date so quickly. Say a designer wants to include a low-fidelity mockup as part of a user flow diagram. The designer would not only spend extra time recreating that design, but he would also need to update the diagram as the design changes or leave the diagram inaccurate.

To reduce duplicate artifacts, Ryan and John developed a new workflow: they created a Dropbox folder filled with high-fidelity mockups and then linked specific stages of the Lucidchart user flow diagram to those files. If Mozilla employees wanted to see exactly what a user would see at a certain point in the flow, it was accessible in a single click.

user flow diagram with graphics in Dropbox

Want to make your own user flows? Try out user flow diagram template.

This routine ended up as a win for developers as well. A developer could work from the same artifact for weeks—the fewer artifacts they receive, the better. At the same time, the UX designers could keep working on and modifying their designs. With the Lucidchart and Dropbox combination, the developers received one diagram, one resource, and Ryan and John could update the mockups in Dropbox. Having the right artifacts all in the same place equaled less confusion.

Saving time with low-fidelity mockups

Later, Ryan realized that the developers didn’t need a pixel-perfect design from his user flow diagrams because Mozilla has established its visual standards so well. He just needed to show the basics, and the developers could match the design from other parts of the website. So how much of the low-fidelity design could Ryan accomplish within Lucidchart?

Ryan imported Firefox logos and Mozilla’s standard font of choice and saved time by creating impressive low-fidelity mockups right within the editor.

Password Playground user flow

email funnel user flow

Click either diagram to take a closer look.

The mockups combined with user flows give developers a clear picture of how the application should look and how it should function. Ryan explained that his team even uses his user flow diagrams to train new members. “Maintaining these diagrams helps people come up to speed with the way the system works.”

If you work in UX design, you too can use Lucidchart to keep your latest designs in one spot and clarify what the developers on your team need to build.

Sign up for your free account today!