The home page is perhaps the most important page on a website. The home page—and more specifically, the first few hundred vertical pixels of the home page—is the first and often only opportunity to capture the user’s attention and to convince them to stick around. This window of opportunity is minuscule; most new visitors make a judgement about the site’s relevance and worthiness in a matter of seconds. The Publishr website’s header is designed with that small window in mind. It divulges just enough information about the service to (hopefully) pique readers’ curiosity.
You’ll notice that this site consists of multiple “pages” stacked vertically on top of each other into a single, longer page. Because of this design approach, Publishr doesn’t have a “home page” in the classic sense. For the sake of this essay, when you see the terms “header”, I’m simply referring to the content that would exist on a normal site’s home page (that is, everything that appears above the Features section).
The service’s slogan, “Simple blogging for designers”, describes the service as concisely and accurately as possible, and it leads the reader to the subheading: “Don’t let services like TypePad and Blogger chain you down. Take control of your blog with Publishr.” This short intro is filled with rhetorical devices. It is intended to invoke feelings of restriction or even repression by competing services, and to contrast Publishr as a means to gain freedom from that repression, “breaking loose” from the chains. The intro also positions Publish staunchly as a better alternative to Blogger and others, a theme that we’ll see repeated further along in the site.
The slideshow is also an important rhetorical device: it shamelessly invokes images of famous web and print designers in order to establish Publishr’s credibility. Of course, the referenced designers don’t actually use this hypothetical service, but they’re the kind of people that would—and you should too! The selected images highlight a diverse range of blogs to illustrate Publishr’s flexibility, and they are also meant to allude to the features that set Publishr apart from competitors.
Also note the two prominent buttons directly underneath the subheading. A number of visitors will have already made a decision by the time they finish perusing the header, so the site capitalizes on that group by giving them the chance to “Sign up for free” right off the bat. These people are often more interested in learning about the service not by reading the marketing material, but simply by playing around with it. Registered users already know where they want to go, and the “Log in” button allows them to get there quickly.
I’m rather satisfied with the design of the header. I managed to fit a good number of elements into a rather small space, and they all balance each other out pretty well. The blue to slightly-lighter-blue gradient, the subtle “glow” coming from behind the slideshow, the slideshow itself and the two prominent buttons scream “product landing page” to me, which was indeed the goal.
At this point, readers will want to know, “What sets Publishr apart from the vast desert of competing services?” Or more succinctly, “Why should I sign up?” After scrolling past the site’s header, readers are drawn directly into a more detailed description of Publishr’s features. The first three features are unique to Publishr, and they’re given a design treatment to reflect this. Their prominent position, the strip of blue supporting them, and their slightly larger type size all indicate their importance.
The copy describing these three features plays off of two common qualities of Publishr’s target demographic: desire for creative control, and pride. “Complete design control” assures the reader that Publishr grants them the creative control that they seek, and “Breathe life into each post” takes it one step further by allowing them to design not only the overall blog, but each and every post individually. This second feature also invokes big name designers, this time more directly. The third feature description may as well read “You’re probably a bit conceited. We’ll help you show off.”
The other features described in this section are not as emphasized as the first three, simply because they’re features that can be found in competing services. Most of these could be considered the features that a blogging service should include by default (though the text might emphasize Publishr’s implementation of those features is more robust than others). There are still a couple of points worth mentioning, however. Certain features are intended to give the user peace of mind (backup, versioning, security), while others establish the service’s flexibility (storage, mobile posting, multiple users).
The conversational tone and occasional use of humor attempts to bring the company down to earth while emphasizing the fact that they’re also designers—“we’re just like you, so we know what you’re up against.” It also reinforces Publishr as a “worry-free” blogging service.
With a bit more time, I would give this section a bit more design attention. The three highlighted features deserve more visual “punch” to drive home their importance to the service, and the other features seem to need a bit more visual support as well. This support might take the form of icons or screenshots of each feature as appropriate.
Publishr’s pricing structure and its associated presentation on this site are also worthy of analysis. The Pricing section takes the items listed in the Features section and places them on a value scale to appeal to multiple types of customers. The “Free” tier is particularly important to the pricing structure: by letting users sign up for a slightly limited free account, the site can hopefully encourage users to try out the service and then upgrade to a paid account. Publishr’s most profitable tier is the “Pro” plan, and it’s given a design treatment to match. The Pro plan almost literally “stands out” from the others to indicate popularity and desirability (even if the Pro plan is not necessarily the most common account type among registered users).
One side note: I attempted to design the pricing table to appear as if it were standing vertically on a “floor” of light blue below it, as a visual device to help emphasize the Pro plan’s forward position. However, I’m not entirely sure I was successful in that attempt. With a bit more time, I would probably add a couple of subtle visual cues to reinforce the floor and wall imagery (a power outlet on the wall or tiles on the floor, for example).
The Reseller tier is an interesting concept to me, and one I would definitely flesh out a bit further if I were to actually create a blogging service like this. A Reseller account would allow for a designer or design firm to rebrand the Publishr interface and sell it to their clients as if it were their own; this is a business model that I’ve come across more frequently in the last couple of years, and I’m rather intrigued by it.
The pricing section leads the reader without delay to the sign up form. This is the deciding moment for a site like this one: has the user been convinced? Is he or she enthused enough to spend fifteen seconds filling out a web form to set up a free account? When a new user fills out and submits a form on a website, the website is said to have achieved a “conversion”, which I’ll discuss more in a later section. Each and every bit of visual and verbal rhetoric on a site like this one is focused squarely on scoring that conversion. While the sign up form itself is not as filled with rhetorical devices as other sections of the site, there are still a couple of points worth mentioning.
The leading phrase, “Get started right away with a free account”, is meant to imbue the reader with a slight sense of urgency. Also note that the form itself lacks any means of selection of a pricing plan, because “you can upgrade any time after registration”. This hopefully encourages users to get in the door, at which point we have much more time to encourage the user to upgrade—we can allow the service to speak for itself.
The form is kept as minimal and simple as possible in order to remove as many perceived barriers for entry as possible. As the user tabs through the four short fields, additional instructions and notes appear to the right. These, again, are generally intended to assuage potential doubts the user may have. “Trust us—we hate spam just as much as you do” reinforces the people behind Publishr as being “just like you, dear designer”. The blog address field’s “Don’t worry, you can change this later” instruction hopes to prevent the user getting hung up on deciding on a name for their blog (hesitation which could lose the conversion).
There are a number of tools that site owners can use to gauge the effectiveness of their rhetoric. Some of these methods are particularly suited to an online subscription service like Publishr.
Conversion rate
This is perhaps the most important metric for a site like this one. In general terms, conversion rate is simply the percentage of visitors that achieve one or more “goals” defined by a site creator. For the Publishr site, the goal is for a visitor to successfully fill out and submit the sign up form. This can be measured by a drop-in analytics service like Google Analytics.
Time on site
Analytics services also measure the length of time that each visitor spends on the site and on specific sections. In general, this statistic is only significant if it is extremely low, in which case the site owner might want to dig a bit deeper through other metrics to see why visitors are leaving so quickly.
Bounce rate
Bounce rate is defined as the percentage of visitors that arrive at a site and leave shortly after without continuing on to other pages on the site. This can be a somewhat inaccurate metric for a site like Publishr’s, which essentially only consists of one page. Even in general, bounce rate is not always a very informative statistic, because there are so many possible reasons that users leave a website right after arriving—a “bounce” does not necessarily indicate an unsatisfied user.
A/B testing
A/B testing (or split testing) is an age-old marketing method which allows companies to test minor or major variations in their marketing materials to gauge the differences in reader response. This technique is perhaps more informative for the web than it is for any other medium, because site owners can directly measure the effect that multiple versions of visual and verbal rhetoric have on statistics like the above three. For example, if Publishr’s web designers wanted to find the most effective color for their sign-up buttons, they might create the same button in a few different shades of green and blue. They would then display different variations to different users and measure the conversion rate for each one (over a sufficient sampling of users, of course). This process occurs on the live site with real users, and it is essentially transparent to those users.
There are many tools that allow for A/B testing, like Google Website Optimizer (noticing a trend here?). These services often integrate directly with analytics services, and some even automatically select the most effective variation after a sufficient sampling has been achieved.
Usability testing
During the development process, it’s common for web designers to test and refine a site by administering formal or informal usability tests. A usability test might involve wrangling a group of ten or twenty users in the target demographic and recording their actions as they progress through a beta version of the website. This allows designers to see which areas are potentially problematic, and more importantly, it allows them to see how real people actually use the site. Designers can use this information to inform their design and development process.
Direct feedback from users
This is often an overlooked factor among site owners, but it’s vitally important to the success of a website. Real feedback from real users can often reveal issues with a site that no analytics service or testing can. This feedback can take many different forms (email, online chat, phone), but it’s imperative that site owners open up these channels for their users and actively encourage their feedback.
Single-page design approach
I can’t say there was any rhetorical purpose behind my decision to build this website as a single page with stacked sections; I just like building one-page sites. While it raises its own set of design issues obstacles, this approach does seem to lead to a slightly more fluid browsing experience. Scrolling through a long single page feels more natural than clicking between multiple pages in a navigation menu. I’m excited to see that this trend is catching on, too: check out onepagelove.com for a gallery of examples.
Typography
The site’s headings are set in Proxima Nova via Typekit, a web service that I evangelize incessantly, as I’m sure you’ve noticed. Body copy is set in Helvetica for users who have it installed (mostly just Macs), and it falls back to Arial when Helvetica is not available. If Proxima Nova does not load correctly—which happens on occasion—headings will also fall back to Helvetica and Arial on the font stack that I defined.
I thoroughly enjoyed designing and building this site. Working without a client to satisfy, a boss to pacify, or a budget to watch can be a truly freeing experience. However, it can also be rather frustrating, as the lack of exactly those three things often causes my perfectionism to run amuck. Hopefully, more personal projects like this one can help me reign it in in the future.
What made this assignment particularly interesting for me though was the process of writing about and analyzing what I was building as I built it. It’s not common that I get the opportunity to ramble on about my work in an academic context like this. It also forced me to approach the copywriting and design process very differently, as I was constantly trying to imagine how I would explain my own decisions in a rhetorical light. It seems to have shed new light on the things that I’ve been doing on a less conscious level for years now.
As for Publishr itself, right now it’s just a hypothetical service. Will I ever get a team together and actually build it? We’ll see.