[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fplaybook":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":21,"app":34,"examples":61,"showcases":62,"links":309,"dates":347},"\u002Fexamples\u002Fapps\u002Fplaybook","detail","apps",true,{"title":9,"description":10,"og_image":11},"Playbook design examples - Nicelydone","Explore Playbook UI design examples. One place for all the best design thinking","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fplaybook_sign-up_modals-and-popovers_035a9195_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},"Playbook design examples",{"title":20,"eyebrow":22,"description":10,"sections":23,"body":33},"SaaS app examples",[24],{"title":25,"links":26},"Explore Playbook",[27,30],{"label":28,"to":29},"product screens","\u002Fexamples\u002Fapps\u002Fplaybook\u002Fscreens",{"label":31,"to":32},"marketing pages","\u002Fexamples\u002Fapps\u002Fplaybook\u002Fmarketing",[],{"title":35,"slug":36,"description":37,"logo":38,"url":39,"categories":40},"Playbook","playbook","One place for all the best design thinking","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fplaybook-9f70a0d7.png","https:\u002F\u002Faskplaybook.com",[41,45,49,53,57],{"id":42,"title":43,"slug":44},8,"Design","design",{"id":46,"title":47,"slug":48},25,"Marketing","marketing",{"id":50,"title":51,"slug":52},15,"Media and Entertainment","media-and-entertainment",{"id":54,"title":55,"slug":56},47,"Customer Service","customer-service",{"id":58,"title":59,"slug":60},30,"Productivity","productivity",[],[63,306],{"family":64,"examples":65},"screens",[66,107,129,142,158,168,181,214,229,262,275,290],{"uuid":67,"title":68,"description":69,"canonical_path":29,"image":11,"width":70,"height":71,"image_alt":72,"kind":73,"patterns":74,"component_categories":92,"app":105},"8579c353-efff-4d3e-8cde-159933fa2547","Get your first Product Design job Collection - Playbook","Guide collection page where a modal prompts the user to sign up via email, Twitter, or Facebook in order to follow the product design content.",3072,1654,"Get your first Product Design job Collection - Playbook from Playbook","screen",[75,84],{"id":76,"label":77,"slug":78,"rank":79,"group":80},5,"Sign Up","sign-up",0,{"id":81,"label":82,"slug":83},1,"Access & Account","access-and-account",{"id":85,"label":86,"slug":87,"rank":81,"group":88},14,"Follow","follow",{"id":89,"label":90,"slug":91},2,"Actions","actions",[93,97,101],{"id":94,"title":95,"slug":96},258,"Header","header",{"id":98,"title":99,"slug":100},284,"Modal","modal",{"id":102,"title":103,"slug":104},175,"Button","button",{"slug":36,"title":35,"logo":38,"categories":106},[],{"uuid":108,"title":109,"description":110,"canonical_path":29,"image":111,"width":70,"height":71,"image_alt":112,"kind":73,"patterns":113,"component_categories":119,"app":127},"ac0b1eed-6d0e-42ef-899a-da3874e4973f","Playbook - Achieve your career goals","Landing page where a central modal prompts the user to sign in to the design community using email, Twitter, or Facebook.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fplaybook_sign-in_modals-and-popovers_64339001_nicelydone.png","Playbook - Achieve your career goals from Playbook",[114],{"id":115,"label":116,"slug":117,"rank":79,"group":118},4,"Sign In","sign-in",{"id":81,"label":82,"slug":83},[120,121,125,126],{"id":94,"title":95,"slug":96},{"id":122,"title":123,"slug":124},174,"Card","card",{"id":98,"title":99,"slug":100},{"id":102,"title":103,"slug":104},{"slug":36,"title":35,"logo":38,"categories":128},[],{"uuid":130,"title":109,"description":131,"canonical_path":29,"image":132,"width":70,"height":71,"image_alt":112,"kind":73,"patterns":133,"component_categories":136,"app":140},"32a63642-cc34-4482-b88e-b795a2dbd70d","Signup overlay where the user can join the platform using email, Twitter, or Facebook.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fplaybook_sign-up_modals-and-popovers_f0a7fddf_nicelydone.png",[134],{"id":76,"label":77,"slug":78,"rank":79,"group":135},{"id":81,"label":82,"slug":83},[137,138,139],{"id":122,"title":123,"slug":124},{"id":98,"title":99,"slug":100},{"id":102,"title":103,"slug":104},{"slug":36,"title":35,"logo":38,"categories":141},[],{"uuid":143,"title":35,"description":144,"canonical_path":29,"image":145,"width":70,"height":71,"image_alt":146,"kind":73,"patterns":147,"component_categories":154,"app":156},"1394d6ae-1556-4374-a69c-41e0fde12625","Signup page where the user creates a new account by providing an email and confirming a password.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fplaybook_sign-up_d0999dc0_nicelydone.png","Playbook from Playbook",[148,150],{"id":76,"label":77,"slug":78,"rank":79,"group":149},{"id":81,"label":82,"slug":83},{"id":81,"label":151,"slug":152,"rank":81,"group":153},"Account Setup","account-setup",{"id":81,"label":82,"slug":83},[155],{"id":102,"title":103,"slug":104},{"slug":36,"title":35,"logo":38,"categories":157},[],{"uuid":159,"title":35,"description":160,"canonical_path":29,"image":161,"width":70,"height":71,"image_alt":146,"kind":73,"patterns":162,"component_categories":165,"app":166},"bc345449-d083-40ed-a3df-4f36ca3b658b","Sign-in screen where the user authenticates with their email and password.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fplaybook_sign-in_e010862c_nicelydone.png",[163],{"id":115,"label":116,"slug":117,"rank":79,"group":164},{"id":81,"label":82,"slug":83},[],{"slug":36,"title":35,"logo":38,"categories":167},[],{"uuid":169,"title":35,"description":170,"canonical_path":29,"image":171,"width":70,"height":71,"image_alt":146,"kind":73,"patterns":172,"component_categories":177,"app":179},"1ef9e838-c7c4-4cdd-8226-09f381400856","Password recovery screen where the user enters their email address to initiate a reset link.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fplaybook_password-reset_19d2b8a0_nicelydone.png",[173],{"id":89,"label":174,"slug":175,"rank":79,"group":176},"Forgot Password","forgot-password",{"id":81,"label":82,"slug":83},[178],{"id":102,"title":103,"slug":104},{"slug":36,"title":35,"logo":38,"categories":180},[],{"uuid":182,"title":183,"description":184,"canonical_path":29,"image":185,"width":70,"height":71,"image_alt":186,"kind":73,"patterns":187,"component_categories":198,"app":212},"3ae897cc-96b8-44b2-ade5-2b8845ced333","Playbook - Onboarding","Onboarding step where the user provides personal information like name, username, gender, location, and bio to set up their profile.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fplaybook_onboarding_7d4f3dee_nicelydone.png","Playbook - Onboarding from Playbook",[188,190],{"id":81,"label":151,"slug":152,"rank":79,"group":189},{"id":81,"label":82,"slug":83},{"id":191,"label":192,"slug":193,"rank":81,"group":194},3,"Profile","profile",{"id":195,"label":196,"slug":197},11,"Social & Collaboration","social-and-collaboration",[199,203,207,211],{"id":200,"title":201,"slug":202},240,"Horizontal navigation","horizontal-navigation",{"id":204,"title":205,"slug":206},169,"Avatar","avatar",{"id":208,"title":209,"slug":210},227,"Stepper","stepper",{"id":102,"title":103,"slug":104},{"slug":36,"title":35,"logo":38,"categories":213},[],{"uuid":215,"title":183,"description":216,"canonical_path":29,"image":217,"width":70,"height":71,"image_alt":186,"kind":73,"patterns":218,"component_categories":223,"app":227},"eeb95deb-26fc-405c-811e-2eb4c7a7801b","Onboarding step where the user provides their personal information, including name, username, gender, location, and bio.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fplaybook_onboarding_cd76af07_nicelydone.png",[219,221],{"id":81,"label":151,"slug":152,"rank":79,"group":220},{"id":81,"label":82,"slug":83},{"id":191,"label":192,"slug":193,"rank":81,"group":222},{"id":195,"label":196,"slug":197},[224,225,226],{"id":204,"title":205,"slug":206},{"id":208,"title":209,"slug":210},{"id":102,"title":103,"slug":104},{"slug":36,"title":35,"logo":38,"categories":228},[],{"uuid":230,"title":183,"description":231,"canonical_path":29,"image":232,"width":70,"height":71,"image_alt":186,"kind":73,"patterns":233,"component_categories":255,"app":260},"f0a3fb13-bfdc-40e5-9b56-d4d37ea95b78","Onboarding step where the user provides their professional information, including job title and company, to complete their profile.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fplaybook_onboarding_e9beb08a_nicelydone.png",[234,242,244,251],{"id":235,"label":236,"slug":237,"rank":79,"group":238},74,"Onboarding Checklist","onboarding-checklist",{"id":239,"label":240,"slug":241},7,"Onboarding & Education","onboarding-and-education",{"id":191,"label":192,"slug":193,"rank":81,"group":243},{"id":195,"label":196,"slug":197},{"id":245,"label":246,"slug":247,"rank":89,"group":248},42,"Form","form",{"id":115,"label":249,"slug":250},"Data & Analysis","data-and-analysis",{"id":195,"label":252,"slug":253,"rank":191,"group":254},"Edit","edit",{"id":89,"label":90,"slug":91},[256,257,258,259],{"id":200,"title":201,"slug":202},{"id":204,"title":205,"slug":206},{"id":208,"title":209,"slug":210},{"id":102,"title":103,"slug":104},{"slug":36,"title":35,"logo":38,"categories":261},[],{"uuid":263,"title":183,"description":264,"canonical_path":29,"image":265,"width":70,"height":71,"image_alt":186,"kind":73,"patterns":266,"component_categories":269,"app":273},"74a6ad73-b21d-4513-a98e-5a4607eddd55","Onboarding step where the user provides their professional information, including job title, role type, and company.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fplaybook_onboarding_1c429f5f_nicelydone.png",[267],{"id":81,"label":151,"slug":152,"rank":79,"group":268},{"id":81,"label":82,"slug":83},[270,271,272],{"id":204,"title":205,"slug":206},{"id":208,"title":209,"slug":210},{"id":102,"title":103,"slug":104},{"slug":36,"title":35,"logo":38,"categories":274},[],{"uuid":276,"title":183,"description":277,"canonical_path":29,"image":278,"width":70,"height":71,"image_alt":186,"kind":73,"patterns":279,"component_categories":284,"app":288},"30dc78eb-d0ec-4375-8285-c898b9179365","Onboarding step where the user provides their professional information, featuring an autocomplete dropdown for selecting their company.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fplaybook_onboarding_d87dda9d_nicelydone.png",[280,282],{"id":81,"label":151,"slug":152,"rank":79,"group":281},{"id":81,"label":82,"slug":83},{"id":191,"label":192,"slug":193,"rank":81,"group":283},{"id":195,"label":196,"slug":197},[285,286,287],{"id":204,"title":205,"slug":206},{"id":208,"title":209,"slug":210},{"id":102,"title":103,"slug":104},{"slug":36,"title":35,"logo":38,"categories":289},[],{"uuid":291,"title":183,"description":292,"canonical_path":29,"image":293,"width":70,"height":71,"image_alt":186,"kind":73,"patterns":294,"component_categories":299,"app":304},"be0a05ea-49bd-47fa-8687-3efde6ad2b32","Onboarding step where the user provides their professional info like job title, company type, and company size.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fplaybook_onboarding_dccde5d9_nicelydone.png",[295,297],{"id":235,"label":236,"slug":237,"rank":79,"group":296},{"id":239,"label":240,"slug":241},{"id":81,"label":151,"slug":152,"rank":81,"group":298},{"id":81,"label":82,"slug":83},[300,301,302,303],{"id":200,"title":201,"slug":202},{"id":204,"title":205,"slug":206},{"id":208,"title":209,"slug":210},{"id":102,"title":103,"slug":104},{"slug":36,"title":35,"logo":38,"categories":305},[],{"family":307,"examples":308},"pages",[],[310,312,314,317,320,323,326,329,331,335,339,343],{"label":311,"to":29},"Playbook product screens",{"label":313,"to":32},"Playbook marketing pages",{"label":315,"to":316},"Playbook user flows","\u002Fexamples\u002Fapps\u002Fplaybook\u002Fflows",{"label":318,"to":319},"Playbook UI components","\u002Fexamples\u002Fapps\u002Fplaybook\u002Fcomponents",{"label":321,"to":322},"Design app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdesign",{"label":324,"to":325},"Marketing app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fmarketing",{"label":327,"to":328},"Media and Entertainment app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fmedia-and-entertainment",{"label":330,"to":18},"All SaaS app examples",{"label":332,"to":333,"description":334},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":336,"to":337,"description":338},"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":340,"to":341,"description":342},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":344,"to":345,"description":346},"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":348,"updated_at":349},"2017-08-07T21:59:12.000Z","2026-09-13T13:02:39.000Z"]