Relume is a small, bootstrapped startup founded in 2020 based out of Sydney, Australia. Since launching their product in November 2021 they’ve grown to 41,000 users with no outside funding, impressive for a team of only seven people.[1] Relume was originally a design agency, but switched to being a product-led company that provides tools and resources for Figma designers & Webflow developers.[2] Their original product was a component library for Figma and Webflow, which contained customizable blocks that could be reused across websites; however, with the recent explosion of AI driven productivity tools they pivoted to expand their offering.[3]<\/p>\n\n\n\n
Here’s a demo of Relume generating copy that’s tailored to an existing website.<\/p>\n\n\n\t\t
Relume is extremely intuitive and easy to use. It starts with a text prompt asking for a description of the company or website with a 1-2 sentence overview and how many pages to generate. Relume then leverages OpenAI’s large language models for prompt interpretation to create the sitemap.[3] A benefit of using these transformer models is that each output is uniquely generated, not reused from prior websites. This creates more variety in the final product and helps avoid copywrite issues with the content that’s generated. The sitemap (shown below) is a diagram of all the web pages and their corresponding sections. If the user isn’t happy with the output, they can regenerate a new set of pages and sections from the same prompt, adjust the prompt to steer the results in a certain direction, or edit the sections directly.<\/p>\n\n\n\n Once the sitemap has been generated, the designer can quickly switch to a wireframe view (shown below) to see the detailed layout for each page and section. These layouts are generated automatically using AI to drastically speed up the process. It’s able to render the entire website template in a matter of seconds including features such as navigation bars, customer reviews, etc. The wireframe is fully customizable, giving the designer full control over the final layout. They can also switch out any component for another design that’s in the Relume library and the new elements are automatically populated with AI written copy.<\/p>\n\n\n\n Once the wireframe is complete, Relume has integrations to push the site to Figma and Webflow where the web designer can finish styling the site with the images, fonts, color schemes, etc.<\/p>\n\n\n\n Relume’s customer value proposition is all about boosting the productivity of web designers. Relume is targeting individuals, freelancers, and web design agencies who can use this to increase the number of projects they’re able to complete, effectively increasing their hourly rate. A typical freelance web designer makes between $30-80\/hr with most making around $75\/hr.[4] On a per project basis, the cost can vary significantly with the complexity of the task but in general it falls between $1,000-5,000 per job.[5] Relume’s approach is to empower the designers rather than replace them. Their goal is to automate 70% of the solution, handling the heavy lifting with templating, layout, and copy. The remaining 30%, which contains font selection, colors, images, etc. still needs to be done by a human.<\/p>\n\n\n\n In terms of value capture, they charge a nominal monthly subscription fee with different tiers based on the features needed and volume of work. Since many of Relume’s products are in Beta they’re likely still testing the pricing. Currently access to the component library is free forever if you’re only working on a single project. There are options to pay $38\/month for up to 3 concurrent projects or $48\/month for unlimited projects. For Relume Ipsum, which generates the AI copy material, the pricing is based on the number of words generated per month. It’s free for up to 2,000 words per month, $19\/month for up to 10,000 words, and $49\/month for up to 50,000 words. So far, the product appears to be extremely sticky, boasting an impressive 90% retention rate.[3]<\/p>\n\n\n\n Pricing for Relume Library:<\/strong><\/p>\n\n\n\n Pricing for Relume Ipsum:<\/strong><\/p>\n\n\n\n The biggest challenge Relume faces is competition. There’s no shortage of AI driven productivity tools being developed for web design, both from incumbents like Wix<\/a> and new entrants like Universe<\/a>. However, Relume has positioned themselves well with a few key decisions. First, they’re building on top of the established design systems instead of trying to disrupt them. This lowers their development efforts since they don’t need to rebuild everything from scratch and makes it easier for customers to adopt Relume into their existing workflows. Second, Relume has already built their library with over a thousand components. While competitors need to devote resources to building the base components, Relume can focus their attention on advancing their AI offering. Finally, Relume’s bootstrapping efforts combined with their product-led growth strategy focuses them on delivering a top-quality product. This created a loyal community of users and 4,500 members on their slack channel who provide feedback and support.[3]<\/p>\n\n\n\n While bootstrapping has been beneficial so far, they will likely need to fundraise in the future if they want to scale. Their team is entirely product and engineering personnel with only one support member. They’ll need to hire sales, marketing, support, accounting, etc. Depending on how large they want to become this could significantly change their org structure.<\/p>\n\n\n\n While they don’t have dedicated sales and marketing yet, Relume has found creative ways to generate publicity including the Relume Design League. They brought together eight web designers to compete head-to-head in a tournament of 30-minute design challenges that were live streamed on their YouTube channel. The audience voted on the winners who were awarded cash prizes totaling $10,000.<\/p>\n\n\n\t\t For a full demo of Relume’s capabilities, the video below walks through designing a website from start to finish including the integrations with Figma and Webflow.<\/p>\n\n\n\t\t![\"\"](\"https:\/\/d3.harvard.edu\/platform-digit\/wp-content\/uploads\/sites\/2\/2023\/11\/Relume-GenAI-Prompt.png\")
<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n<\/figure>\n\n\n\n