Just to refresh your memory, in previous posts we defined the sales figure we wanted to achieve by the end of the year and our marketing KPIs. We also analyzed our acquisition channels. All this is summarized in the following table:
Nelio Content Marketing KPIs table.
As you can see, most of our website visitors come from organic searches and referrals. Therefore, we have to make sure that we craft beautiful contents and our website is lightning fast. In the end, we need to make a good first impression to both our visitors and search engines ?.
Since our resources were (and are) quite limited, we decided to ask our friends at Silo Creativo to take care of the new website’s design. Even though today you can see Nelio Content is part of Nelio Content‘s website, we first wanted the new service to have its own website. So, in this post I’ll share the initial request we made for the design of Nelio Content‘s website, in the hope of helping you to prepare your own request and ease the communication between your web developers and you.
Initial Request for Website Design
The initial document sent to Silo Creativo had the following index:
Project requirements
Description of Nelio Content
Nelio Content target audience
Business Blogger
Professional Blogger
Affiliate Blogger
Personal Blogger ( and Mom Blogger)
Nelio Content website objectives
Examples of keywords
Site map (in Spanish) of Nelio Content
Description of requested pages
Home page
Plans/pricing pages
Blog
Subscribe page
Support (Knowledge Base)
Legal pages
1. Project Requirements
In the first section of our request document, we sketched the general idea of what we needed. In essence, this can be summarized in the following list:
Nelio Content Product logoPossible colors: blue (professional, quiet, trustworthy) black (credible and powerful) White (simple, clean, pure)One typography Easy to display on a desktop computer in WordPressShould evoke:Content conceptAutomationWordPress
Website design for Nelio Content The Nelio Content website should look very professional with a simple and pleasant design. The URL (already registered): https://neliocontent.com We will have two versions, one in English and one in Spanish. We need the design of the following pages (Spanish version):
Home page,
Features (initially, part of the Home Page)
Plans and prices,
Subscribe,
Blog,
Support (creation of a Knowledge Base)
Terms and Conditions, Privacy Policy.
Redesign of the Nelio Software website (https://neliosoftware.com) (this project will be done after completion of the above) Following the same layout defined in Nelio Content, we would redesign the Nelio Software website with the same layout. Again, it will be in both English and Spanish. We will have to change the product section, showing the new service, Nelio Content. The rest of the content should be quite similar.
2. Description of Nelio Content
Next, we briefly described our new product (Nelio Content), focusing on the problems it resolves and the features it includes. If you’re about to create a new website for promoting one of your products, it’s important your (web) designers know as much information about it as possible. This way, they’ll be able to convey your message and values clearly and coherently.
3. Target Audience
As you can imagine, not only the product is important. Your audience (i.e. the receivers of your message and product) also play an important role in any business. All the information you can feed into your designers will ease their work and maximize your efforts. So try to help them understand who the website visitors will be, what they need, or how they search (keywords), to serve as their inspiration in design.
This section, as the name suggests, was intended to describe the objectives of the new website:
The main objective of our website is to get the maximum number of subscribers to Nelio Content.
Secondary objectives It must contain all the information necessary for the use of the tool and such information must be easy and convenient to access. It needs to contain other useful information (the blog) for potential customers, to attract visitors, improve SEO, etc.
5. Examples of Keywords
Taking into account the product we were designing and the problems it dealt with, we looked for all the relevant keywords. The following are a few examples of the keywords we identified:
Content schedule, editorial schedule, social schedule, blog, marketing schedule, content marketing, marketing planning, content planning, marketing automation, and so on.
6. Site Map (in Spanish) for the Website
Our initial proposal was that Nelio Content’s website (Spanish version) would have the following simple scheme, quite common among all websites that sell a product:
Initial proposal for the Nelio Content website site map
However, we later decided that we’d merge all our websites into a single website, so the previous proposal became the following:
Second proposed sitemap for the Nelio website.
7. Description of the Requested Pages
For each of the pages we needed is a description explaining what we wanted. In addition, we also added some references or images to reinforce the idea we had in mind.
Here is the example of the services page.
Services Page
First part Three images, with the three services offered.
Content (large image occupying the left half) Plans and generates qualitycontent efficiently and with great impact.
Testing (image occupying 1/4) Test and optimize your website with A/B tests and heat maps.
Migrate to WordPress (image occupying 1/4) Are you not using WordPress yet? What are you waiting for?
Example. http://hubspot.com/ on which three images for the main services are.
Screenshot of HubSpot.com
The “Learn More” buttons link to the respective services, which are the same as the three options in the Services menu.
Content
Testing
Migrate to WordPress
Successive blocks of Services page After this initial image of the three services would the next two blocks.
What customers think of our services
Customer testimonials about our support
Both like:
Example of the block of opinions about us
Similarly, for each of the web pages we have listed in the index, we described the design we had in mind. Truth is, the more detailed information you provide, the faster the website will be completer and the easier will you meet your expectations.
Nelio A/B Testing
I was very impressed by the quality of this plugin, how easy it was to set up, and the outstanding support Nelio provides. I highly recommend Nelio A/B Testing.
Each company has different needs and each website has its own peculiarities. In our case, additional issues we discussed were:
Hosting Services
Since we used WPEngine for our websites, we decided that we would continue to use the same hosting service. End of discussion. But, obviously, if you’re starting from scratch, the decision on what hosting to use is important.
WordPress Theme
In our previous websites (WPrincipiante, MigratetoWP, Nelio Software, and Nelio A/B Testing), we bought and installed various existing themes. But in this case, we’ve chosen to use a theme fully customized by designers, because we wanted the fastest website possible. “If we don’t need anything, we don’t want it”—and that’s one of the things custom themes give you.
But, to be honest, I wouldn’t recommend this approach if you need a blog or a website and you don’t have developers on your team or the money to afford a custom development. Sometimes, it’s better if you just stick to default/premium themes that can be customized.
Knowledge Base
Another point we discussed was whether we would use a plugin to manage FAQs or any other support information. The support service we use in Nelio A/B Testing allows you to very easily create such a database. But the problem is that this information was created on a different domain. And this drove us crazy, trying to deal with the SEO for the website.
Although we looked at some interesting plugins and themes that had already been built for support systems, we finally opted for a simple structure, so we put it all together with custom post types. In this case, we gave priority to simplicity and load speed, without neglecting SEO.
Languages
Another point of discussion was about having a website with multi-language support. The easiest option was, apparently, to install a plugin like WPML or Polylang. But, again, we wanted a simple and fast website, and these two plugins are quite heavy.
In the end, we chose not to use any of these plugins and create two different sites (one in English neliosoftware.com and one in Spanish neliosoftware.com/es) in a multi-site installation.
The only downside of this decision is that a user reading a page who clicks the alternate language selector is automatically redirected to the home page instead of a translation of that page. Perhaps it’s not as functional, but minimizing the complexity of the website has been our priority. Besides, I don’t think people jump from one language to the other that often, do they?
SEO Optimization
Every time we’ve made certain decisions we’ve always tried to make SEO for the website a priority. There’s a lot of stuff related to SEO you have to take into account—the design for user experience, keywords, adaptation for any kind of device, optimization for web crawlers, complete content, authoring meta data, and so on.
The Process
Finally, I wanted to talk to you about how the entire design process. Here are all the steps we took in chronological order:
Writing our design proposal First, after looking at the design of many sites, we discussed among the three partners what we wanted. Then we wrote the document we sent to the designers as I’ve explained in this post.
First meeting (Skype) We had our first meeting by Skype (it’s more than 800 km from Sevilla to Barcelona) with the designers to explain the details of our proposal.
First quote and schedule We received the quote and delivery schedule. We felt good about it, and as we had agreed, our friends at Silo Creativo began working on it in late January.
Logo design They proposed several logos, all evoking the idea of automation. After two or three iterations, we finally chose the logo we’re using now.
Initial website design They sent us a PDF document with the initial website design. After a couple of e-mails back and forth deciding the final fonts, colors, and some other details, it looked like we had a pretty clear design.
Design change due to website integration At this point we warned the designers we were going to change the initial outline for the final variant in which we were proposing the integration of all websites. We created a second document, modifying the first with the new proposed integration of our blogs (first phase) and services (second phase).
Second Meeting (Skype) We had a second meeting with Veronica and Ricardo in which we discussed the reason for our new decision and explained the second document.
Second quote and schedule They restructured the quote and timetable. We wanted to launch Nelio Software‘s blog first, so that by the time the new product was released, we would already have a “loyal” audience in the new blog. These were the phases we agreed on:
Nelio Software blog,
The rest of the Nelio Software website,
The pages for the Nelio Content services, and
Finally, integration of the other Nelio services (Nelio A/B Testing and Migrate to WordPress).
Second website design Shortly after that, we received a second PDF document with the new design. Since we already wanted Nelio Software‘s website to look like Nelio Content‘s, agreeing on this design was straightforward.
Mock-up blog We received the first version of the mock-up of the blog homepage and following ones. We liked it a lot. But, as David says, we are quite a “pain in the ass” (and he the most, probably, but that’s a good feature for any product designer, isn’t it?). So we requested 40 mini-changes like “We don’t like grey buttons, as they seem to be disabled. Surely it would be better to make it dark blue with white text” or “The title of the big picture should be a little bigger (24px?)“.
Scale model of the Nelio Software website This was the mock-up for all the web pages for Nelio Software except for the new product, Nelio Content. That is, the team page, contact, service and a simple page for legal issues, etc.We again had a few email exchanges to finish agreeing on the details, and in late April we had the mock-up for Nelio Software ready.
Merger of blogs and launch of the new website After the design, came the task of migrating and merging blogs for Nelio Software, Nelio A / B Testing and WPrincipiante, a process which Toni explains in detail: the process of merging three blogs and launching the new website.
Conclusion
The purpose of this post was to illustrate the importance of web design in the marketing plan. I also wanted to show how the design process that is applied. You see, the more clearly you define the points I have mentioned before to any website design agency, the faster and more efficient the process will be. Remember that you still have to create all the content!
Leave a Reply