Skip to main contentOctopus Think

Rivet

An experimental project designed to vastly simplify and streamline the WordPress site-building process for small business owners by using technology to automate design decisions.

Project overview

Problem

WordPress is still a tool primarily designed to build blogs, and WordPress.com was losing small business customers to competitors. We needed a way to help these customers build a website quickly and with minimal technical knowledge.

Solution

We designed a tool to help businesses owners build a website in a matter of minutes. By leveraging smart decision making and automation, we were able to simplify the process of designing and building a website.

Outcomes

Rivet’s API is now being implemented in WordPress.com’s signup.

Our contributions

user research, competitive analysis, wireframing, prototyping, visual design, development direction, front-end development, usability testing, product management

Move to next panel
A mockup showing the Rivet site—featuring a friendly robot illustration and marketing copy—on a desktop, tablet, and phone.

Metadata

Introduction

The challenge

Building a website from scratch is a challenge for small businesses, who often lack the resources to pay a professional. Even for agencies and freelancers who build WordPress sites every day, the process is needlessly complex and time-consuming.

Rivet was an experimental project that aimed to simplify that process by making it as easy as possible for small businesses to get up and running with a simple one-page website.

Move to next panel
Another screenshot of the landing page for the Rivet website.

Metadata

Learning about small businesses

User research

We started by talking to small business owners to get a better understanding of their needs and pain points. We found that business owners had no interest in the process of building a site, but didn’t have the budget to hire someone to take it on. Content generation was a huge blocker, and many people abandoned sites full of dummy content.

Move to next panel
Interview script and written-up stories from user research sessions with small businesses.

Metadata

What exactly are we building?

Strategy

Our goal was to build a system that allowed small businesses to set up a site that felt both useful and unique to their company—in less than five minutes.

To accomplish this, we designed a system that pulled data from existing online sources and then leveraged machine learning to programmatically build out starter sites for small businesses using a minimal number of user-provided inputs and decisions.

Move to next panel
Screenshots showing the flow of screens Rivet uses to build out sites for users.

Metadata

Let's start from the ending

Ideation

We started by desiging a minimum valuable website for a small business: how much content and customisation would be needed for a business owner to immediately want to publish their site?

To validate our hypothesis, we bootstrapped a v0.1 of the proposed template and tested it with users who had previously struggled to build a site on WordPress.com. When results proved positive, we moved forward with plans for increased automation.

Move to next panel
Sample single-page website designs for small businesses.

Metadata

Putting pen to paper

Sketching & wireframing

The user experience is heavily modelled on Sarah’s process honed over years spent building websites for small business clients. Each step is essentially a programmatic representations of the design process, asking clients directly about their needs.

Move to next panel
Photographs of initial sketches & wireframes.

Metadata

We're off to see the wizard (of Oz)

Prototyping

Given the complexity of the project, prototyping, in various forms, was critical to its success. We used Wizard of Oz prototyping techniques throughout to continually check if our proposed system was heading in the right direction. We iteratively improved and modified flows and prototypes in response to both customer and technical feedback.

Move to next panel
A series of UI screens connected by arrows to illustrate flow.

Metadata

Language is integral to design

Copyediting

We knew that business owners typically weren’t very technical, so we worked to ensure that the language was friendly and jargon-free. We limited the number of questions asked on every page to help users focus on the task at hand.

Move to next panel
Screenshots of GitHub issues discussing copy improvements.

Metadata

Drawing a lot of different robots

Visual design

Rivet was intended to communicate strength, stability, and a DIY approach. We designed a friendly robot to act as a mascot and guide users. The style is based WordPress.com’s visual language at the time, whilst still having a distinct character.

Move to next panel
Sketches of a robot mascot, next to screenshots of the final illustration.

Metadata

Making smart design decisions

Designing intelligence

A key principle of Rivet was to make smart decisions for users, but to allow for manual correction in case we got things wrong.

The system uses geolocation to find your business, then confirms it’s found the right one. It finds social media accounts to scrape additional data, but checks to confirm. It then gets your logo, generates a colour scheme, and pieces together an about page. Finally, it asks for keywords, which are used to inform visual design and styling.

Move to next panel
Screenshots of Rivet making smart default choices, but allowing for user correction.

Metadata

Testing with real users

Usability testing

We ran usability tests iteratively throughout the process, both to test the effectiveness of the final site and to test the interface itself. We tracked key metrics to judge our progress and further rounds of testing were done at each milestone as the prototype developed.

Move to next panel
Write-ups from usability testing, showing quantitative data.

Metadata

What did we accomplish?

Outcomes

Rivet has been used as a yardstick for innovation and improvements to WordPress.com. A year later, the design patterns, approaches, and Rivet’s API are now being implemented in Automattic products: the WordPress mobile app, in WordPress.com onboarding, and in third-party importers.

The Rivet robot waving.