Create & Edit Records UX flow examples

Stripe: Create customerClick Add customer, fill form sections, submit to create new customer record.This recording captures a multi-section customer creation workflow in Stripe's billing dashboard. The user navigates through a comprehensive modal form with progressively disclosed collapsible sections covering account details, billing address, tax classification, shipping information, and invoice preferences. The pattern demonstrates inline help text, dropdown selectors for country and currency, radio options for tax status, and template selection within a single modal dialog. Designers can learn how complex data-entry forms handle optional sections through expandable containers, reducing cogGuided step-by-step form with organized sections, no real-time validation feedback shown.Recorded Nov 9, 2026Progressive DisclosureExpandable SectionsModal Form Submission
Loads when you get here
Open customer template menuClick Create new template to begin setting up a customer profile template.
Loads when you get here
Select or create templateChoose a template option or create a new one to define customer fields.
Loads when you get here
Configure template fieldsSet up the required fields and information for your customer template.
Loads when you get here
View new customer createdReview the newly created customer record with ID cus_Vb85Ubw4GzLUO7 in Stripe.
Loads when you get here
Final screen
Stripe: Create productFill product details in a modal form, preview pricing in real-time, submit to create.This recording captures a product creation workflow in a SaaS billing dashboard. The user navigates from an empty product catalog to an add-product modal, where they enter product metadata (name, description, image), select a pricing model (recurring or one-off), and specify an amount in USD. A live preview panel on the right recalculates totals and billing periods in real-time as values change, providing immediate feedback before submission. This demonstrates inline form validation, progressive disclosure of pricing options, and real-time data binding patterns common in e-commerce and subscriResponsive form with live preview updates, instant price recalculation on input change.Recorded Nov 9, 2026Form ValidationLive Preview UpdateModal Dialog Flow
Loads when you get here
Navigate to Product catalogClick on Product catalog to access the products management section.
Loads when you get here
Click Create product buttonClick the Create product button to start adding a new product.
Loads when you get here
Enter product name and detailsType the product name in the required field and add a description.
Loads when you get here
Set product pricingEnter the product price. Set the amount customers will pay per billing cycle.
Loads when you get here
Save and confirm product creationClick save to complete the product creation. Review the success confirmation.
Linear: Create an issueClick New Issue, fill title, submit to create and view instantly.This flow demonstrates the core content creation pattern in Linear, where users quickly generate new work items. The modal-based issue creation UI minimizes context switching by overlaying on the current issues view, allowing users to enter a title and optional metadata. After submission, the new issue immediately appears in the appropriate status column (here, backlog) and the user is navigated to its detail view for further editing. The pattern exemplifies lazy form expansion with progressive disclosure of fields like priority, assignee, and labels.Instant and dismissible, no blocking confirmations or loading states.Recorded Nov 9, 2026Inline ModalOptimistic RenderForm Submission
Loads when you get here
Open create issue modalClick the button to open the create issue modal dialog.
Loads when you get here
Enter issue descriptionType or paste the issue description in the description field.
Loads when you get here
Submit and create issueClick the create button to submit and save the new issue.
Loads when you get here
View created issue detailsClick the issue to open its full detail page and view all information.
Loads when you get here
Final screen
Salesforce: Create & Assign a taskOpen task form, choose type, set date, create and assign task to case.This recording demonstrates task creation and assignment within a customer service case management context. A user initiates a new task from a case record detail view, selects from predefined task types like Call or Send Letter via dropdown, specifies a due date through an inline calendar widget, and commits the task which associates it with the open case. The pattern showcases contextual task management embedded directly in record views, eliminating navigation friction for case workers managing follow-ups and customer interactions.Immediate inline form reveal with dropdown and date picker, quick multi-step commit.Recorded Nov 9, 2026Inline Form RevealDropdown SelectionCalendar Date Picker
Loads when you get here
Open New Task dialogClick to open the New Task creation form with save and cancel options.
Loads when you get here
Select task typeClick the task type dropdown to choose from Call, Send Letter, Send Quote, or Other.
Loads when you get here
Choose task activitySelect your desired task type from the available options in the dropdown menu.
Loads when you get here
Open due date pickerClick the date field to open the calendar and select a due date for the task.
Loads when you get here
Set task due dateSelect the desired date from the calendar picker to assign the task deadline.
Salesforce: Log a callClick Log a Call, fill call details, relate to account, save activity record.A sales representative logs a phone call from a Contact detail page using the Activity Publisher widget. The workflow expands an inline call form, captures call metadata, associates the activity with a related account via dropdown selection, and persists the record. This pattern demonstrates activity logging, related object linking, and quick-access form submission without modal dialogs or page navigation. Common use cases include call logging, meeting notes, engagement tracking, and CRM activity history population.Fast inline form expansion with immediate related object lookup and commit on save.Recorded Nov 9, 2026Inline Form ExpansionLookup Dropdown SelectionHover to Reveal Actions
Loads when you get here
Navigate to contact recordOpen a contact from the Contacts list to view their details.
Loads when you get here
Open Log a Call dialogClick the Log a Call button to create a new call record for this contact.
Loads when you get here
Add call details and notesEnter call information and any relevant notes in the Comments field.
Loads when you get here
Complete call logging formFill in remaining call details such as duration, subject, and outcome.
Loads when you get here
Link call to related accountSelect the account associated with this call in the Related To field.
70%
Pulling up real product screens

Screens load as you reach them. Flying through lots of flows at once can make things stutter, so take it a few at a time.