fbpx logo-new mail facebook Dribble Social Icon Linkedin Social Icon Twitter Social Icon Github Social Icon Instagram Social Icon Arrow_element diagonal-decor rectangle-decor search arrow circle-flat

Go with the Flow: How to Leverage User Flow Diagrams for a Cross-Disciplinary Team

Lin Lin Design Manager

At Tandem, we believe design should be centered around the people using the product. This is especially true with our work on MIRS, the MEPCOM (Military Entrance Processing Command) Integrated Resource System. It’s a software system used to track military applicants during their enlistment process and houses applicants’ aptitude tests, medical exams, pre-enlistment interviews, background checks, and more.

Working on this project, I realized that our user-centered approach can be applied to the ideation process with developers. The devs were consistently trying to solve for all scenarios, making it difficult for the design team to break down and work on design flows in bite-size chunks.

We started with one scenario, keeping in mind the golden rule of designing for the 80% but accounting for the other 20%. Designs should always be optimized for the majority scenario, but also need solutions for those not-so-happy paths.

Diving into the other 20% (or trying to solve 100%!) can bring up all the ‘what if’ questions and while important, these questions can dominate the conversation and bring up extremely unlikely scenarios. It can feel like a black hole! The most important thing is that we try our best to accommodate for all scenarios. Empathy is key, for each other as we work together and for the user who will be interacting with the product — which is why user flows were so helpful during this process.

In my experience, here are three benefits of creating a user flow when working on a cross-disciplinary team:

Provides constraints and boundaries

I think developers do a great job of thinking of different situations when working on a software project. While it’s wonderful to think of various scenarios the user could encounter, sometimes all the ‘what-ifs’ make it hard for designers to grasp the experience. Creating this user flow provided helpful constraints and boundaries to work within while considering the technical constraints of the problem and the user journey.

In the beginning, the developers’ minds were zooming ahead trying to solve problems that haven’t yet arisen. Together, the design and development teams worked to define three very specific scenarios and user flows for each. It helped all of us get on the same page and parse out the unnecessary.

We organized the three specific scenarios from most ideal to least ideal, using the colors green, yellow, and red. The green user flow is the happy path — the fingerprint scanner successfully captures the applicant’s fingerprints and stores them in the database.

The less-successful path (yellow path) is where the applicant’s fingerprints already exist in the system and the MEPCOM employee needs to resolve the duplicate entry.

The least ideal path (red path) is where the applicant’s fingerprints are already in the system, but unfortunately do not match the name or Social Security Number they’ve provided.

There are bound to be forks in the road with all three scenarios, but defining them helped establish boundaries to work within. What does the MEPCOM employee have to do? What does the applicant have to do in each situation? Asking these questions guided the interaction design decisions within each step, and the technology to build it.

Provides common ground

Creating the three specific user flows provided common ground for everyone on the project. There is now common terminology for the team to use, as each flow has a name for everyone to refer to.

With the developers and designers collaborating to create the user flow, everyone was now using the same vocabulary. The flows we created in Figma not only made it readable for those working directly on the project but also made it possible for business stakeholders to sign off on our approach for each scenario.

Sets up the space for working with empathy

The user flows helped everyone on the team understand what a MEPCOM employee needs to do to capture a fingerprint for an applicant. But most importantly, it got everyone ideating with empathy in mind.

All team members could step into the user’s shoes — what are some potential UX and technological issues here? How can we create an experience that accommodates a large number of applicants? Are we missing any steps?

Day-to-day, developers and designers are working behind a screen — we aren’t physically present at the MEPS locations across the country. These user flows are a tool that allows us to imagine what the MEPCOM employee’s days are like without being there in person, efficiently bringing empathy into the process.

Ultimately, user flows are one of the many UX tools that allow us to organize our thoughts, create common understanding, and communicate with various stakeholders. Working on MEPCOM, the user flows helped the developers and designers channel their great thinking while considering technical constraints. Making these maps part of a project kickoff gets everyone involved, which sets up a cross-disciplinary team for success.

Not sure where to begin with a cross-disciplinary team? Contact us!

Let’s do something great together

We do our best work in close collaboration with our clients. Let’s find some time for you to chat with a member of our team.

Say Hi