Plan de marketing de Nelio Content VI – Diseño de la web

Seguimos con nuestro plan estratégico y de marketing para el lanzamiento de Nelio Content y aquí tienes la sexta entrada. Si no quieres perderte ninguna, aquí te dejo los enlaces:

1. La Idea
2. Objetivos estratégicos
3. Formación en marketing
4. KPIs de marketing
5. Buyer Personas
6. Diseño de nuestra web
7. Estrategia SEO
8. Contenidos de la web
9. El blog
10. Email y Social Media

Como resumen, por si has llegado aquí sin mirar las anteriores entradas de la serie, ya habíamos definido la cifra de ventas que queríamos conseguir a finales de año y los KPIs de marketing. A parte de esto, también estimamos de dónde tenía que llegar el tráfico a la web. Tienes todo esto resumido en la siguiente tabla:

Como puedes ver en la tabla anterior, la mayoría de nuestros visitantes llegan a través de búsquedas orgánicas o referrals. Por consiguiente, es importantísimo que cuidemos los contenidos de nuestra web y que aseguremos que esta es rápida y atractiva; a fin de cuentas, sólo tienes una oportunidad para causar una buena primera impresión a tu visitante.

En nuestro caso, los recursos de los que disponemos son limitados. Somos un equipo de tres personas. Por tanto, decidimos que un equipo profesional se encargara del diseño de la web de Nelio Content. Para ello nos pusimos en contacto con nuestros amigos de Silo Creativo. Y así fue como les encargamos el diseño del logo y de la web de Nelio Content. Además, también incluimos el rediseño de la web de nuestra empresa, Nelio Software.

Como ya expliqué en el artículo ¿Será un éxito o un fracaso fusionar nuestros blogs?, nuestra primera idea era crear una nueva web para Nelio Content. Pero tras reflexionar y discutir sobre si tendría sentido crear dos nuevos blogs (uno en inglés y otro en castellano), finalmente llegamos a la conclusión de que Nelio Content en vez de tener una web propia, sería un servicio con un apartado propio dentro de la web de Nelio Software. De esta forma todo quedaba mejor integrado.

Por otro lado, en la entrada ¡Necesito un rediseño de mi web! ya comenté algunos de los puntos que deberían incluirse en cualquier propuesta de solicitud de diseño de una web. Pero es mucho más interesante ver un ejemplo real. Y por eso hoy os mostraré la solicitud inicial que hicimos para el diseño de esta nuestra web.

Solicitud inicial de diseño web

El documento inicial que enviamos a Silo Creativo tenía el siguiente índice:

1. Requisitos del proyecto
2. Descripción de Nelio Content
3. Público Objetivo de Nelio Content
   • Business Blogger
   • Professional Blogger
   • Affiliate Blogger
   • Personal Blogger (y Mom Blogger)
4. Objetivos de la web de Nelio Content
5. Ejemplos de palabras clave
6. Mapa del sitio (español) de Nelio Content
7. Descripción de las páginas solicitadas
   • Home page
   • Página de Planes/Precios
   • Blog
   • Página de Suscríbete
   • Soporte (Knowledge Base)
   • Páginas legales

Ten en cuenta que tras la decisión de integrar los blogs hubo unos cuantos cambios que ya comentaré. Por ahora veamos los puntos que me gustaría destacar del contenido del documento inicial.

1. Requisitos del proyecto

En el primer apartado del documento describimos la idea general de todo lo que necesitaba. En esencia, se podría resumir en los siguientes puntos:

1. Logo del producto de Nelio Content
   Colores posibles:
   Azul (profesional, tranquilo, digno de confianza)
   Negro (creíble y potente)
   Blanco (simple, limpio, puro)
   Una sola tipografía
   Fácil de visualizar en el Escritorio de WordPress
   Debería evocar:
   Concepto de Contenido
   Automatización
   WordPress
2. Diseño de web para Nelio Content
   La web de Nelio Content debería parecer muy profesional con un diseño sencillo y agradable.
   Su URL (ya registrada): https://neliocontent.com
   Tendrá dos versiones, una para el idioma en inglés y otra para el español.
   Y, en particular, necesitamos el diseño de las siguientes páginas (versión en español):
   • Home page,
   • Características (inicialmente, parte de la Home Page)
   • Planes y precios,
   • Suscríbete,
   • Blog,
   • Soporte (creación de Knowledge Base)
   • Términos y Condiciones, Política de Privacidad.
3. Rediseño de la web de Nelio Software (https://neliosoftware.com) (este proyecto se realizará una vez finalizados los anteriores)
   Siguiendo la misma imagen definida en Nelio Content, querríamos un rediseño de la web de Nelio Software con la misma imagen.
   De nuevo, estará en dos idiomas: inglés y español.
   Se tendrá que modificar el apartado de productos, mostrando el nuevo servicio de Nelio Content.
   El resto del contenido debería ser bastante parecido.

Como puedes ver, se trata de un resumen de todas las tareas que habrá que realizar y algunas pinceladas de lo que queremos conseguir con la nueva web.

Nelio A/B Testing

Me sorprendió mucho la calidad del plugin, lo fácil que fue configurarlo y el increíble soporte que me dio Nelio. Recomiendo encarecidamente usar Nelio A/B Testing.

Josette Millar

WordPress.org

Ver planes

2. Descripción de Nelio Content

A continuación describimos brevemente las características de Nelio Content y sus principales funcionalidades. Si vas a crear la web de un producto, es importante que el diseñador sepa ligeramente de qué va, para que pueda crear una imagen acorde a los valores y funciones que quieres potenciar. Si te interesa saber de qué va, puedes echar un vistazo a nuestra propia web.

3. Público objetivo de Nelio Content

No sólo conocer el producto es importante para diseñar una buena web. Los diseñadores también necesitan entender quién va a a ser el visitante de la web, sus necesidades o qué busca (palabras clave). Todo esto les sirve de inspiración en el diseño y pueden documentarse.

En este punto, como puedes ver en el índice de arriba, incluimos la descripción de nuestros Buyer Persona:

• Business Blogger
• Professional Blogger
• Affiliate Blogger
• Personal Blogger
• Mom Blogger

4. Objetivos de la web de Nelio Content

Esta sección, como su nombre indica, tenía la finalidad de describir los objetivos de la nueva web:

El objetivo principal de nuestra web es conseguir el máximo número de suscriptores a Nelio Content.

Objetivo secundarios:
Que contenga toda la información necesaria para el uso de la herramienta y que dicha información sea de acceso fácil y práctico.
Que contenga otra información de utilidad (el blog) para potenciales clientes, atraer visitas, mejorar SEO, etc.

5. Ejemplos de palabras clave

Teniendo en cuenta el producto que estábamos diseñando y el tipo de problemas que soluciona, hicimos una búsqueda más o menos exhaustiva de todas las palabras clave que podían ser relevantes. Aquí tienes algunos ejemplos:

Calendario de contenidos, calendario editorial, calendario social, calendario de blog, calendario de marketing, marketing de contenidos, planificación de marketing, planificación de contenidos, automatización del marketing, etc.

6. Mapa del sitio (en español) de la web

Nuestra propuesta inicial era que la web de Nelio Content (versión en español) tuviera el siguiente esquema sencillo, típico de cualquier web que vende un producto:

Una vez decidimos la integración de las webs de todos nuestros servicios en una única web de Nelio Software, la propuesta pasó a ser la siguiente:

7. Descripción de las páginas solicitadas

Para cada una de las páginas que necesitábamos incluimos una descripción indicando qué queríamos. Además, también añadimos alguna referencia o imagen para reforzar la idea que teníamos en mente.

Te pongo el ejemplo de la página de servicios.

Página de Servicios

Primera Parte
Tres imágenes, con los tres servicios que se ofrecen.

Content (imagen grande ocupando la mitad izquierda)
Planifica y genera contenido de calidad de forma eficiente y con gran impacto.

Testing (imagen ocupando 1/4)
Prueba y optimiza tu web con tests A/B y heatmaps.

Migra a WordPress (imagen ocupando 1/4)
¿Todavía no estás en WordPress? ¿A qué esperas?

Ejemplo.
http://hubspot.com/ en la que se muestran tres imágenes con los servicios principales.

Los botones «Saber más» enlazan con los respectivos servicios, que son los mismos que las tres opciones del menú Servicios (Content, Testing y Migrate to WordPress).

Bloques sucesivos de la página Servicios

Después de esta imagen inicial de los tres servicios irían los dos bloques siguientes:

– Qué opinan los clientes de nuestros servicios
– Testimonios de clientes de nuestro soporte

Los dos parecidos a:

De forma parecida, para cada una de las páginas de la web que hemos indicado en el índice describimos el diseño que teníamos en mente. Lo cierto es que cuanto más detallada des la información, más rápidamente podrán darte el servicio. Y por tanto, será más fácil que tus expectativas resulten satisfechas.

Y hasta aquí el repaso al documento de solicitud de diseño de logo y webs. No obstante creo que también es necesario comentar otros puntos que no incluimos en el documento pero que si comentamos en la primera reunión que tuvimos con los diseñadores al explicarles el proyecto.

Otros puntos a tener en cuenta

Cada empresa tiene necesidades distintas y cada web sus particularidades. En nuestro caso, los temas adicionales que discutimos fueron:

Servicio de Hosting

Como ya utilizábamos WPEngine para nuestras webs, decidimos que utilizaríamos el mismo servicio de hosting. Fin de la discusión. Pero evidentemente, si haces una web de cero, la decisión sobre qué hosting utilizar es importante.

Tema de WordPress

¿Qué tema de WordPress queremos usar? En nuestras webs anteriores (WPrincipiante, MigratetoWP, Nelio Software y Nelio A/B Testing) compramos e instalamos distintos temas existentes. Sin embargo aquí hemos optado por solicitar a los diseñadores un tema totalmente a medida. ¿Por qué? Nuestra web es muy sencilla y hemos dado prioridad a la velocidad de carga de las páginas. Queríamos qué solo tuviera lo que nosotros necesitábamos. Nada más. Así todo cargaría muy rápido.

Si necesitas un blog o una web y no tienes desarrolladores en tu equipo, esto no es algo que recomendaría hacer. Mejor utiliza un tema que te guste y no te compliques la vida.

Base de conocimiento

Otro de los puntos que también estuvimos debatiendo era el de si utilizábamos un plugin para gestionar las FAQs o cualquier otra información de soporte.

El servicio de soporte para gestionar los tíquets que utilizamos en Nelio A/B Testing te permite muy fácilmente crear dicha base de datos. Pero el problema es que esta información se crea en un dominio distinto. Y esto nos daba rabia, de cara al SEO de la web.

Aunque miramos algunos plugins y temas interesantes que ya llevaban sistemas de soporte incorporados, finalmente optamos por tener una estructura sencilla. Así que lo montamos todo directamente nosotros con custom post types. En este caso, volvimos a dar prioridad a la sencillez y velocidad de carga, sin dejar de lado el SEO.

Idiomas

Otro de los puntos de discusión es el de tener una web con soporte para múltiples idiomas. De entrada, la opción que parecía más sencilla era la de instalar un plugin como WPML o Polylang. Nos podían ayudar en la gestión de páginas y entradas en los dos idiomas que queríamos tener.

De nuevo, queríamos tener una web sencilla y con lo mínimo necesario. Por esto decidimos que la gestión del idioma también la queríamos minimizar. Así que finalmente optamos por no usar ninguno de estos plugins. Lo que hemos hecho es crear la web como un WordPress multisitio con neliosoftware.com para el inglés y neliosoftware.com/es/ para el español.

El único inconveniente de esta decisión es que si un usuario está leyendo una página y hace clic en el selector de idioma alternativo, automáticamente es redireccionado a la página principal en vez de a la traducción de esa página. Quizá no es tan funcional, pero minimizar la complejidad de la web ha sido nuestra prioridad. Creemos que la gente no va leyendo las entradas cambiando continuamente de idioma.

Optimización para SEO

Cada vez que hemos tomado ciertas decisiones siempre hemos intentado priorizar que la web esté optimizada para SEO. Sobre este aspecto hay muchos factores a tener en cuenta: el diseño de la experiencia de usuario, las palabras clave, la adaptación a todo tipo de dispositivo, que esté optimizada para crawlers (rastreadores web), que los contenidos incluyan toda la información de autoría, que haya meta datos e información adicional, etc.

Aquí, solo remarcar que no entraré en más detalle sobre todos estos aspectos. Lo reservo para una entrada futura.

El proceso

Finalmente, quería comentarte cómo ha ido todo el proceso de diseño del logo y de la web que en estos momentos estás visualizando. Aquí tienes todos los pasos que seguimos en orden cronológico:

1. Escritura de solicitud de diseño 
   Primero, tras mirar el diseño de muchas webs, discutimos entre los tres socios qué queríamos. Luego escribimos el documento que enviamos a los diseñadores y que te he explicado en esta entrada.
2. Primera reunión (Skype)
   Mantuvimos una primera reunión mediante Skype (hay más de 800 km de distancia entre Sevilla y Barcelona) con los diseñadores para explicarles el detalle del documento que habíamos preparado.
3. Primer presupuesto y calendario
   Recibimos el presupuesto y calendario de entrega. Nos pareció bien. Y tal y como habíamos acordado, los amigos de Silo Creativo empezaron a trabajar en ello a finales de enero.
4. Diseño de logo
   Nos presentaron varias propuestas de logo, todas ellas con la idea de evocar el concepto de automatismo. Tras dos o tres iteraciones, finalmente el logo definitivo de Nelio Content ha sido este que ves a continuación.
   
   
5. Diseño inicial de la web 
   Nos enviaron un documento PDF con el diseño inicial de la web. Tras un par de cruces de e-mails acabando de decidir las tipografías, colores, y algún que otro detalle, parecía que lo teníamos todo bastante claro.
6. Cambio de diseño debido a la integración
   En este punto avisamos a los diseñadores de que íbamos a cambiar el esquema inicial por la variante final en la que les proponíamos la integración de todas las webs. Creamos un segundo documento, modificando el primero con la nueva propuesta de integración de blogs (en una primera fase) y servicios (en una segunda fase).
7. Segunda reunión (Skype)
   Tuvimos una segunda reunión con Verónica y Ricardo de Silo en la que les comentamos la razón de la nueva decisión y les explicamos el segundo documento. Por suerte no nos enviaron a freír espárragos ?.
8. Segundo presupuesto y calendario
   Nos hicieron una restructuración de presupuesto y calendario que también nos pareció muy bien. Y de esta manera lanzaríamos la nueva web de Nelio Software con la fusión de todos los blogs antes de tener el nuevo producto listo. Con esto la ventaja era que, al lanzar el nuevo producto, ya tendríamos audiencia y no empezábamos de cero. Así pues, acordamos que la maquetación la haríamos en varias fases:
   1. El blog de Nelio Software,
   2. El resto de la web de Nelio Software,
   3. Las páginas del servicio de Nelio Content, y
   4. Finalmente, integración de los otros servicios de Nelio (Nelio A/B Testing y Migrate a WordPress).
9. Segundo diseño de la web 
   Muy rápidamente nos enviaron el segundo documento PDF con el nuevo diseño. Aquí ponernos de acuerdo fue muy fácil ya que se reutilizaba todo el trabajo discutido anteriormente sobre estilos, colores, etc.
10. Maqueta del blog
    Recibimos una primera versión de la maqueta del blog con la página principal y las siguientes.Nos gustó mucho. Pero, como dice David, somos bastante «tocapelotas» (y él, el que más; característica imprescindible para un buen diseñador de interfaz de producto ?).  Así que les pedimos 40 mini-cambios del tipo «El color del botón no nos convence en gris, ya que no invita a publicar. Seguramente sería mejor ponerlo con el azul oscuro y el texto en blanco (así resaltaría mucho más)», o del tipo: «El título de la imagen grande debería ser un poco más grande (24px?)».Ricardo aplicó los cambios y, acordada la maqueta del blog, entramos en la siguiente fase.
11. Maqueta de la web de Nelio Software
    Aquí se maquetaron todas las páginas de la web de Nelio Software, excepto las del nuevo producto Nelio Content. Es decir, la página del equipo, la de contacto, la de servicios y una página sencilla para cuestiones legales, etc. Volvimos a tener unos cuantos intercambios de correos hasta acabar de acordar los detalles. Y a finales de abril ya teníamos lista la maqueta de Nelio Software.
12. Fusión de blogs y lanzamiento de la nueva web
    Tras el diseño, venía la tarea de migrar y fusionar los blogs de Nelio Software, Nelio A/B Testing y WPrincipiante cuyo proceso te lo explica con detalle Toni la trilogía de entradas sobre el proceso de fusionar tres blogs y lanzar la nueva web.

Tareas todavía pendientes
En el momento de escribir esta entrada, todavía queda pendiente integrar las webs de Migrate To WordPress y Nelio A/B Testing en la de Nelio Software. Ahora lo hemos aparcado de momento para centrarnos en Nelio Content.

Conclusión

El objetivo de esta entrada era ilustrar la importancia que tiene el diseño de la web dentro del plan de marketing. También he querido mostrar cómo es el proceso de solicitud de dicho diseño.

Como ves, antes de solicitar a cualquier agencia que te diseñe una web, cuanto más claros y definidos tengas los puntos que hemos comentado, más rápido y eficiente será todo el proceso. Piensa que luego ¡todavía queda crear todo el contenido!

En nuestro caso en particular, aunque el proceso en si ha tenido cierta complejidad, estamos muy contentos con la experiencia. Espero que el resultado que estás viendo también te guste ?.

Y en la próxima entrada, siguiendo con la idea de crear una web optimizada para el SEO, te explico cómo hemos buscado las palabras clave y qué haremos con ellas.

Imagen destacada de Marcelaramaya (licencia).