Home / Portfolio /

AI-driven website builder

#webdesign #AI

Project background

Tools used

Background

This project started when Ruckzack, a web-agency I had been working with for some small website projects contacted me with an interesting proposal. Their goal was to build a very simple version of an AI website builder. The interesting part to me was that they intended to use the website builder as a funnel to show leads that even a simple website can be beneficial for any business. Leads would try out the AI website builder, see their auto-generated website and start using it as their actual website. After a while they would be convinced that having a real website makes a lot of sense for their business and decide to invest into a hand-crafted website by hiring the digital agency that provided the free AI website builder in the first place.

I liked this clever concept and decided to get involved with the project. When the client contacted me they had already built an MVP and they gave me a demo of the whole website-builder in our second meeting. The demo showed how a potential customer would go through a long multi-page form, fill out text fields with things like their name, address or business sector, select their favorite color and style, and so on. After the whole form was filled out the tool would create a full website using AI and resources such as Unsplash. The final website would feature hero images, generated text about the business, CTAs, contact forms and much more.

Process

I was honestly impressed by the MVP from a purely technical point of view. However, from a UX perspective it was very apparent what was missing: a user story that would make use of the impressive technology in a way that makes actual sense. My goal for this project was clear: to offer the client a coherent vision and guideline for transform the MVP from a tech-demo into an actual product.

Thinking about the target audience and creating user stories was crucial for this project. After several meetings the client and I agreed that for the AI website builder to make sense it would have to target those potential customers that do not want to spend a lot of time tinkering with their own website. After all, the goal was to convince them that a website for their business makes sense in the first place. From this point of view, it was clear that the entire website generation process had to be stripped down to its very essence. Simplicity was key and so was speed. The tool should enable users to see their own website in a matter of seconds, not minutes.

This also meant reducing the amount of effort required by the user to an absolut minimum. In a first step, I compared typical simple website builder templates to identify essential components for the generated website. This resulted in a surprisingly small number of must-haves such as the company's name and contact details, the business category, a CTA and a few other niceties such as a contact form, hero and portrait image. Other things such as testimonials were categorized as 'nice-to-haves' and did not make the cut.

After this, the questionnaire-style form was radically simplified to only ask the user for the minimal amount of data. Of course the quality of the generated content on the website would take a slight hit by the lack of more detailed user information. However, the tradeoff for speed and simplicity would definitely be worth it when judging the AI website builder as the lead funnel it was meant to be rather than as a standalone product. This reduction process logically led to an extremely simple form that featured just 6 important questions:

• What’s the name of your business?
• Which industry is your business in?
• What are your business’s most important offerings?
• What are the contact details of your company?
• What do you want visitors of your website to take away and do?
• What style represents your business best?

To handover my work back to the client I wanted to create a prototype that showed the potential of the design. My goal was to present the client with a believable simulation of the streamlined user flow and prove my hypothesis that the user experience should almost exclusively focus on simplicity and speed. Instead of hooking up mockups in Figma I instead came up with the most simple prototype ever that felt much more like a real product at the same time: a form I created with an online form creator.

Results & Takeaways

Prototypes don’t always have to be elaborate or technically complicated. Sometimes the best prototype is a piece of paper that you turn around to simulate a screen changing. In this case the best prototype was one that best simulated the user experience of going through a simple, streamlined form. I quickly did some research, found that the website typeform.com had a free demo function and created my prototype with their online-builder. Building this prototype took me about 10 minutes and when I showed this to my client they were immediately convinced that reducing their complicated website builder to its essence was the right way to go.

<-- Back to my other projects