[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Ftola\u002Fflows":3,"content-store-meta":-1,"i-custom:bookmark":294},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":44,"showcases":256,"links":257,"dates":291},"\u002Fexamples\u002Fapps\u002Ftola\u002Fflows","detail","flows",true,{"title":9,"description":10,"og_image":11},"Tola user flows examples - Nicelydone","Explore Tola user flow examples. Preview the opening screens and steps for each task. Pay bills, get paid and manage cash flow","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F050f3793-9256-4bc2-9756-5fb45d6b65b9.png",[13,16,19,22],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":21},"Tola design examples","\u002Fexamples\u002Fapps\u002Ftola",{"label":23,"to":4},"Tola user flows examples",{"title":23,"eyebrow":25,"description":10,"sections":26,"body":27},"SaaS app examples",[],[],{"title":29,"slug":30,"description":31,"logo":32,"url":33,"twitter_username":34,"categories":35},"Tola","tola","Pay bills, get paid and manage cash flow","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ftola-17715058.png","https:\u002F\u002Fwww.tolahq.com","tolahq",[36,40],{"id":37,"title":38,"slug":39},56,"Accounting","accounting",{"id":41,"title":42,"slug":43},36,"Finance","finance",[45,78,105,133,157,184,210,231],{"uuid":46,"title":47,"description":48,"canonical_path":4,"kind":49,"patterns_count":50,"categories":51,"screens":56,"app":77},"00e093d3-0143-455a-8ce2-7ecd30d3df1c","Signing up","This user flow guides users through the process of onboarding with Tola, including signing up, signing in, email verification, multi-factor authentication setup, and connecting bank and accou","flow",24,[52],{"id":53,"title":54,"slug":55},45,"Onboarding","onboarding",[57,64,71],{"uuid":58,"title":59,"description":60,"image":11,"image_alt":61,"width":62,"height":63},"050f3793-9256-4bc2-9756-5fb45d6b65b9","Tola - Accounts payable, accounts receivable and cash flow manage","Free account","Tola - Accounts payable, accounts receivable and cash flow manage from Tola",3024,16690,{"uuid":65,"title":66,"description":67,"image":68,"image_alt":69,"width":62,"height":70},"4338291c-89a6-448b-b225-bab43c09cce3","Get started • Tola","Authentication Account creation Split screen Account management","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F4338291c-89a6-448b-b225-bab43c09cce3.png","Get started • Tola from Tola",1722,{"uuid":72,"title":73,"description":74,"image":75,"image_alt":76,"width":62,"height":70},"838c6642-7524-4d31-975e-747aaf96ea29","Sign in • Tola","Authentication Account creation User authentication Form User management","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F838c6642-7524-4d31-975e-747aaf96ea29.png","Sign in • Tola from Tola",{"slug":30,"title":29,"logo":32},{"uuid":79,"title":80,"description":81,"canonical_path":4,"kind":49,"patterns_count":82,"categories":83,"screens":88,"app":104},"a65dbaa0-976a-4e49-a655-f47eee09445d","Completing business verification","This user flow guides a new business through the process of verifying their business details with Tola, from initial onboarding steps and providing business information to uploading necessary",35,[84],{"id":85,"title":86,"slug":87},93,"Filling Know Your Business (KYB) form","know-your-business-kyb-form",[89,95,99],{"uuid":90,"title":91,"description":92,"image":93,"image_alt":94,"width":62,"height":70},"40bc0665-cbf4-4f2b-ac0c-a8694ec5b9f9","Get started with Tola • Tola","Grid Onboarding Dashboard Sidebar navigation Finance Account setup","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F40bc0665-cbf4-4f2b-ac0c-a8694ec5b9f9.png","Get started with Tola • Tola from Tola",{"uuid":96,"title":91,"description":97,"image":98,"image_alt":94,"width":62,"height":70},"4e57e183-793c-4885-b054-6c63d07b180a","Onboarding Account setup Modal screen","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F4e57e183-793c-4885-b054-6c63d07b180a.png",{"uuid":100,"title":29,"description":101,"image":102,"image_alt":103,"width":62,"height":70},"0c05ef62-269b-46a8-8962-51f14b0097e2","Onboarding Progress indicator Account setup","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F0c05ef62-269b-46a8-8962-51f14b0097e2.png","Tola from Tola",{"slug":30,"title":29,"logo":32},{"uuid":106,"title":107,"description":108,"canonical_path":4,"kind":49,"patterns_count":109,"categories":110,"screens":115,"app":132},"d916a88b-a220-451e-a482-fe64f4329f96","Creating first bill","This flow guides a user through the process of adding a bill from an empty state, through filling in details and confirming the addition of the bill to activation by providing payment informa",17,[111],{"id":112,"title":113,"slug":114},28,"Creating","create",[116,122,128],{"uuid":117,"title":118,"description":119,"image":120,"image_alt":121,"width":62,"height":70},"dd8d2034-ada5-4ec7-b08b-8e4f786e194b","Pay • Tola","Dashboard Finance","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fdd8d2034-ada5-4ec7-b08b-8e4f786e194b.png","Pay • Tola from Tola",{"uuid":123,"title":124,"description":125,"image":126,"image_alt":127,"width":62,"height":70},"88702f14-265b-4f58-919c-1b944361cac1","Add bill • Tola","File upload Form Finance","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F88702f14-265b-4f58-919c-1b944361cac1.png","Add bill • Tola from Tola",{"uuid":129,"title":124,"description":130,"image":131,"image_alt":127,"width":62,"height":70},"ffcda7f5-b1b0-472f-a459-d322829a83a4","File upload Form Finance Modal screen","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fffcda7f5-b1b0-472f-a459-d322829a83a4.png",{"slug":30,"title":29,"logo":32},{"uuid":134,"title":135,"description":136,"canonical_path":4,"kind":49,"patterns_count":137,"categories":138,"screens":143,"app":156},"c50f5b55-7fd7-4974-ab5d-160cf0f17989","Duplicating bill","This flow outlines the process of duplicating a bill, modifying its details, and managing the duplicate within a billing platform.",6,[139],{"id":140,"title":141,"slug":142},68,"Duplicating","duplicate",[144,148,152],{"uuid":145,"title":118,"description":146,"image":147,"image_alt":121,"width":62,"height":70},"f9723cc2-8cdd-4216-b53e-868395a3ce54","E-commerce Dashboard Sidebar navigation Finance","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ff9723cc2-8cdd-4216-b53e-868395a3ce54.png",{"uuid":149,"title":118,"description":150,"image":151,"image_alt":121,"width":62,"height":70},"a03fb96e-98e3-420f-92b9-eb020334961b","Finance Modal screen","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fa03fb96e-98e3-420f-92b9-eb020334961b.png",{"uuid":153,"title":118,"description":154,"image":155,"image_alt":121,"width":62,"height":70},"4105c29e-2efb-4071-8410-c05d42341db9","Finance Delete Modal screen","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F4105c29e-2efb-4071-8410-c05d42341db9.png",{"slug":30,"title":29,"logo":32},{"uuid":158,"title":159,"description":160,"canonical_path":4,"kind":49,"patterns_count":161,"categories":162,"screens":167,"app":183},"7cc6dbe7-ec43-48e5-8955-ef8e38540bee","Creating payment request","This flow guides a user through creating and managing an invoice for payment, from initiating a blank invoice draft, filling in details, to saving or sending the finalized invoice.",19,[163],{"id":164,"title":165,"slug":166},85,"Requesting","request",[168,174,179],{"uuid":169,"title":170,"description":171,"image":172,"image_alt":173,"width":62,"height":70},"1db4cac8-c254-4e58-954c-cf65ed97cdae","Get paid • Tola","Dashboard Sidebar navigation Finance","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F1db4cac8-c254-4e58-954c-cf65ed97cdae.png","Get paid • Tola from Tola",{"uuid":175,"title":176,"description":125,"image":177,"image_alt":178,"width":62,"height":70},"3ad67bf8-dc5b-427f-becf-511d044e3c71","Add invoice • Tola","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F3ad67bf8-dc5b-427f-becf-511d044e3c71.png","Add invoice • Tola from Tola",{"uuid":180,"title":176,"description":181,"image":182,"image_alt":178,"width":62,"height":70},"fc80ba3a-4632-4dd4-a0e7-99ad44e68026","Form User management Account setup Modal screen","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ffc80ba3a-4632-4dd4-a0e7-99ad44e68026.png",{"slug":30,"title":29,"logo":32},{"uuid":185,"title":186,"description":187,"canonical_path":4,"kind":49,"patterns_count":188,"categories":189,"screens":194,"app":209},"d754b12d-6f60-4847-b887-f9d3540bb17b","Adding payment details","This flow enables a user to add payment information for a vendor, choosing between manually entering details or requesting the vendor to provide them, and finalizes by confirming the added pa",10,[190],{"id":191,"title":192,"slug":193},80,"Adding","add",[195,201,205],{"uuid":196,"title":197,"description":198,"image":199,"image_alt":200,"width":62,"height":70},"a9fb90be-33d8-4c54-a7b0-568d866c177c","Contacts • Tola","Sidebar","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fa9fb90be-33d8-4c54-a7b0-568d866c177c.png","Contacts • Tola from Tola",{"uuid":202,"title":197,"description":203,"image":204,"image_alt":200,"width":62,"height":70},"1839a719-8220-4e5e-b4c7-298636102f79","Finance Account management","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F1839a719-8220-4e5e-b4c7-298636102f79.png",{"uuid":206,"title":197,"description":207,"image":208,"image_alt":200,"width":62,"height":70},"d5296a0e-7422-47e3-b494-823ef1b4099e","Form Finance Modal screen","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fd5296a0e-7422-47e3-b494-823ef1b4099e.png",{"slug":30,"title":29,"logo":32},{"uuid":211,"title":212,"description":213,"canonical_path":4,"kind":49,"patterns_count":137,"categories":214,"screens":216,"app":230},"2762ba1f-8802-4ad5-be5b-360ecfde4158","Creating approval policy","This flow navigates the user through setting up a new approval policy for financial transactions within a team setting.",[215],{"id":112,"title":113,"slug":114},[217,223,227],{"uuid":218,"title":219,"description":220,"image":221,"image_alt":222,"width":62,"height":70},"2ac61ee7-e102-432d-93ec-fe3382257ef3","Approvals • Tola","Settings Sidebar navigation Finance Configuration","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F2ac61ee7-e102-432d-93ec-fe3382257ef3.png","Approvals • Tola from Tola",{"uuid":224,"title":219,"description":225,"image":226,"image_alt":222,"width":62,"height":70},"c220d0ec-68f0-47f1-be04-cb6d14d42428","Settings Form Finance Workflow Configuration","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fc220d0ec-68f0-47f1-be04-cb6d14d42428.png",{"uuid":228,"title":219,"description":225,"image":229,"image_alt":222,"width":62,"height":70},"e86bbf52-d085-4f79-a464-19fcb37bbac2","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fe86bbf52-d085-4f79-a464-19fcb37bbac2.png",{"slug":30,"title":29,"logo":32},{"uuid":232,"title":233,"description":234,"canonical_path":4,"kind":49,"patterns_count":235,"categories":236,"screens":238,"app":255},"10eb0f11-4279-4ccc-a2e5-99156e4a0e73","Adding organization","This flow guides a new user through the process of setting up their account on Tola, from initial profile configuration to connecting bank and bookkeeping accounts.",8,[237],{"id":191,"title":192,"slug":193},[239,245,251],{"uuid":240,"title":241,"description":242,"image":243,"image_alt":244,"width":62,"height":70},"1c520874-677d-44f6-a704-088344fb9451","Profile • Tola","User settings Settings Form Sidebar navigation Account management Account setup Account security","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F1c520874-677d-44f6-a704-088344fb9451.png","Profile • Tola from Tola",{"uuid":246,"title":247,"description":248,"image":249,"image_alt":250,"width":62,"height":70},"ce4bc7ea-7a54-421f-b2da-eea046800e0e","Get Started • Tola","Account creation Onboarding User authentication Form Split screen Finance Account setup","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fce4bc7ea-7a54-421f-b2da-eea046800e0e.png","Get Started • Tola from Tola",{"uuid":252,"title":247,"description":253,"image":254,"image_alt":250,"width":62,"height":70},"e0b80507-ad6f-49f5-9bc4-23109a07a604","Onboarding Form Split screen Finance Account setup","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fe0b80507-ad6f-49f5-9bc4-23109a07a604.png",{"slug":30,"title":29,"logo":32},[],[258,261,264,267,270,273,275,279,283,287],{"label":259,"to":260},"Tola product screens","\u002Fexamples\u002Fapps\u002Ftola\u002Fscreens",{"label":262,"to":263},"Tola marketing pages","\u002Fexamples\u002Fapps\u002Ftola\u002Fmarketing",{"label":265,"to":266},"Tola UI components","\u002Fexamples\u002Fapps\u002Ftola\u002Fcomponents",{"label":268,"to":269},"Accounting app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Faccounting",{"label":271,"to":272},"Finance app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ffinance",{"label":274,"to":18},"All SaaS app examples",{"label":276,"to":277,"description":278},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":280,"to":281,"description":282},"SaaS marketing page examples","\u002Fexamples\u002Fpages","Browse real SaaS marketing pages grouped by page type, from landing pages to pricing and customer story pages.",{"label":284,"to":285,"description":286},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":288,"to":289,"description":290},"User flow examples from SaaS apps","\u002Fexamples\u002Fflows","Explore user flow examples for sign-up, onboarding, billing, and other SaaS tasks. Compare the order of screens and preview the opening steps from real apps.",{"published_at":292,"updated_at":293},"2024-03-18T12:57:54.000Z","2026-09-13T13:02:39.000Z",{"left":295,"top":295,"width":296,"height":296,"rotate":295,"vFlip":297,"hFlip":297,"body":298},0,20,false,"\u003Cg fill=\"none\">\u003Cpath d=\"M9.7334 2.41699H10.2666C11.3987 2.41699 12.2028 2.41737 12.832 2.46875C13.4526 2.51945 13.8371 2.61637 14.1416 2.77148C14.7531 3.08307 15.2509 3.57988 15.5625 4.19141C15.7176 4.49587 15.8136 4.88039 15.8643 5.50098C15.9157 6.13035 15.916 6.93496 15.916 8.06738V15.1338C15.916 15.6634 15.9153 16.0086 15.8926 16.2578C15.879 16.4067 15.8598 16.4744 15.8525 16.4971C15.8095 16.5461 15.7506 16.576 15.6855 16.5811C15.6634 16.5734 15.5976 16.5486 15.4697 16.4697C15.2568 16.3384 14.9804 16.1313 14.5566 15.8135L11.4102 13.4541C11.1193 13.236 10.8105 12.9878 10.4453 12.8916C10.1533 12.8147 9.84573 12.8147 9.55371 12.8916C9.18862 12.9879 8.88057 13.2361 8.58984 13.4541L5.44336 15.8135C5.01942 16.1314 4.74231 16.3384 4.5293 16.4697C4.40092 16.5489 4.33537 16.5735 4.31348 16.5811C4.24875 16.5759 4.18941 16.5468 4.14648 16.498C4.13942 16.4762 4.12019 16.4085 4.10645 16.2578C4.08375 16.0086 4.08301 15.6634 4.08301 15.1338V8.06738C4.08301 6.93498 4.08335 6.13034 4.13477 5.50098C4.18547 4.88035 4.28236 4.49588 4.4375 4.19141C4.74906 3.58004 5.24605 3.08305 5.85742 2.77148C6.16189 2.61635 6.54637 2.51946 7.16699 2.46875C7.79636 2.41734 8.60099 2.41699 9.7334 2.41699Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\u002F>\u003C\u002Fg>"]