Skip to content Skip to menu


Automattic backdoor

Photo by Titanas

Redesigning Automattic's websites

Automattic is a company founded in August 2005 by Matt Mullenweg, the creator of WordPress. Since then, this startup has worked on many different things somehow related to this popular content management system in an attempt to make online publishing easier for everyone. Automattic thus contributes to several non-profit and open source projects, but also develops and maintains a growing number of products and services:

What's interesting here is that these projects were started or acquired at different points in time and their public-facing websites all look different today. If you take the time to visit a few of them, you will see there is no unified user experience, even among the ones actually generating revenue through premium features or plans.

Maybe Automattic simply did not have the time nor the resources to make these websites consistent, possibly even deliberately choosing to keep the projects separate - which could be a sound strategy with regards to the failing mergers that regularly plague the world of startups (take Delicious as a famous example): Automattic gives each project and team its own life, plus provides them with some help and visibility when needed. And they let them flourish all by themselves.

On the other hand, there are some evident benefits of having these projects share some standards regarding visual design, information architecture and even code. It's not as if they were disparate - they are all aimed at making publishing on the web simpler. They are all connected in some ways.

User experience involves a person's emotions about using a particular product, system or service.

So how would you improve the overall user experience across these websites? There are several elements that one can consider, such as a consistent look and feel, layout, or labeling (especially in navigation). Information should be structured and organized the same way, using a similar tone in all wording. User interactions should follow an identical model (e.g. the registration process should have the same steps, if possible). These websites could even share a common url scheme.

Redesigning Automattic's online properties is certainly not an easy task - each project has its own specificities - but would provide users with a better and consistent user experience while achieving the following goals:

  • Improve user satisfaction: visitors who find the information they are looking for easily and accomplish their goals quickly are happy users. Making these websites more cohesive and user-friendly would certainly affect users' perception in a positive way. It would increase loyalty and word-of-mouth. This is especially important as there is already a strong community around WordPress that Automattic's projects could - and in fact already do - benefit from.
  • Generate more revenues: delivering a better experience to users often translates to greater conversion rates. If visitors are presented with useful and clear information, if they don't have to think, then they will certainly be more eager to sign up and use these services (given that they indeed meet their needs). Also, cross-referencing between projects should also help increase the number of sales and downloads.
  • Reduce maintenance: there is probably a great deal of code that could be factorized among these projects since they are mostly based on the same technologies and often offer analogous functionalities (e.g. searching the help section). Having a similar layout and structure, using the same frontend and backend frameworks and libraries would definitely contribute to decrease maintenance efforts.
  • Increase brand awareness and trust: many people know WordPress, but how many know Automattic? A redesign could be an opportunity to better show what cool stuff they are up to and how they are trying to make the web a better place. In the long-term, brand recognition gives a competitive advantage.

So let's take a look at a few of these websites and see how they could be improved. In this article, I chose to concentrate on four of the most popular projects - two entirely free (Gravatar and Jetpack) and two with paid subscriptions (Akismet and VaultPress). I mostly focused on information architecture, but a full redesign would also involve the visual design and development parts. I sketched a black and white wireframe of each homepage with Adobe Illustrator, which I find very convenient for this type of work. You can move your mouse over each screenshot to display additional comments.

Note

These proposals are just ideas based on common sense and my personal experience. An effective redesign should be backed up by data (analytics, A/B testing experiments, customer feedback, etc.) and long-term objectives and strategy.

Akismet

I thought it would be a good idea to use a short video to present each project, since some of them already have one, such as Gravatar or VaultPress. You will also find a section in the middle of each page with a link to the latest news in order to drive more traffic to each blog and be able to engage more users through comments:

Akismet screenshot
  1. The existing About and How it works pages could be easily merged into a single page
  2. I chose to talk about user-submitted content instead of comment and track-back, as Akismet can be used not only in blogs, but also for different types of platforms and applications
  3. Testimonials should be from business customers in order to promote paid subscriptions
  4. I'm not sure whether the label News is better than Blog, but the main idea here is to use the same one on each website (which is currently not the case)

Gravatar

Gravatar is difficult to redesign in the absence of data and strategy because it targets people who want to have an online avatar as well as developers who would like to integrate Gravatar into their website. Since Gravatar is already available for the most popular blogging software, its website should probably target end-users in priority:

Gravatar screenshot
  1. The generic term Help is probably more meaningful than Support for most users
  2. I chose to use get yours instead of sign up for this label, but this should be A/B tested to select the most effective version
  3. This should be updated in real-time, similarly to what is done in Akismet or VaultPress

Jetpack

Jetpack really does have a long list of features, which is tricky to present on a homepage. I chose to group features by category so users could scan through them more easily. Another approach would be to determine the most popular features using analytics and only display these:

Jetpack screenshot
  1. Like with any of the other projects, the main menu should only contain the most requested pages
  2. I have added a section with a strong call-to-action at the bottom of each homepage to improve conversion rates

VaultPress

Regarding headers, I decided to use a layout similar to the one from Jetpack for each project. It is large, with a lot of room. The logo, the headline, and the call-to-action really stand out from the rest of the page:

VaultPress screenshot
  1. Testimonials are especially important for this type of service and a few of them should appear on the homepage
  2. Each project should propose the same methods to allow people to stay connected and be notified of any update

Drop-down menu

The idea behind this drop-down menu, which is located at the top of each page, is to show users some other products and services from Automattic. I designed it as a simple vertical list, but it could also be structured using a horizontal layout, leaving more room for thumbnails or logos:

Drop-down menu screenshot

Conclusion

The major difficulty in this redesign was to explain in the simplest terms what each project does and how it works. You have to put yourself in your users' shoes and try to think like them, which is never an easy task. Also, I’ve tried to keep a similar tone to ensure a consistent user experience and this meant rewriting a lot of text.

You might have the feeling that these websites look too similar now, but keep in mind that they are just wireframes. Each project should have its own visual identity. They should not use the same template with just a different color scheme, but should definitely follow the same design style. However, each website should have its own theme or universe (e.g. the current cloud design of Jetpack).

In this article, I only focused on homepages, but all the other pages should be redesigned as well. This is however, only the visible part of the iceberg – I'm not even talking about the services themselves that you access once you have registered. It is a great deal of work, but little by little, it can be done. Google has already successfully redesigned its online services and was not the first to do so:

IBM's web presence has traditionally been made up of a difficult-to-navigate labyrinth of disparate subsites, but a redesign made it more cohesive and user-friendly. According to IBM, the massive redesign effort quickly paid dividends. The company said in the month after the February 1999 re-launch that traffic to the shop IBM online store increased 120 percent, and sales went up 400 percent.

Battey, 1999

Redesigning a website is an interesting exercise. Redesigning several websites is ... well, a tricky exercise. It's challenging. But building a beautiful, friendly and consistent experience for your users has many, many benefits.

Published February 18, 2013

Comments


Sitemap

Home
The page where everything starts
Articles
Writings on design, development, entrepreneurship and more
About
More information about me
Work
Have a look at the projects I worked on
Résumé
Download my résumé and see testimonials
Contact
Have something to say?

Mention

I am currently open to senior technology positions