[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fbytescale\u002Fflows":3,"content-store-meta":-1,"i-custom:bookmark":342},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":44,"showcases":304,"links":305,"dates":339},"\u002Fexamples\u002Fapps\u002Fbytescale\u002Fflows","detail","flows",true,{"title":9,"description":10,"og_image":11},"Bytescale user flows examples - Nicelydone","Explore Bytescale user flow examples. Preview the opening screens and steps for each task. Simple file storage & file processing apis for developers","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F335e2bc8-5c34-4048-a7a6-13a96f73b30d.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},"Bytescale design examples","\u002Fexamples\u002Fapps\u002Fbytescale",{"label":23,"to":4},"Bytescale 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},"Bytescale","bytescale","Simple file storage & file processing apis for developers","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fbytescale-70575edd.png","https:\u002F\u002Fwww.bytescale.com","BytescaleHQ",[36,40],{"id":37,"title":38,"slug":39},37,"Developer APIs","developer-apis",{"id":41,"title":42,"slug":43},48,"Developer Tools","developer-tools",[45,76,103,123,149,171,197,208,238,259,270,290],{"uuid":46,"title":47,"description":48,"canonical_path":4,"kind":49,"patterns_count":50,"categories":51,"screens":56,"app":75},"fc3fa176-b62e-40cf-8751-f7be90774fda","Signing up","This flow guides a new user through the process of joining Bytescale, from landing on the page, through sign-up, filling in details, verifying their email, and finally accessing the user dash","flow",10,[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},"335e2bc8-5c34-4048-a7a6-13a96f73b30d","Bytescale Image, Video | Audio APIs for Developers","Homepage Home page","Bytescale Image, Video | Audio APIs for Developers from Bytescale",3024,25580,{"uuid":65,"title":66,"description":67,"image":68,"image_alt":69,"width":62,"height":70},"ad53edb8-140d-4062-8069-98269f87d331","Create Account | Bytescale","Authentication Account creation User authentication Form Split screen","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fad53edb8-140d-4062-8069-98269f87d331.png","Create Account | Bytescale from Bytescale",1674,{"uuid":72,"title":66,"description":73,"image":74,"image_alt":69,"width":62,"height":70},"f7bec2f7-1ea2-4f08-a67a-9257cf332250","Authentication Account creation User authentication Form","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ff7bec2f7-1ea2-4f08-a67a-9257cf332250.png",{"slug":30,"title":29,"logo":32},{"uuid":77,"title":78,"description":79,"canonical_path":4,"kind":49,"patterns_count":80,"categories":81,"screens":86,"app":102},"2687ea01-191f-4a7d-8c33-f7dbfac13518","Resetting password","This user flow guides a user through the process of resetting their password, from initiating the reset to entering a new password, including handling errors.",6,[82],{"id":83,"title":84,"slug":85},77,"Restoring","restore",[87,92,98],{"uuid":88,"title":89,"description":73,"image":90,"image_alt":91,"width":62,"height":70},"205e3801-67e3-437f-810d-29f3eb8cff41","Sign In | Bytescale","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F205e3801-67e3-437f-810d-29f3eb8cff41.png","Sign In | Bytescale from Bytescale",{"uuid":93,"title":94,"description":95,"image":96,"image_alt":97,"width":62,"height":70},"ef065c87-1ee6-49c0-ae02-00a5faaf7bc4","Forgotten Password | Bytescale","Authentication Form User management Account management","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fef065c87-1ee6-49c0-ae02-00a5faaf7bc4.png","Forgotten Password | Bytescale from Bytescale",{"uuid":99,"title":94,"description":100,"image":101,"image_alt":97,"width":62,"height":70},"bcc2f21c-ba0b-4f0f-967f-133c9b3a170e","Authentication Form Account management","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fbcc2f21c-ba0b-4f0f-967f-133c9b3a170e.png",{"slug":30,"title":29,"logo":32},{"uuid":104,"title":47,"description":105,"canonical_path":4,"kind":49,"patterns_count":106,"categories":107,"screens":116,"app":122},"192bb708-9c03-4c77-a093-87dee43ae8d7","This user flow guides a new user through the process of creating an account on Bytescale, from entering signup information to verifying their identity.",7,[108,112],{"id":109,"title":110,"slug":111},16,"Setting up account","set-up-account",{"id":113,"title":114,"slug":115},36,"Verifying identity","verify-identity",[117,118,119],{"uuid":65,"title":66,"description":67,"image":68,"image_alt":69,"width":62,"height":70},{"uuid":72,"title":66,"description":73,"image":74,"image_alt":69,"width":62,"height":70},{"uuid":120,"title":66,"description":73,"image":121,"image_alt":69,"width":62,"height":70},"f80103d7-2f71-44f1-ac96-88c1498c453d","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ff80103d7-2f71-44f1-ac96-88c1498c453d.png",{"slug":30,"title":29,"logo":32},{"uuid":124,"title":125,"description":126,"canonical_path":4,"kind":49,"patterns_count":80,"categories":127,"screens":131,"app":148},"941d0aad-ac25-4381-8737-68ff9b8ee6b5","Uploading files","This flow guides users through uploading files to their Bytescale dashboard, showcasing steps from initializing the upload process to adjusting permissions for the newly uploaded file.",[128],{"id":129,"title":125,"slug":130},41,"upload-files",[132,138,144],{"uuid":133,"title":134,"description":135,"image":136,"image_alt":137,"width":62,"height":70},"9ce0e644-0a56-4fab-8f9c-b6f19ae68177","Getting Started | Bytescale","Settings Data management Dashboard Account management Account setup Dashboard screen","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F9ce0e644-0a56-4fab-8f9c-b6f19ae68177.png","Getting Started | Bytescale from Bytescale",{"uuid":139,"title":140,"description":141,"image":142,"image_alt":143,"width":62,"height":70},"45bc29fd-c5d8-4c33-8795-ad07e277ebba","Files | Bytescale","File upload Content management Data management Dashboard","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F45bc29fd-c5d8-4c33-8795-ad07e277ebba.png","Files | Bytescale from Bytescale",{"uuid":145,"title":140,"description":146,"image":147,"image_alt":143,"width":62,"height":70},"06c0b862-3c64-400f-9b67-d0dde99ced61","File upload Data management Dashboard Sidebar navigation Account management","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F06c0b862-3c64-400f-9b67-d0dde99ced61.png",{"slug":30,"title":29,"logo":32},{"uuid":150,"title":151,"description":152,"canonical_path":4,"kind":49,"patterns_count":80,"categories":153,"screens":158,"app":170},"79f0a33a-ff0d-4580-916a-02d2037995f8","Editing folder settings","This user flow guides a user through setting up permissions and storage settings for their account's root folder in Bytescale, indicating a progression from initial access through to detailed",[154],{"id":155,"title":156,"slug":157},35,"Setting up permissions","set-up-permissions",[159,160,166],{"uuid":133,"title":134,"description":135,"image":136,"image_alt":137,"width":62,"height":70},{"uuid":161,"title":162,"description":163,"image":164,"image_alt":165,"width":62,"height":70},"f86ae6ee-26fd-46c0-b514-11f729a2e929","Folder Settings | Bytescale","File management","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ff86ae6ee-26fd-46c0-b514-11f729a2e929.png","Folder Settings | Bytescale from Bytescale",{"uuid":167,"title":162,"description":168,"image":169,"image_alt":165,"width":62,"height":70},"a444253c-3ef4-4d51-914b-da8084ea43aa","Settings Form Account management Account settings Configuration","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fa444253c-3ef4-4d51-914b-da8084ea43aa.png",{"slug":30,"title":29,"logo":32},{"uuid":172,"title":173,"description":174,"canonical_path":4,"kind":49,"patterns_count":80,"categories":175,"screens":180,"app":196},"46947061-a431-4729-b3aa-fde360cb5527","Creating transformation preset","This flow enables users to create a new image transformation preset within the Bytescale platform, from selecting a template to configuring its parameters and ultimately creating the transfor",[176],{"id":177,"title":178,"slug":179},28,"Creating","create",[181,187,192],{"uuid":182,"title":183,"description":184,"image":185,"image_alt":186,"width":62,"height":70},"7674c3b1-ce64-4e65-9b53-4ecde8813194","Create Preset | Bytescale","Data management Sidebar navigation Configuration","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F7674c3b1-ce64-4e65-9b53-4ecde8813194.png","Create Preset | Bytescale from Bytescale",{"uuid":188,"title":183,"description":189,"image":190,"image_alt":186,"width":62,"height":191},"dc5e8fc3-f96e-4b14-8e41-4aee5cda28d2","Form Configuration Modal screen","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fdc5e8fc3-f96e-4b14-8e41-4aee5cda28d2.png",2866,{"uuid":193,"title":183,"description":194,"image":195,"image_alt":186,"width":62,"height":70},"1e333fdc-6413-4958-b740-abfd06e2ee1a","Content management Settings Form Dashboard Sidebar navigation Configuration","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F1e333fdc-6413-4958-b740-abfd06e2ee1a.png",{"slug":30,"title":29,"logo":32},{"uuid":198,"title":199,"description":200,"canonical_path":4,"kind":49,"patterns_count":80,"categories":201,"screens":203,"app":207},"99b495be-cc59-4f01-a5af-7cb9aefa3d7d","Creating image transformation preset","The flow guides a user through the process of creating a new image transformation preset in Bytescale, configuring its attributes, and successfully creating it.",[202],{"id":177,"title":178,"slug":179},[204,205,206],{"uuid":182,"title":183,"description":184,"image":185,"image_alt":186,"width":62,"height":70},{"uuid":188,"title":183,"description":189,"image":190,"image_alt":186,"width":62,"height":191},{"uuid":193,"title":183,"description":194,"image":195,"image_alt":186,"width":62,"height":70},{"slug":30,"title":29,"logo":32},{"uuid":209,"title":210,"description":211,"canonical_path":4,"kind":49,"patterns_count":106,"categories":212,"screens":220,"app":237},"99ff67fc-a438-4307-b390-3091a80df48e","Configuring API key security","This user flow enables the management and configuration of API keys and security settings in the Bytescale dashboard, including defining permissions, file upload paths, and tagging for upload",[213,217],{"id":214,"title":215,"slug":216},60,"Editing","edit",{"id":80,"title":218,"slug":219},"Securing account","secure-account",[221,227,231],{"uuid":222,"title":223,"description":224,"image":225,"image_alt":226,"width":62,"height":70},"39e99b35-6bab-478d-b2b0-79b2504a9e48","Security | Bytescale","Authentication Sidebar navigation Account setup","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F39e99b35-6bab-478d-b2b0-79b2504a9e48.png","Security | Bytescale from Bytescale",{"uuid":228,"title":223,"description":229,"image":230,"image_alt":226,"width":62,"height":70},"30651118-c207-477b-96ba-d57cfea72fb4","Sidebar navigation Account settings Account setup Delete","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F30651118-c207-477b-96ba-d57cfea72fb4.png",{"uuid":232,"title":233,"description":234,"image":235,"image_alt":236,"width":62,"height":70},"7d540605-8157-402d-9b11-4a96c97cd6ff","Edit API Key | Bytescale","Authentication Form Configuration","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F7d540605-8157-402d-9b11-4a96c97cd6ff.png","Edit API Key | Bytescale from Bytescale",{"slug":30,"title":29,"logo":32},{"uuid":239,"title":240,"description":241,"canonical_path":4,"kind":49,"patterns_count":80,"categories":242,"screens":244,"app":258},"e1af9244-af54-4d18-b13f-f8f132be5e5c","Creating file size limit rule","This flow guides the user through the process of setting up and enforcing file size limits within their Bytescale account to manage file uploads based on specific tags.",[243],{"id":177,"title":178,"slug":179},[245,251,255],{"uuid":246,"title":247,"description":248,"image":249,"image_alt":250,"width":62,"height":70},"8c8defd9-99f4-482b-b66a-198db6bab22f","Rules | Bytescale","Settings Data management Dashboard Sidebar navigation Account settings Configuration","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F8c8defd9-99f4-482b-b66a-198db6bab22f.png","Rules | Bytescale from Bytescale",{"uuid":252,"title":247,"description":253,"image":254,"image_alt":250,"width":62,"height":70},"e3aae1b2-8688-4a0b-8323-e7282e69a95d","Modal dialog Settings Form Configuration Modal screen","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fe3aae1b2-8688-4a0b-8323-e7282e69a95d.png",{"uuid":256,"title":247,"description":189,"image":257,"image_alt":250,"width":62,"height":70},"4a1e5e26-44e2-4758-8dd3-6c7e43fb0336","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F4a1e5e26-44e2-4758-8dd3-6c7e43fb0336.png",{"slug":30,"title":29,"logo":32},{"uuid":260,"title":261,"description":262,"canonical_path":4,"kind":49,"patterns_count":106,"categories":263,"screens":265,"app":269},"eb5e0b7a-58b8-45e3-b074-d0234a3816ab","Creating max file size rules","This flow demonstrates how to configure and manage file size upload limits in a system, allowing users to define, apply, and visualize rules that restrict file uploads based on size.",[264],{"id":177,"title":178,"slug":179},[266,267,268],{"uuid":246,"title":247,"description":248,"image":249,"image_alt":250,"width":62,"height":70},{"uuid":252,"title":247,"description":253,"image":254,"image_alt":250,"width":62,"height":70},{"uuid":256,"title":247,"description":189,"image":257,"image_alt":250,"width":62,"height":70},{"slug":30,"title":29,"logo":32},{"uuid":271,"title":272,"description":273,"canonical_path":4,"kind":49,"patterns_count":80,"categories":274,"screens":276,"app":289},"9c613011-75db-4aa6-ab06-b9f4e3ea88c7","Creating rate limit rule","This flow guides a user through the process of creating and configuring rate limit rules for file uploads in a Bytescale account, allowing control over the frequency and conditions under whic",[275],{"id":177,"title":178,"slug":179},[277,281,285],{"uuid":278,"title":247,"description":279,"image":280,"image_alt":250,"width":62,"height":70},"f3ccf9da-0774-4403-a5e9-e09f84da6d56","Settings Form Sidebar navigation Account settings Configuration","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ff3ccf9da-0774-4403-a5e9-e09f84da6d56.png",{"uuid":282,"title":247,"description":283,"image":284,"image_alt":250,"width":62,"height":70},"ed4c94d8-6f20-40ad-974e-91f9570d99b2","Settings Form Data management Configuration","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fed4c94d8-6f20-40ad-974e-91f9570d99b2.png",{"uuid":286,"title":247,"description":287,"image":288,"image_alt":250,"width":62,"height":70},"e0a9dd3b-8669-4c5e-b62d-a1f58e00f555","Form Data management Configuration","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fe0a9dd3b-8669-4c5e-b62d-a1f58e00f555.png",{"slug":30,"title":29,"logo":32},{"uuid":291,"title":292,"description":293,"canonical_path":4,"kind":49,"patterns_count":80,"categories":294,"screens":296,"app":303},"75392544-8c51-4fac-948c-55a0ccd0919d","Configuring rate limit rules","This flow enables users to set and manage rate limits for file uploads to their Bytescale account, allowing for control over the frequency and quantity of uploads based on specific tags and c",[295],{"id":177,"title":178,"slug":179},[297,298,299],{"uuid":278,"title":247,"description":279,"image":280,"image_alt":250,"width":62,"height":70},{"uuid":286,"title":247,"description":287,"image":288,"image_alt":250,"width":62,"height":70},{"uuid":300,"title":247,"description":301,"image":302,"image_alt":250,"width":62,"height":70},"43ff56b8-e0ff-4a2b-a81a-6a84c9c3c537","File upload Settings Form Data management Sidebar navigation Configuration","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F43ff56b8-e0ff-4a2b-a81a-6a84c9c3c537.png",{"slug":30,"title":29,"logo":32},[],[306,309,312,315,318,321,323,327,331,335],{"label":307,"to":308},"Bytescale product screens","\u002Fexamples\u002Fapps\u002Fbytescale\u002Fscreens",{"label":310,"to":311},"Bytescale marketing pages","\u002Fexamples\u002Fapps\u002Fbytescale\u002Fmarketing",{"label":313,"to":314},"Bytescale UI components","\u002Fexamples\u002Fapps\u002Fbytescale\u002Fcomponents",{"label":316,"to":317},"Developer APIs app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-apis",{"label":319,"to":320},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":322,"to":18},"All SaaS app examples",{"label":324,"to":325,"description":326},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":328,"to":329,"description":330},"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":332,"to":333,"description":334},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":336,"to":337,"description":338},"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":340,"updated_at":341},"2024-01-29T13:38:29.000Z","2026-09-13T13:02:39.000Z",{"left":343,"top":343,"width":344,"height":344,"rotate":343,"vFlip":345,"hFlip":345,"body":346},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>"]