Rebuilding a Diagram Around Real Users

Taking an inherited sign-up and registration diagram that treated every user the same, and rebuilding it into a set of focused user flows and a segmentation matrix the whole team could design from.

A sprawling FigJam flowchart titled “Family App - Account Login and Onboarding”. Dozens of small boxes and decision diamonds in purple, green, blue and pink spread across a single white canvas, connected by lines that double back on themselves, with a key in the top left and clusters of notes throughout. At this size no individual step is legible.

Role & Scope

A Verizon product team handed us a FigJam file mapping out the sign-up and registration process for the Family App. It was thorough in its own way, with every business rule and edge case documented, but it was not built to design from. The logic was written for engineers rather than user journeys, and it treated every person moving through the flow as the same type of user.

I worked on this closely with a design lead. We paired on calls to reason through the logic together, and split off to push the work forward between sessions before reconvening to work through what we had found. What follows is the shape of that shared effort, with a few moments that were mine to carry.

Together we turned that artifact into something the design team could actually work from. Over the course of the exercise we audited the diagram for assumptions, annotated it with questions and recommendations, identified the distinct types of users buried inside it, rebuilt their journeys as focused linear flows, and consolidated everything into a segmentation matrix that became the team's shared reference point. The result was not a set of screens. It was the clarity that made designing those screens possible.

Overview

  • Starting With What We Had
  • Auditing and Annotating
  • Finding the User Types
  • Rebuilding From the User's Point of View
  • Mapping It All in One Place

Starting With What We Had

The team received a single diagram outlining the full login and registration process. It combined several different use cases into one sprawling flow and mixed back-end processes together with customer-facing actions and screens. Everything lived on one canvas: every decision point, every business rule, every edge case, and every system step, all sharing the same space.

The intent behind it was good, and nothing was missing. But its comprehensiveness was exactly the problem. Because it tried to show everything at once, and made no distinction between what the system does and what a person experiences, it was nearly impossible to read as a user journey. Our goal was to use this diagram as the raw material for clean, single-purpose user flows. So before anyone could put a screen together, it had to be untangled.

A sprawling FigJam flowchart titled “Family App - Account Login and Onboarding”. Purple screen boxes, green decision diamonds, blue back-end boxes and pink error states spread across one white canvas, connected by lines that fold back on themselves and cross between rows. A key sits in the top left and clusters of sticky notes are scattered throughout. Several distinct journeys run through the same tangle of shapes with nothing separating them.
The inherited flow: every use case, business rule, and back-end process in one diagram.

Auditing and Annotating

The first real work was analysis. We went through the diagram end to end, identified the technical requirements embedded in it, and annotated it directly with questions, assumptions to confirm, and recommendations. Where the logic was ambiguous, we flagged it. Where the diagram conflated a back-end process with a customer-facing step, we marked the seam. Where a decision point raised a question only the product owner could answer, we called it out in place rather than guessing at an answer.

This annotation pass is where the disambiguation actually happened. It turned a static, engineer-oriented artifact into a working conversation: a version of the diagram that made its own gaps visible and gave the cross-functional team a concrete list of things to resolve. Once those notes were reviewed and incorporated, we had a revised diagram organized around our recommendations and ready to be broken apart into individual journeys.

The same sprawling flowchart, now covered in annotations. Blocks of red and blue text sit above and below the boxes they refer to, and sticky notes are attached throughout. The annotations are dense enough that they read as a second layer over the original diagram rather than as occasional remarks.
The same diagram after the annotation pass, with every question and recommendation attached to the step that raised it.
A close crop of the annotated flow. Purple screen boxes read Family App Welcome Screen, Family App Login Screen, Feature Tour, Create Verizon Individual Profile, and a step capturing an email address, password and secret question. Green diamonds ask “Learn More or Proceed?” and “Create Account or Sign In with IP?”. Around them, questions in red ask “Is this screen needed?”, “Could this also be welcome screen?” and “Who is the feature tour for? What value is it adding?”, while recommendations in blue note where an error state is wanted for invalid login credentials and for a recognised email, and ask how the app communicates what the customer is registering for. A blue sticky note raises whether existing customers could keep signing in with their old credentials before being migrated.
A closer look at sign-in and profile creation. Questions in red, recommendations in blue, each sitting on the step it belongs to.
A close crop from later in the annotated flow. Two purple boxes marked TBD cover checking email and entering a COPPA code, leading through a green “Valid COPPA Code?” diamond to an Account Created Notification, then to four blue boxes each labelled Backend: Sync Devices, Sync Subscriptions, Sync Family / Groups, and Sync Companion Products marked phase 2 to 4. Red annotations question whether email verification should be combined with COPPA consent, what happens for users who have already verified their email, and whether the sync steps are truly all back-end. A blue annotation suggests they would be back-end only when the user is accepting an invite to an existing family. Two sticky notes add a legal question about COPPA consent in app and a note preferring invite codes for external members.
Further along, the seam between what the system does and what a person sees. The four steps marked Backend are the ones that never belonged in a user journey.

Finding the User Types

With the diagram clarified, the distinct users hiding inside it became visible. What had looked like one universal path was actually several different journeys layered on top of each other, each belonging to a different kind of person entering the flow with a different starting context.

The users fell into three core categories based on their relationship to the service:

Non-Verizon customers.

People with no existing relationship, entering the flow fresh and needing to be established from scratch.

Current Verizon customers without Smart Family.

People already known to Verizon but new to this particular product, carrying some account context but not all of it.

Current Verizon customers with Smart Family.

People already inside the broader product ecosystem, arriving with the most context and the fewest steps left to complete.

Within those categories, finer distinctions mattered too. Several of them turned on Individual Profiles (IP), a Verizon initiative to give customers one set of sign-in credentials across every Verizon experience, replacing the older mix of mobile number, phone number, and email logins. Whether a person already had an IP linked to their Verizon service, had no IP set up yet, or was signing in through a temporary login with no email on file each led to a different path. Account role mattered as well, since an owner or manager could set up the family where a member could not, as did age and legal consent: for a product used by families, any flow involving minors had to account for COPPA and in-app consent. Naming these types was the pivot point of the whole exercise. Once we could say precisely who was moving through the flow, and what each of them did or did not walk in with, the single tangled diagram stopped being one impossible journey and became a manageable set of specific ones.

A user flow headed “User 1.1”, described as a non-Verizon customer and new user. A key across the top labels the shapes: customer facing screen in purple, decision in green, non customer facing back end in blue, back end check in dark purple, error state in pink, and two note colours. The flow runs left to right from BEGIN through the Family App welcome and login screens, a decision to create an account or sign in with an Individual Profile, creating and linking that profile, then checks on family account setup, account role, age, primary mobile number and COPPA code, ending at an account created notification. A pale yellow band traces the first-time account create path through it.
A user flow headed “User 1.1”, described as a non-Verizon customer and new user. A key across the top labels the shapes: customer facing screen in purple, decision in green, non customer facing back end in blue, back end check in dark purple, error state in pink, and two note colours. The flow runs left to right from BEGIN through the Family App welcome and login screens, a decision to create an account or sign in with an Individual Profile, creating and linking that profile, then checks on family account setup, account role, age, primary mobile number and COPPA code, ending at an account created notification. A pale yellow band traces the first-time account create path through it.

A new user with no existing Verizon relationship, established from scratch.

A new user with no existing Verizon relationship, established from scratch.
A user flow headed “User 2.1”, described as a current Verizon customer, new Family App customer, and account owner or manager whose Individual Profile is already linked to their Verizon service. It uses the same key and the same left-to-right structure as the other flows, with a pale yellow band tracing this user's path, and is shorter through the early steps because the profile already exists.
A user flow headed “User 2.1”, described as a current Verizon customer, new Family App customer, and account owner or manager whose Individual Profile is already linked to their Verizon service. It uses the same key and the same left-to-right structure as the other flows, with a pale yellow band tracing this user's path, and is shorter through the early steps because the profile already exists.

A current Verizon customer, new to the Family App, whose Individual Profile is already linked to their service.

A current Verizon customer, new to the Family App, whose Individual Profile is already linked to their service.
A user flow headed “User 2.2”, described as a current Verizon customer, new Family App customer, and account owner or manager who does not have an Individual Profile set up. Same key and structure as the others, with a pale yellow band tracing a path that includes the steps to create the profile this user is missing.
A user flow headed “User 2.2”, described as a current Verizon customer, new Family App customer, and account owner or manager who does not have an Individual Profile set up. Same key and structure as the others, with a pale yellow band tracing a path that includes the steps to create the profile this user is missing.

The same customer without an Individual Profile, which puts the steps to create one back into the path.

The same customer without an Individual Profile, which puts the steps to create one back into the path.
A user flow headed “User 3.1”, described as a current Family App, Smart Family customer. Same key and left-to-right structure as the other flows, with a pale yellow band tracing the shortest path of the six: this user arrives with the most already established.
A user flow headed “User 3.1”, described as a current Family App, Smart Family customer. Same key and left-to-right structure as the other flows, with a pale yellow band tracing the shortest path of the six: this user arrives with the most already established.

A current Smart Family customer, arriving with the most context and the fewest steps left.

A current Smart Family customer, arriving with the most context and the fewest steps left.
A user flow headed “User 3.2”, described as a current Family App, Smart Family customer who needs to migrate their family into the new format, with a noted assumption that the user has to agree to COPPA and legal consent and can provide it in the app. Same key and structure as the others, with a pale yellow band tracing a path that adds the migration and consent steps.
A user flow headed “User 3.2”, described as a current Family App, Smart Family customer who needs to migrate their family into the new format, with a noted assumption that the user has to agree to COPPA and legal consent and can provide it in the app. Same key and structure as the others, with a pale yellow band tracing a path that adds the migration and consent steps.

A Smart Family customer who also has to migrate their family into the new format, and consent in app.

A Smart Family customer who also has to migrate their family into the new format, and consent in app.
A user flow headed “User 3.3.1”, described as a current Family App, Smart Family customer signing in through a temporary account login with no email address associated. Same key and structure as the others, with a pale yellow band tracing a path that has to establish an email address before the rest can proceed.
A user flow headed “User 3.3.1”, described as a current Family App, Smart Family customer signing in through a temporary account login with no email address associated. Same key and structure as the others, with a pale yellow band tracing a path that has to establish an email address before the rest can proceed.

A Smart Family customer on a temporary login with no email on file, which has to be established first.

A Smart Family customer on a temporary login with no email on file, which has to be established first.

Rebuilding From the User's Point of View

For each user type, we traced the path that person would actually take and rebuilt it as its own focused linear flow, moving it through a clear sequence of stages. We started from the product team's original flowchart, simplified it, removed the back-end checks so that system logic no longer sat on top of the human experience, and then layered in our design recommendations. Separating what the system does from what a person sees was the pivotal move: once the machine steps were pulled out, each flow collapsed into a clean, legible sequence of what one real person experiences, step by step. A lot of this was heads-down work: I would take a stretch of the flows on my own, then bring them back to talk through and refine together.

That staged progression became the way we presented the work back to the client, organized around the three use cases we ultimately focused on: a non-Verizon customer, a current Verizon customer without Smart Family, and a current Smart Family customer. Shown together, each one moving left to right from the raw product-team flowchart to a design-ready recommendation, the transformation was impossible to miss.

A grid on a black background, four columns across and three rows down. The columns are headed Product Team Flowchart, Flowchart - Simplified, Removed Backend Checks, and Design Recommendations. The rows are labelled Non-Verizon Customer, Current Verizon, Non-Smart Family Customer, and Current Verizon, Smart Family Customer. Each cell holds a miniature flow diagram in red and green on black. Read left to right, every row visibly thins out: the dense first cell loses its stacked branches, then its dashed back-end steps, until the last cell is a single legible line of steps.
Three use cases down, four stages across. Every row gets simpler from left to right, which was the argument.

Some of these flows depended on questions the client had not yet answered. Rather than stall while we waited, we flagged each open assumption and identified the delta that its answer would create. If the Family App could not own the create-IP experience, that implied one path; if it could, another. If a given user had to provide COPPA and legal consent in-app, that added a step; if not, it did not. Working through these branches was an exercise in thoroughness rather than a second round of design: the point was to surface every way an unconfirmed assumption could resolve, so the team stayed unblocked and no eventual answer from the client would catch us unprepared.

Where there had been one diagram that tried to serve everyone and served no one clearly, there was now a set of purpose-built journeys, each one simple enough to hand to a designer and start building against. The complexity had not disappeared. It had been sorted.

A flow on a black canvas, labelled “3.2 - Current Smart Family customer, Sign in and set up”, with a key marking screens as red boxes, decisions as green diamonds, and customer-facing steps by solid outlines against dashed ones for back end. Three bands of steps sit at different heights: a main line from Start through the welcome and login screens and a decision to create an account or sign in, into dashed back-end steps retrieving account details and checking whether the family account is set up, ending at the app dashboard; a second line running through account role, COPPA compliance, email checks and code validation to an account created; and a detached row of further steps covering name, age, adult check, primary mobile number and one-time passcodes.
A flow on a black canvas, labelled “3.2 - Current Smart Family customer, Sign in and set up”, with a key marking screens as red boxes, decisions as green diamonds, and customer-facing steps by solid outlines against dashed ones for back end. Three bands of steps sit at different heights: a main line from Start through the welcome and login screens and a decision to create an account or sign in, into dashed back-end steps retrieving account details and checking whether the family account is set up, ending at the app dashboard; a second line running through account role, COPPA compliance, email checks and code validation to an account created; and a detached row of further steps covering name, age, adult check, primary mobile number and one-time passcodes.

Product Team Flowchart. The Smart Family customer's path as inherited, with system steps and human steps interleaved across three disconnected bands.

Product Team Flowchart. The Smart Family customer's path as inherited, with system steps and human steps interleaved across three disconnected bands.
The same flow with the detached row of extra steps gone and the back-end steps dimmed to grey. What remains is two connected lines: the main path from Start to the family account check, and the branch beneath it running through account role, COPPA compliance and code validation to an account created.
The same flow with the detached row of extra steps gone and the back-end steps dimmed to grey. What remains is two connected lines: the main path from Start to the family account check, and the branch beneath it running through account role, COPPA compliance and code validation to an account created.

Flowchart Simplified. The stray branches folded in and the back-end steps dimmed, ready to be pulled out.

Flowchart Simplified. The stray branches folded in and the back-end steps dimmed, ready to be pulled out.
The same flow reduced to a single horizontal line of six steps: Start, the Family App welcome and login screen, a decision to create an account or sign in with an Individual Profile, COPPA compliance, checking email, validating the COPPA code, and the family app account created. Every dashed back-end step is gone and the canvas is otherwise empty.
The same flow reduced to a single horizontal line of six steps: Start, the Family App welcome and login screen, a decision to create an account or sign in with an Individual Profile, COPPA compliance, checking email, validating the COPPA code, and the family app account created. Every dashed back-end step is gone and the canvas is otherwise empty.

Removed Backend Checks. With the machine steps taken out, one person's experience is six steps on one line.

Removed Backend Checks. With the machine steps taken out, one person's experience is six steps on one line.
The same user's flow rebuilt as two labelled paths, “Login without adding an email address” and “Verifies email address”, each running left to right from Start to a created account, differing at a decision offering to add an email address or do it later. A column of notes down the left side records the open questions behind them, including whether a migration would happen outside the Family App and how to tell if an existing account already has a verified email.
The same user's flow rebuilt as two labelled paths, “Login without adding an email address” and “Verifies email address”, each running left to right from Start to a created account, differing at a decision offering to add an email address or do it later. A column of notes down the left side records the open questions behind them, including whether a migration would happen outside the Family App and how to tell if an existing account already has a verified email.

Design Recommendations. The two paths the flow resolves into, with the assumptions each one rests on written down beside them.

Design Recommendations. The two paths the flow resolves into, with the assumptions each one rests on written down beside them.

Mapping It All in One Place

The final artifact tied everything together. To keep track of users with different qualifications, we built a segmentation matrix that laid out each user type against the conditions that defined it: billing and account-based role, individual profile dependencies like IP status and primary line, Family App purchase and account status, and legal requirements such as age. For each segment, the matrix also captured what was known about the person after sign-in and what information they still needed to provide.

The matrix was a living document. As the client answered our open questions, some of the scenarios we had accounted for turned out not to be needed, and the set of segments tightened to the ones that remained in scope. This is why the focused flows and the final matrix do not line up one to one: the flows covered every case we had identified, including provisional ones, while the matrix tracked what survived once the requirements settled. That narrowing was not a loose end; it was the method working as intended. The matrix became the shared reference for who we were designing for and what each of them walked in with, turning a set of individual flows into a single, queryable source of truth.

A wide table headed “User Segments”, subtitled “User qualifications at beginning of designated user flows”. Its columns are grouped under coloured bands: Billing Dependencies, Individual Profile Dependencies, Family App Dependencies, and Legal, covering service provider, account-based role, IP status, whether the IP is linked to Verizon service, primary mobile number, profile-centric role, Family App purchase status, family account status, and being over eighteen. Two further columns record what is known about the person after sign-in and what registration information they still have to provide. Eight rows run down the side, one per segment: a non-Verizon customer, four current Verizon non-Smart Family customers, and three current Verizon Smart Family customers. Each cell holds a green tick, a boxed cross, or a short note, and a Notes column at the right carries the assumptions behind particular rows.
A wide table headed “User Segments”, subtitled “User qualifications at beginning of designated user flows”. Its columns are grouped under coloured bands: Billing Dependencies, Individual Profile Dependencies, Family App Dependencies, and Legal, covering service provider, account-based role, IP status, whether the IP is linked to Verizon service, primary mobile number, profile-centric role, Family App purchase status, family account status, and being over eighteen. Two further columns record what is known about the person after sign-in and what registration information they still have to provide. Eight rows run down the side, one per segment: a non-Verizon customer, four current Verizon non-Smart Family customers, and three current Verizon Smart Family customers. Each cell holds a green tick, a boxed cross, or a short note, and a Notes column at the right carries the assumptions behind particular rows.

The segmentation matrix. Each row is a user type, each column a condition that defines it, and the last columns are what they walk in with against what they still have to give.

The segmentation matrix. Each row is a user type, each column a condition that defines it, and the last columns are what they walk in with against what they still have to give.

Impact & Learnings

With the flows segmented and the matrix in place, the team had a shared reference point for the first time. Design work on individual screens could finally begin without every decision turning into a debate about whose version of the user we were designing for. The ambiguity that had been blocking the work was gone, replaced by a structure everyone could point to.

This project was a reminder that not all design work produces a screen. Sometimes the most valuable thing you can deliver is clarity: a way of seeing a problem that lets everyone else move. Taking an artifact built for machines and rebuilding it around real people was, in the end, the whole job. It sharpened how I think about the space between a business requirement and a user experience, and it reinforced that untangling that space is often where a designer adds the most value, well before a single screen is drawn.

Back to top