Modernizing Default AI Websites With Gallery Module and Smart Sections

About Bookmark

Bookmark is an AI website builder that enables small business owners and agencies to create websites without any technical knowledge.

Challenge

While conducting user interviews, 2 out of 4 users said they built some of their clients’ websites on competitors’ platforms because the default AI-generated websites on Bookmark were not visually appealing.

During the user tests, 4 out of 8 testers said that the default website they saw was good, but could be better.

Opportunities

The opportunity was to modify the builder so that default websites look modern, thereby competing with other website builders in the market. Ideally, at the end of the project, we would see an increase in conversions.

Role and Duration

I met with the Product Manager and Product Associate weekly to define problems, prioritize features, and plan designs while also considering the engineering constraints. In the development stage, I communicated directly with the engineers, Product Associate, and the ProductProject Manager to facilitate the product release. Duration was 3 months.

The Process

1. We Defined Two Types of Affected Users

Website Owners: business owners, agencies, people who build websites with the Bookmark website builder

Website Visitors: any user who visits the websites of the Website Owners

2. What do Business Owners & Testers Think About Websites Built With Bookmark?

User Interviews

We interviewed 4 different Website Owners; 2 agencies and 2 small business owners.

The overwhelming feedback was that they expected a more modern-looking website once the AI was done designing. Since they could get modern templates on other platforms, they were not seeing the value of AI-generated websites.

Even though users could further edit their websites to make them look better, the default website built by the AI set the tone for the rest of their experience.

UserTesting.com

We ran user tests on UserTesting.com with 8 unique users with different technical competencies to gather more qualitative data. They had the role of Website Visitors.

4 out of 8 testers commented on the quality of the default website. Some of the comments were:

"Website looks nice but I wouldn't use it"

"I wish I could see what it looked like before the AI made it, I think it’s ok but could be better"

There was an overall lack of excitement about the websites. People were excited to watch the AI build a website for them based on the parameters they provided, but once they saw the final product, the excitement wound down.

3. What's Modern?

So many elements could be changed; we could tackle images, color palettes, and font styles. After speaking to the engineering team about constraints and getting data from Customer Support on the most commonly used modules and smart sections, we decided to go with galleries.

I spent some time looking at website templates and reading design articles to understand the trends of the year. Modern galleries meant images that overlap, options for rounded corners, galleries beyond the standard grid with simple shapes (longer, wider), big images, and full-width galleries. We could also create text and gallery combinations for the most commonly used smart sections, such as “About”, “Hero”, and “Product Summary”.

4. Building Websites to Further Empathize With Website Owners

To put ourselves in our users’ shoes, we spent time designing websites in product meetings. We played the role of a business, for example: “I am a [business type i.e. flower shop] owner and I need a website. I’ll go through the steps of the AI and see if the website I get is satisfactory.” Even though it was hard for us to fully understand what a flower shop owner needs without having conversed with one, it was useful to discover patterns.

These were some of the findings:

Multiple smart sections with similar gallery designs

Opportunity for more variety by removing some of the old designs to make room for new gallery smart sections. When the AI creates a website, it can choose from a wider number of sections. If users don’t like the default website, they can click on the “Remake Website” button and they can see another version.

Images with descriptions had a hover effect to show the description, but no way to change the hover effect. The only thing that was available was choosing to display or not display the description.

Opportunity to add more hover effects when description is on, which gives users more control.

No indication on images that when clicked, they could open in a lightbox

Opportunity to show users images would expand once clicked, which would help with recognition.

5. Prioritization With RICE (Reach, Impact, Confidence, Effort)

The team used the RICE scoring model to prioritize features according to reach, impact, confidence, and effort. The look of a default website is defined by a list of elements: typography, color palette, images, image galleries, and more. We reduced the list to 4 main potential features and prioritized that list. It was obvious that the gallery module and smart sections would be how we'd proceed.

6. Design Iterations

How the Bookmark builder works:

The AI uses smart sections to create a website layout. Smart sections are pre-designed sections which the AI assembles and adds styling to, based on user prompts. Each smart section consists of multiple elements called modules. Users can modify each module inside a smart section. However, the AI can only use smart sections when assembling the website.

First Approach: Changing Default Settings to Achieve Variety

Default Gallery Smart Section 9

Edited Settings = a New Smart Section

The initial look of a gallery module were simple shapes with space between them. These were used inside smart sections which the builder was selecting when creating a default website.

When this project began, my first approach was to take the current galleries and set default settings per smart section. For example Smart Section 9 and 10 are both Standard Galleries with spacing of 10 px between images and 2 rows. If we modify Smart Section 9 to default to no spacing and 4 rows, we would get a completely different gallery.

However, when speaking to the engineers, I learned that there were technical constraints which would not allow us to take this approach. Instead we focused on creating new gallery styles, which would add variety and look modern out of the box.

This would require breaking down the task into 2 steps: creating new gallery modules and then using the gallery modules to create smart sections.

Second Approach Phase 1: Creating New Gallery Designs

Galleries Can Be Edited With Gallery Settings

Modern Image Clusters Cannot Be Edited as Gallery settings but instead each image can be edited with image module settings

Designing new galleries from a UI perspective was easy; just get creative and make collections of images that look modern. From a UX perspective, however, there was a major obstacle I had to overcome. The designs had to work with the gallery settings; e.g. users had to be able to add rows of images, modify the spacing between them and make sure they still look good.

However, some of the modern styles of displaying images were not in line with how galleries worked. For example, overlapping images were a design choice that would make a website look modern but could not be edited with the gallery settings (change space between images and add new rows of images below the current row of images).

A new opportunity emerged: create not only galleries that could allow adding columns (gallery module) but also clusters of images (combined image modules) which would significantly modernize the look of default websites. The engineering team confirmed that this would be a low effort and fast task for them, so we proceeded with the idea.

Second Approach Phase 2: Grabbing an Opportunity to Add More Variety With Image Clusters

Image clusters were great when added to the most commonly used smart sections, such as "About", "Hero", "Services & Products". Since they weren’t related to the gallery module, I didn’t have to separate the design of the module and the smart sections. Instead, I went straight to creating smart sections.

Hero

About

Services & Products

Phase 3: New Settings & Modifying the Gallery Module Editor

How We Solved Problems

When it came to the module editor, I had to solve two problems:

1. There was no way to inform website visitors that the gallery was going to open in a lightbox (if lightbox mode was on). I resolved it by showing users with an “expanding” icon that images would expand when clicked.

Lightbox On

2. There was no way for Website Owners to pick a hover effect when descriptions for gallery images were available. To give users more control, I added 7 new design options.

Some designs listed below:

Underlined

Framed

How the Editor Changed

New design options required a way to display them in the builder. I added an icon that represents “hover”, which opens a lower section with 3 scenarios. To manage expectations, the displayed text changes depending on the scenario.

Scenario 1: User has not entered any description text and lightbox is on

Scenario 2: User has not entered any description text and lightbox is off

Scenario 3: User has entered description text in at least one image and the lightbox is on. They can only choose one hover effect, and will see the options in the same list.

Constraints

Small development team where the heavy lifting on the builder side was done by one developer. Consequently, a lot of limitations were present when it came to adding functionality and prioritizing important modules, such as the image module. To resolve this, we balanced between team availability and impact, and prioritized the gallery module instead.

Technical constraints made it hard to incorporate everything we wanted to change into one ticket so we separated the project into different sub-projects to achieve the final goal of having more modern-looking websites (gallery smart sections, smart sections with image clusters, editor settings changes).

Results

While we had no data relating directly to gallery smart sections, we had general company data available for the dates after they were released on December 8, 2022.

Growth: Including Moneris customers (Bookmark’s partner), we added 80 new accounts in December and 118 new accounts in January. Not including Moneris customers, we added 55 new accounts in December and 83 new accounts in January.

Churn: Overall churn was 3.0% in January, which was lower than 3 months prior at 3.9% in October, 3.2% in November and 4.2% in December.

Even though Bookmark is a platform that consists of more than just the website builder, with the reduced churn, we can conclude that the continuous improvements have made it possible for people to stick around on the platform a bit longer. Additionally, with the new users, people were interested in using the platform.

There is always more room for improvement and further growth.

Future Considerations

Track usability data

Follow trends to add more modern galleries