[{"data":1,"prerenderedAt":168},["ShallowReactive",2],{"project:\u002Fpixel-and-tonic\u002Fcraft-cloud":3},{"project":4,"company":165},{"path":5,"title":6,"description":7,"link":8,"linkName":9,"layout":9,"images":10,"cover":9,"facts":53,"body":58},"\u002Fpixel-and-tonic\u002Fcraft-cloud","Craft Cloud","Hosting tailored for Craft, from the team behind it, so customers can publish their projects without worrying about DevOps. Announced in 2019 as a headless-only platform, customer feedback sent us back to the drawing board, and Craft Cloud became a scalable hosting solution for every kind of Craft site. I designed the experience from sketches to high-fidelity prototypes and implemented the front-end with Vue.js. Five years in the making, Craft Cloud launched in the summer of 2024.","https:\u002F\u002Fcraftcms.com\u002Fcloud",null,[11,17,23,29,35,41,47],{"src":12,"width":13,"height":14,"alt":15,"caption":16},"\u002Fassets\u002Fwork\u002Fmore\u002Fcloudlogo.webp",2400,1440,"Craft Cloud logomark drawn as a dashed outline","The dotted logo teasing Craft Cloud, announced in September 2019.",{"src":18,"width":19,"height":20,"alt":21,"caption":22},"\u002Fassets\u002Fwork\u002Fmore\u002Fcloud-v1.webp",1920,1200,"Take #1: a grid of Craft Cloud project cards tagged Serverless or Self Hosted, grouped under Personal and Pixel & Tonic","Take #1: the headless-only concept, before customer feedback sent us back to the drawing board.",{"src":24,"width":25,"height":26,"alt":27,"caption":28},"\u002Fassets\u002Fwork\u002Fmore\u002Fconsole-v3.webp",2876,1478,"Take #2: the Craft Cloud projects index in Craft Console, with domains, production deployment status, environments and estimated cost for each project","Take #2: hosting tailored for Craft, plugins included, with each project’s deployment status and environments at a glance.",{"src":30,"width":31,"height":32,"alt":33,"caption":34},"\u002Fassets\u002Fwork\u002Fmore\u002Fcloud-deployments.webp",2880,2156,"Craft Cloud deployments for a project’s production environment: commits deployed on push from the main branch, with deploy times and statuses","The shipped deployments experience: push a Craft project to the Cloud with no DevOps.",{"src":36,"width":37,"height":38,"alt":39,"caption":40},"\u002Fassets\u002Fwork\u002Fmore\u002Fcloud-variables.webp",2000,1251,"The Craft Cloud variables screen: system variables with no edit action, a masked sensitive value, editable variables, and new rows being added","Per-environment variables, with sensitive values kept secret.",{"src":42,"width":43,"height":44,"alt":45,"caption":46},"\u002Fassets\u002Fwork\u002Fmore\u002Fsketch-project-access.webp",2048,1536,"Notebook sketch of the Craft Cloud project access screen, with database credentials and a button to request 24-hour access to an S3 bucket","Notebook sketch exploring the project access screen: database credentials and S3 access.",{"src":48,"width":49,"height":50,"alt":51,"caption":52},"\u002Fassets\u002Fwork\u002Fmore\u002Fprototype.webp",3024,1890,"Figma canvas with dozens of screens wired together with prototype arrows","The Figma prototype, borrowing ideas from products like Vercel, Netlify, and DigitalOcean.",{"role":54,"team":55,"timeframe":56,"shipped":57},"Writing specs with stakeholders, then design, from notebook sketches to detailed Figma prototypes, then the Vue.js frontend.","Me (design and Vue.js frontend), Brandon (CEO), and backend engineers on the infrastructure and APIs.","Take #1 announced in September 2019 and dropped in 2020. Take #2: the three years or so it took to build, about six months of private beta, then a public launch in summer 2024.","[Hosting for Craft](https:\u002F\u002Fcraftcms.com\u002Fcloud \"Craft Cloud, a scalable hosting platform, by the team behind Craft.\"), managed and run from [Craft Console](\u002Fpixel-and-tonic\u002Fcraft-console \"Craft Console\").",{"type":59,"value":60,"toc":154},"minimark",[61,66,70,74,77,81,93,97,100,103,106,110,113,118,121,124,128,138,141,145,148,150,152],[62,63,65],"h2",{"id":64},"the-challenge","The challenge",[67,68,69],"p",{},"Customers kept asking, in support and at our conferences, for a hosting solution from Pixel & Tonic itself, so they wouldn’t have to deal with DevOps. The solution would serve the customers we already had and give the company another source of income.",[62,71,73],{"id":72},"my-role","My role",[67,75,76],{},"Cloud is the most representative of what we started from scratch at Pixel & Tonic. I spent time with Brandon, our CEO, the engineers, marketing and sales to define the problem and write the specs. Brandon was still around to help with the decisions, but he was stepping back from design, so I was mostly the only one working on it. I designed it and built the frontend in Vue.js, with Storybook for its components, against the APIs the backend engineers were providing.",[62,78,80],{"id":79},"the-tension","The tension",[67,82,83,84,92],{},"Our first take followed the headless trend as a headless-only platform. We were so sure of the direction that we ",[85,86,91],"a",{"href":87,"rel":88,"title":90},"https:\u002F\u002Fcraftcms.com\u002Fblog\u002Fcraft-4-craft-cloud-announced",[89],"nofollow","Craft blog: Craft 4 and Craft Cloud Announced at Dot All 2019","announced it at the 2019 Craft conference",", before anyone outside had used it, and jumped a bit too early into planning and coding. A year later, the people testing it weren’t happy with the small part we had made. We had built for where we expected the market to go, not for what our customers would actually do with it.",[62,94,96],{"id":95},"what-wasnt-obvious","What wasn’t obvious",[67,98,99],{},"Many Craft sites rely on custom plugins, and Take #1 couldn’t run them. Early testers found it too limiting. They wanted the Craft sites they were already building to be easier to run, plugins included.",[67,101,102],{},"Other ideas also came out when we included customers in our brainstorming sessions for Take #2, like working as a team on projects, or organization licenses and billing.",[104,105],"project-image",{"src":42},[62,107,109],{"id":108},"take-1-to-take-2","Take #1 to Take #2",[67,111,112],{},"Customer feedback made it clear Take #1 didn’t properly address the customers’ needs, so we needed to pivot. We scrapped work and went back to the drawing board. For Take #2, we brought a group of 10 to 15 people into our brainstorming sessions: developers, agencies and customers. They didn’t want headless Craft in the cloud, they wanted a flexible hosting solution tailored for Craft.",[114,115],"project-images",{":srcs":116,"size":117},"[\"\u002Fassets\u002Fwork\u002Fmore\u002Fcloud-v1.webp\",\"\u002Fassets\u002Fwork\u002Fmore\u002Fconsole-v3.webp\"]","wider",[67,119,120],{},"I took a lot of inspiration from services like Vercel, Netlify and DigitalOcean as they have a lot in common with Cloud. I was struggling with a deep hierarchy, from the organization down to a project, its environments (Production, Staging, Develop) and each environment’s deployments, logs and variables, and I borrowed a lot of ideas from Vercel there.",[122,123],"cloud-hierarchy",{},[62,125,127],{"id":126},"impact","Impact",[67,129,130,131,137],{},"Developers ran their real projects on it through the private beta, and Craft Cloud ",[85,132,136],{"href":133,"rel":134,"title":135},"https:\u002F\u002Fcraftcms.com\u002Fblog\u002Fintroducing-craft-cloud",[89],"Craft blog: Introducing Craft Cloud","launched publicly in summer 2024"," to a warm welcome from the community.",[104,139],{"src":30,"size":140},"wide",[62,142,144],{"id":143},"what-didnt-go-as-planned","What didn’t go as planned",[67,146,147],{},"We heard customers at conferences and in casual conversations, but for Take #1 we never really put them into our discussion group, and that should have been the very first step. For Take #2 we did, and it made all the difference. So now I’d rather reach out early to a limited group of users to make sure everything is headed in the right direction, without going public too soon and setting the wrong expectations.",[104,149],{"src":36,"size":140},[104,151],{"src":12,"size":140},[104,153],{"src":48,"size":140},{"title":155,"searchDepth":156,"depth":156,"links":157},"",2,[158,159,160,161,162,163,164],{"id":64,"depth":156,"text":65},{"id":72,"depth":156,"text":73},{"id":79,"depth":156,"text":80},{"id":95,"depth":156,"text":96},{"id":108,"depth":156,"text":109},{"id":126,"depth":156,"text":127},{"id":143,"depth":156,"text":144},{"path":166,"title":167},"\u002Fpixel-and-tonic","Pixel & Tonic",1794580507574]