[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Friot":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":21,"app":37,"examples":48,"showcases":49,"links":388,"dates":419},"\u002Fexamples\u002Fapps\u002Friot","detail","apps",true,{"title":9,"description":10,"og_image":11},"Riot design examples - Nicelydone","Explore Riot UI design examples. Get your team ready for phishing attacks","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Friot_sign-in_ec16b21d_nicelydone.png",[13,16,19],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":4},"Riot design examples",{"title":20,"eyebrow":22,"description":10,"sections":23,"body":36},"SaaS app examples",[24],{"title":25,"links":26},"Explore Riot",[27,30,33],{"label":28,"to":29},"product screens","\u002Fexamples\u002Fapps\u002Friot\u002Fscreens",{"label":31,"to":32},"user flows","\u002Fexamples\u002Fapps\u002Friot\u002Fflows",{"label":34,"to":35},"marketing pages","\u002Fexamples\u002Fapps\u002Friot\u002Fmarketing",[],{"title":38,"slug":39,"description":40,"logo":41,"url":42,"categories":43},"Riot","riot","Get your team ready for phishing attacks","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Friot-1c50b780.png","https:\u002F\u002Ftryriot.com",[44],{"id":45,"title":46,"slug":47},78,"Security","security",[],[50,382,385],{"family":51,"examples":52},"screens",[53,82,103,147,177,208,233,262,291,320,338,360],{"uuid":54,"title":55,"description":56,"canonical_path":29,"image":11,"width":57,"height":58,"image_alt":59,"kind":60,"patterns":61,"component_categories":71,"app":80},"0668c86c-7b9b-4a22-8a1f-5eb0a60e2e45","Sign in • Riot","Sign-in screen where the user authenticates using their Google or Slack account.",3072,1654,"Sign in • Riot from Riot","screen",[62],{"id":63,"label":64,"slug":65,"rank":66,"group":67},4,"Sign In","sign-in",0,{"id":68,"label":69,"slug":70},1,"Access & Account","access-and-account",[72,76],{"id":73,"title":74,"slug":75},174,"Card","card",{"id":77,"title":78,"slug":79},175,"Button","button",{"slug":39,"title":38,"logo":41,"categories":81},[],{"uuid":83,"title":84,"description":85,"canonical_path":29,"image":86,"width":57,"height":58,"image_alt":87,"kind":60,"patterns":88,"component_categories":98,"app":101},"607504f8-5044-4aa9-b8d2-e0272631d53c","Sign up • Riot","Sign-up screen where the user authenticates with Google or Slack to upgrade their team's security.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Friot_sign-up_b8827dc6_nicelydone.png","Sign up • Riot from Riot",[89,94],{"id":90,"label":91,"slug":92,"rank":66,"group":93},5,"Sign Up","sign-up",{"id":68,"label":69,"slug":70},{"id":68,"label":95,"slug":96,"rank":68,"group":97},"Account Setup","account-setup",{"id":68,"label":69,"slug":70},[99,100],{"id":73,"title":74,"slug":75},{"id":77,"title":78,"slug":79},{"slug":39,"title":38,"logo":41,"categories":102},[],{"uuid":104,"title":105,"description":106,"canonical_path":29,"image":107,"width":57,"height":58,"image_alt":108,"kind":60,"patterns":109,"component_categories":130,"app":145},"ea729185-0801-46ec-abb6-d73b64959391","Configuration de votre compte • Riot","Onboarding screen where the user chooses to either create a new workspace for their team or join an existing one.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Friot_onboarding_ffc35711_nicelydone.png","Configuration de votre compte • Riot from Riot",[110,118,125],{"id":111,"label":112,"slug":113,"rank":66,"group":114},75,"Setup Wizard","setup-wizard",{"id":115,"label":116,"slug":117},7,"Onboarding & Education","onboarding-and-education",{"id":115,"label":119,"slug":120,"rank":68,"group":121},"Add & Create","add-and-create",{"id":122,"label":123,"slug":124},2,"Actions","actions",{"id":126,"label":127,"slug":128,"rank":122,"group":129},77,"Welcome","welcome",{"id":115,"label":116,"slug":117},[131,135,136,137,141],{"id":132,"title":133,"slug":134},226,"Skeleton","skeleton",{"id":73,"title":74,"slug":75},{"id":77,"title":78,"slug":79},{"id":138,"title":139,"slug":140},169,"Avatar","avatar",{"id":142,"title":143,"slug":144},260,"Badge","badge",{"slug":39,"title":38,"logo":41,"categories":146},[],{"uuid":148,"title":105,"description":149,"canonical_path":29,"image":150,"width":57,"height":58,"image_alt":108,"kind":60,"patterns":151,"component_categories":167,"app":175},"5dfab839-830b-4a1b-abf2-8a652ca475d3","Onboarding step where the user chooses to either create a new workspace or join an existing one.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Friot_onboarding_9b1d55d4_nicelydone.png",[152,154,156,164],{"id":111,"label":112,"slug":113,"rank":66,"group":153},{"id":115,"label":116,"slug":117},{"id":68,"label":95,"slug":96,"rank":68,"group":155},{"id":68,"label":69,"slug":70},{"id":157,"label":158,"slug":159,"rank":122,"group":160},104,"Team Management","team-management",{"id":161,"label":162,"slug":163},10,"Settings & Admin","settings-and-admin",{"id":126,"label":127,"slug":128,"rank":165,"group":166},3,{"id":115,"label":116,"slug":117},[168,172,173,174],{"id":169,"title":170,"slug":171},167,"Alert","alert",{"id":132,"title":133,"slug":134},{"id":73,"title":74,"slug":75},{"id":138,"title":139,"slug":140},{"slug":39,"title":38,"logo":41,"categories":176},[],{"uuid":178,"title":179,"description":180,"canonical_path":29,"image":181,"width":57,"height":58,"image_alt":182,"kind":60,"patterns":183,"component_categories":198,"app":206},"1a014e43-5eb3-4061-bda7-ee70f98f111b","Get started (Nicelydone) • Riot","Onboarding screen where the user completes a five-step setup checklist, currently prompting them to import employees via Google or Slack.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Friot_onboarding_5601c10f_nicelydone.png","Get started (Nicelydone) • Riot from Riot",[184,189,191,196],{"id":185,"label":186,"slug":187,"rank":66,"group":188},74,"Onboarding Checklist","onboarding-checklist",{"id":115,"label":116,"slug":117},{"id":157,"label":158,"slug":159,"rank":68,"group":190},{"id":161,"label":162,"slug":163},{"id":192,"label":193,"slug":194,"rank":122,"group":195},72,"Getting Started","getting-started",{"id":115,"label":116,"slug":117},{"id":111,"label":112,"slug":113,"rank":165,"group":197},{"id":115,"label":116,"slug":117},[199,203,204,205],{"id":200,"title":201,"slug":202},227,"Stepper","stepper",{"id":138,"title":139,"slug":140},{"id":77,"title":78,"slug":79},{"id":142,"title":143,"slug":144},{"slug":39,"title":38,"logo":41,"categories":207},[],{"uuid":209,"title":210,"description":211,"canonical_path":29,"image":212,"width":57,"height":58,"image_alt":213,"kind":60,"patterns":214,"component_categories":226,"app":231},"1b5eefb8-b15b-4a98-8612-cfcc7d89361e","Sync your team (Nicelydone) • Riot","Onboarding step where the user is prompted to sync their team by connecting Google or Slack.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Friot_onboarding_3361ef66_nicelydone.png","Sync your team (Nicelydone) • Riot from Riot",[215,217,219,221],{"id":157,"label":158,"slug":159,"rank":66,"group":216},{"id":161,"label":162,"slug":163},{"id":68,"label":95,"slug":96,"rank":68,"group":218},{"id":68,"label":69,"slug":70},{"id":185,"label":186,"slug":187,"rank":122,"group":220},{"id":115,"label":116,"slug":117},{"id":222,"label":223,"slug":224,"rank":165,"group":225},97,"Integrations","integrations",{"id":161,"label":162,"slug":163},[227,228,229,230],{"id":73,"title":74,"slug":75},{"id":138,"title":139,"slug":140},{"id":77,"title":78,"slug":79},{"id":142,"title":143,"slug":144},{"slug":39,"title":38,"logo":41,"categories":232},[],{"uuid":234,"title":210,"description":235,"canonical_path":29,"image":236,"width":57,"height":58,"image_alt":213,"kind":60,"patterns":237,"component_categories":254,"app":260},"696ef8ce-1168-47c8-968b-d41f8fcbba0f","Onboarding step where the user is prompted to sync their team from Google or Slack, currently showing an integration error.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Friot_notifications_88c36c19_nicelydone.png",[238,246,248,250,252],{"id":239,"label":240,"slug":241,"rank":66,"group":242},116,"Error","error",{"id":243,"label":244,"slug":245},12,"States & Feedback","states-and-feedback",{"id":157,"label":158,"slug":159,"rank":68,"group":247},{"id":161,"label":162,"slug":163},{"id":222,"label":223,"slug":224,"rank":122,"group":249},{"id":161,"label":162,"slug":163},{"id":111,"label":112,"slug":113,"rank":165,"group":251},{"id":115,"label":116,"slug":117},{"id":68,"label":95,"slug":96,"rank":63,"group":253},{"id":68,"label":69,"slug":70},[255,256,257,258,259],{"id":132,"title":133,"slug":134},{"id":73,"title":74,"slug":75},{"id":138,"title":139,"slug":140},{"id":77,"title":78,"slug":79},{"id":142,"title":143,"slug":144},{"slug":39,"title":38,"logo":41,"categories":261},[],{"uuid":263,"title":179,"description":264,"canonical_path":29,"image":265,"width":57,"height":58,"image_alt":182,"kind":60,"patterns":266,"component_categories":280,"app":289},"737ebe0c-0b2e-4b08-b061-fed06ca4ce55","Onboarding page where the user completes a setup checklist to import employees from Google or Slack and activate awareness programs.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Friot_navigation_6882e358_nicelydone.png",[267,269,271,273,275],{"id":185,"label":186,"slug":187,"rank":66,"group":268},{"id":115,"label":116,"slug":117},{"id":157,"label":158,"slug":159,"rank":68,"group":270},{"id":161,"label":162,"slug":163},{"id":111,"label":112,"slug":113,"rank":122,"group":272},{"id":115,"label":116,"slug":117},{"id":68,"label":95,"slug":96,"rank":165,"group":274},{"id":68,"label":69,"slug":70},{"id":276,"label":277,"slug":278,"rank":63,"group":279},15,"Import & Export","import-and-export",{"id":122,"label":123,"slug":124},[281,285,286,287,288],{"id":282,"title":283,"slug":284},168,"Accordion","accordion",{"id":200,"title":201,"slug":202},{"id":138,"title":139,"slug":140},{"id":77,"title":78,"slug":79},{"id":142,"title":143,"slug":144},{"slug":39,"title":38,"logo":41,"categories":290},[],{"uuid":292,"title":293,"description":294,"canonical_path":29,"image":295,"width":57,"height":58,"image_alt":296,"kind":60,"patterns":297,"component_categories":314,"app":318},"ca6ade87-c4ff-4356-846d-fa58d2b430ad","Profile (Bertrand Bruandet) • Riot","Settings page where the user configures their personal profile details, including name, email, language, and notification preferences.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Friot_settings-profile_ef94f671_nicelydone.png","Profile (Bertrand Bruandet) • Riot from Riot",[298,305,310],{"id":165,"label":299,"slug":300,"rank":66,"group":301},"Profile","profile",{"id":302,"label":303,"slug":304},11,"Social & Collaboration","social-and-collaboration",{"id":306,"label":307,"slug":308,"rank":68,"group":309},94,"Account Settings","account-settings",{"id":161,"label":162,"slug":163},{"id":302,"label":311,"slug":312,"rank":122,"group":313},"Edit","edit",{"id":122,"label":123,"slug":124},[315,316,317],{"id":138,"title":139,"slug":140},{"id":77,"title":78,"slug":79},{"id":142,"title":143,"slug":144},{"slug":39,"title":38,"logo":41,"categories":319},[],{"uuid":321,"title":210,"description":322,"canonical_path":29,"image":323,"width":57,"height":58,"image_alt":213,"kind":60,"patterns":324,"component_categories":330,"app":336},"a4ba98d7-f1ba-44b7-bb93-74ae09e50dc7","Onboarding step where the user sees that Slack is synced and is prompted to connect Google Workspace to improve their experience.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Friot_onboarding_8f3fedef_nicelydone.png",[325],{"id":326,"label":327,"slug":328,"rank":66,"group":329},133,"Invite Teammates","invite-teammates",{"id":122,"label":123,"slug":124},[331,332,333,334,335],{"id":132,"title":133,"slug":134},{"id":73,"title":74,"slug":75},{"id":138,"title":139,"slug":140},{"id":77,"title":78,"slug":79},{"id":142,"title":143,"slug":144},{"slug":39,"title":38,"logo":41,"categories":337},[],{"uuid":339,"title":340,"description":341,"canonical_path":29,"image":342,"width":57,"height":58,"image_alt":343,"kind":60,"patterns":344,"component_categories":352,"app":358},"c754849f-3f98-45ae-bf9b-6cd71060ca9e","Baseline campaign on all employees. campaign modification (Nicelydone) • Riot","Campaign creation screen where the user configures delivery schedule, audience targeting, and templates before launching.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Friot_create-settings_08b35f01_nicelydone.png","Baseline campaign on all employees. campaign modification (Nicelydone) • Riot from Riot",[345,347],{"id":302,"label":311,"slug":312,"rank":66,"group":346},{"id":122,"label":123,"slug":124},{"id":348,"label":349,"slug":350,"rank":68,"group":351},17,"Publish","publish",{"id":122,"label":123,"slug":124},[353,354,355,356,357],{"id":169,"title":170,"slug":171},{"id":73,"title":74,"slug":75},{"id":138,"title":139,"slug":140},{"id":77,"title":78,"slug":79},{"id":142,"title":143,"slug":144},{"slug":39,"title":38,"logo":41,"categories":359},[],{"uuid":361,"title":340,"description":362,"canonical_path":29,"image":363,"width":57,"height":58,"image_alt":343,"kind":60,"patterns":364,"component_categories":375,"app":380},"059d5fbf-5c24-4821-9f7a-8c2ae271d18a","Campaign creation page where the user configures delivery timing, selects the target audience, and chooses templates before launching.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Friot_create-dropdown-other-states_e7417778_nicelydone.png",[365,367],{"id":302,"label":311,"slug":312,"rank":66,"group":366},{"id":122,"label":123,"slug":124},{"id":368,"label":369,"slug":370,"rank":68,"group":371},129,"Workflow Builder","workflow-builder",{"id":372,"label":373,"slug":374},13,"Workflow & Automation","workflow-and-automation",[376,377,378,379],{"id":169,"title":170,"slug":171},{"id":73,"title":74,"slug":75},{"id":77,"title":78,"slug":79},{"id":142,"title":143,"slug":144},{"slug":39,"title":38,"logo":41,"categories":381},[],{"family":383,"examples":384},"flows",[],{"family":386,"examples":387},"pages",[],[389,391,393,395,398,401,403,407,411,415],{"label":390,"to":29},"Riot product screens",{"label":392,"to":35},"Riot marketing pages",{"label":394,"to":32},"Riot user flows",{"label":396,"to":397},"Riot UI components","\u002Fexamples\u002Fapps\u002Friot\u002Fcomponents",{"label":399,"to":400},"Security app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fsecurity",{"label":402,"to":18},"All SaaS app examples",{"label":404,"to":405,"description":406},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":408,"to":409,"description":410},"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":412,"to":413,"description":414},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":416,"to":417,"description":418},"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":420,"updated_at":421},"2020-06-16T13:30:14.000Z","2026-09-13T13:02:39.000Z"]