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.
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.
Rivet’s API is now being implemented in WordPress.com’s signup.
user research, competitive analysis, wireframing, prototyping, visual design, development direction, front-end development, usability testing, product management
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.
MetadataLearning about small businesses
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.
MetadataWhat exactly are we building?
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.
MetadataLet's start from the ending
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.
MetadataPutting 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.
MetadataWe're off to see the wizard (of Oz)
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.
MetadataLanguage is integral to design
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.
MetadataDrawing a lot of different robots
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.
MetadataMaking smart design decisions
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.
MetadataTesting with real users
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.
MetadataWhat did we accomplish?
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.