Bootstrapped: Construyendo una Compañía a Distancia

BY JAN SCHULZ-HOFEN - FOUNDER & CEO @ PLANIO

Si me preguntan, trabajar a distancia es lo mejor hay. Actualmente estoy escribiendo desde un bar en una pequeña playa en una isla remota en el sur de Tailandia. Cuando levanto la vista de mi laptop, sólo veo el infinito océano y sus aguas cristalinas. Disfrutaré de esta mañana sin distracciones y me concentraré en mi trabajo porque el resto del equipo ni siquiera se ha despertado. Las zonas horarias funcionan muy bien para los equipos distribuidos.

Mi colega Thomas recientemente habló con 11 Líderes en Gestión de Proyectos (11 Thought Leaders in Project Management) sobre el impacto que genera trabajar a distancia en una compañía; algunos expertos en Scrum argumentaron que los equipos distribuidos pueden trabajar juntos de forma efectiva, mientras que otros estuvieron fuertemente en desacuerdo.

Entiendo sus preocupaciones; no puedes simplemente abrir las puertas de la empresa y liberar a todos en la jungla. No está garantizado que terminarás con un negocio próspero. Un ejemplo claro es el de Marissa Mayer en Yahoo, en el famoso recorte laboral de trabajo a distancia en 2013 (axed remote work), cuando sintió que algunos empleados estaban abusando del mismo.

Entonces, ¿cómo puede lograr una compañía tecnológica el trabajo a distancia? Continúa leyendo. La siguiente historia está basada en nuestra experiencia en Planio y cómo logramos que el trabajo a distancia funcionara.

Entra en Planio, mi Compañía a Distancia

Existen una cantidad de cosas que me motivaron a comenzar mi compañía. Separarme del trabajo del cliente, al tiempo que mantenía todos los beneficios de trabajar como freelancer sin una ubicación fija fue uno de los motivos.

En 2009, me encontraba bajo la sombra de unos cipreses en un hermoso jardín al estilo mediterráneo, desde donde podía ver las colinas toscanas, mientras trabaja arduamente en un nuevo proyecto: Planio.

En una herramienta de gestión de proyectos para personas como yo: desarrolladores. Planio ayuda a crear proyectos de clientes de forma más organizada y transparente, mientras reduce el número de herramientas y plataformas que se necesitan para realizar el trabajo. Planio está basada en Redmine de código-abierto (Un proyecto de software de código abierto basado en Ruby on Rails*), el cual he utilizado a distancia con mis clientes desde sus comienzos. En cierta forma, el trabajo a distancia ya se encuentra en ADN de Planio.

Hoy en día, mi pequeño proyecto paralelo ha crecido hasta convertirse en una empresa de verdad. Somos un equipo de 10 personas, prestando servicio a más de 1,500 negocios en el mundo. Tenemos una oficina en Berlín, pero muchos de nosotros trabajamos a distancia.

En este artículo, indagaré en los principios, herramientas y lecciones que me han ayudado a lo largo de los años. Después de leerlo, espero puedas diseñar el software de tu compañía para que sea remote-friendly desde el principio.

“Hablar no cuesta nada. Muéstrame el código.” Linus Torvalds

Cada Jueves tenemos una conferencia por video-llamada (All-hands conference) donde discutimos lo que hicimos la semana anterior, y lo que haremos a futuro.

Al principio, pasamos mucho tiempo discutiendo ideas antes de decidir qué hacer, pero descubrimos que es mucho más difícil cuando algunos miembros del equipo tienen una mala conexión a Internet y no puedes verlos.

Ahora usualmente solo “hacemos las cosas” y después lo discutimos, creamos un prototipo que funcione con algunas ideas esenciales y después hablamos sobre eso. Por ejemplo, recientemente nos encontramos con algunos problemas de desempeño con nuestros repositorios de Git. En lugar de discutir y analizar todas las formas en las que podíamos ahorrarnos un par de milisegundos por aquí y allá con cada propuesta, mi colega Holger simplemente construyó sus mejoras sugeridas (Speeding up Git at Planio) en una prueba de concepto en un servidor en staging hacia donde dirigimos parte de nuestro tráfico. Esto resultó bastante bien y estas ideas irán a producción.

Este método hace que todos se enfoquen en la acción en vez de hablar. El tiempo invertido en escribir código es recompensado al ver que pasamos menos tiempo andando con rodeos.

Utiliza la Comunicación Escrita

La comunicación en tiempo real inhabilita la claridad. Llamar a un compañero cuando necesitas algo es fácil e instintivo, pero no es siempre tu mejor opción. No puedo recordar cuantas veces empecé a escribir un correo o una nota de Planio para luego resolver el problema mientras redactaba.

Zach Holman, uno de los primeros ingenieros contratados en GitHub, está de acuerdo en que: “El texto es explícito. Al forzar la comunicación a través de un método escrito, fuerzas a las personas a formular mejor sus ideas.”

La comunicación escrita también te hace más respetuoso del tiempo de los demás, en especial cuando vives a varias zonas horarias de distancia. Una comunicación inmediata puede disruptiva; puede ser que la persona se encuentre tratando de averiguar porque un sistema o proceso no funcionó correctamente. En cambio con un correo, él o ella puede leerlo cuando le sea más conveniente, y dar una respuesta adecuada.

Se tan Transparente como sea Posible

Pasar mucho tiempo preocupándose por las políticas de oficina no es la forma más propicia para enviar un software que funcione, y la claridad o transparencia promueve la confianza. No es una coincidencia que compañías a distancia, como Buffer, tengan una transparencia radical. En el caso de Buffer, la empresa comparte información sobre los ingresos y salarios de todos sus empleados.

Automattic, la compañía detrás Wordpress.com, también pone énfasis en la transparencia. En el libro “El Año sin Pantalones” (The Year Without Pants), Scott Berkun comparte su experiencia trabajando a distancia para Automattic, y que todas las decisiones y discusiones están disponibles para los empleados en su plataforma de debate P2 como parte de su énfasis en la transparencia.

La función de chat en Planio funciona de forma similar. Los debates están abiertos para todo el mundo y los historiales de chat están conectados automáticamente desde los problemas que se discutieron para que nadie quede de lado; incluso los nuevos empleados pueden leer las decisiones que se tomaron anteriormente y por qué. Cuando comencé a desarrollar la función para chatear, considere agregar una función para chatear en privado con otros, pero cuando los debatimos en equipo, llegamos a la conclusión de que era mejor no hacerla para tener la mayor transparencia posible en el equipo.

Me parece que la transparencia en equipo es fundamental para equipos remotos. Por ejemplo, imagina por un momento que acabas de unirte a un equipo de desarrolladores a distancia. Quizás nunca has conocido a tus nuevos colegas. No conoces las reglas tácitas de comportamiento. Puede ser que te preocupe si estás realizando un buen trabajo o no. ¿Tus compañeros de trabajo están siendo sarcásticos o sus cumplidos son en realidad sinceros? ¿Estarán discutiendo en privado si eres un buen ingeniero?

Digitaliza tus Sistemas

Escogemos nuestros servicios de acuerdo a lo que ofrecen en plataformas online, desde los proveedores de teléfono hasta los bancos (algunos incluso ofrecen un pequeño incentivo financiero si decides dejar los papeles, además es genial para el medio ambiente). Yo tengo la fortuna de tener un abogado y un contador para Planio a los que no les importa enviar correos o mensajes por Google Hangouts, en lugar de decirme que vaya hasta sus oficinas. (En realidad recomiendo preguntar sobre ello en la primera reunión). Y puntos extra si se logra que firmen con una herramienta de gestión de proyectos y formen parte de tu equipo.

Hemos estado digitalizando nuestro correo postal; en Planio usamos un servicio llamado Dropscan, el cual recibe nuestras cartas, las escanea y reenvía las más importantes a las personas indicadas. No te gustaría que un amigo las agarrara y las leyera en Skype. Si no puedes encontrar un proveedor que escanee tu correo postal en tu país o ciudad, algunos sitios ofrecen membresías virtuales para tener una dirección postal física mientras no estés en la zona.

Para aquellas compañías que aún siguen enviando correo, existen servicios para que nunca haya necesidad de visitar una oficina postal nuevamente. Nosotros utilizamos una empresa de imprenta Alemana con una API (interfaz de programación de aplicaciones) que automáticamente envía una carta junto con una calcomanía a cada nuevo cliente de Planio. Es algo que a la gente le encanta, y no tenemos que imprimir y enviar nada. Algunas alternativas internacionales son Lob y Try Paper.

¿Deberías tener una Presencia Digital?

En un co-working en la Isla tropical Koh Lanta, Tailandia, me di cuenta que alguien en rol de apoyo para una gran plataforma de e-commerce estaba constantemente en una video conferencia con el resto del equipo. Sqwiggle ofrece una función similar de “presencia” para equipos remotos.

Supongo que demandar que todos los empleados estén “presentes” mediante video mientras trabajan puede basarse en el miedo de que los empleados abusen de los beneficios del trabajo a distancia. En mi experiencia, este no es el caso. En el co-working tropical se siente cierta urgencia en el aire, a pesar de los atuendos casuales y los cócteles de coco. Las personas están concentradas tranquilamente en sus laptops; es como si quisieran que el trabajo a distancia funcione y muestre resultados para mantenerse lejos de una oficina para siempre.

Nos dimos cuenta que no necesitamos una presencia digital porque tenemos un nivel de confianza muy alto con todo el equipo. También me parece que es importante respetar la privacidad de todos. Si tu empresa está haciendo el cambio de oficina física a trabajo remoto, la presencia digital puede ayudar a calmar esos problemas de desconfianza en los gerentes más ansiosos.

Escoge Bootstrapping en lugar de Capital de Riesgo

La mayoría de los capitalistas de riesgo buscan resultados descomunales, por lo que prefieren un pequeño estallido de 12-meses de trabajo de un equipo en lugar de un ritmo más sustentable. Front App, una nueva empresa fundada por Y Combinator, la aceleradora de Silicon Valley, alquiló una casa en la bahía durante su estadía de tres meses en el programa de la misma aceleradora. La meta es optimizar para evaluar una idea empresarial rápidamente.

Dada esta mentalidad de resultados desmesurada, puede ser que sea algo difícil convencer a un capitalista de riesgo que financie una estadía en un playa de Camboya. Es por ello que muchas empresas respaldadas (como Buffer o Treehouse) que se dedican al trabajo a distancia, primero tenían ventajas. Buffer era rentable antes de que se invirtiera en ella, mientras que Ryan Carson, el fundador de Treehouse, ya había demostrado sus habilidades con otra compañía.

Pero he aquí otra opción que es mejor que capitalismo de riesgo: Bootstrapping. Lo cual significa financiar una empresa con los ingresos de sus primeros clientes. En mi opinión, es el mejor enfoque porque permite fundar tu empresa con tus propios términos y mantenerte en control. Sin embargo, muchas veces se requiere tener dos trabajos o trabajar de forma freelance mientras se saca la compañía a flote. Me tomó aproximadamente dos años trabajando en Planio y proyectos para clientes (con mi agencia desarrollo de software LAUNCH/CO) para poder empezar de lleno, pero valió la pena.

Bootstrapping también te fuerza a construir un negocio que genere ingresos desde el principio, lo cual me parece mucho más saludable. Una pista: Construir un B2B SaaS hace que todo sea mucho más fácil que crear una aplicación de consumidores, debido a que las empresas están más dispuestas a pagar suscripciones mensuales si se le agrega importancia. Se deben vender muchas aplicaciones de consumidores en iPhone a $0.99 para cubrir un mes de pago de así sea el equipo más pequeño.

Bootstrapping también te fuerza a construir un negocio que genere ingresos desde el principio.

Ponle el Precio a tus Productos Estratégicamente

Uno de nuestros primeros clientes era una gran empresa tecnológica con billones de ingresos al año. Obviamente, estaba encantado cuando nos escogieron por encima de competidores más grandes y mejor establecidos. Sigue siendo un cliente satisfecho, pero ahora nos hemos alejado de grandes empresas; he descubierto que se necesitan muchas reuniones en persona y se los lleve de la mano antes de convertirse en un cliente.

Como dice Jason Lemkin en su artículo sobre cómo escalar al éxito para SaaS (Scaling Your Customer Success Team), cuando tienes una gran empresa, alguien tendrá que tomar un jet dos veces al año para visitarlos. Si tienes una empresa pequeña de dos o tres personas, esa persona serás tú, el CEO, el CMO y el CSO todos-en-uno, el hámster con exceso de trabajo.

Manteniendo los precios en el rango modelo de unos $49/$99/$249 como ha sugerido el desarrollador ahora empresario Patrick McKenzie, esto significa que no se tendrá que contratar un equipo empresarial de ventas, y luego tener que ganar la inmensa cantidad de dinero que un equipo así requiere. Tú, el cliente, no esperaras que el CEO de una empresa aparezca en Navidad con una caja de chocolates cuando estas pagando $249 al mes.

Desarrolla en Código Abierto

Un negocio con respaldo de riesgo basado en software propietario está muy bien cuando juegas “El Ganador se lleva Todo” y eres dueño del mercado. Cuando eres una compañía de bootstrap, el software de código abierto puede darte ventajas y alcance que no podrías haber logrado de otra forma.

Existe una precedencia de empresas tecnológicas rentables construyendo negocios en base a código abierto; el famoso código abierto Rails de Basecamp les ha garantizado ingenieros de alta calidad para el resto de la eternidad. GitHub se ha convertido en un unicornio, aprovechando el proyecto de código abierto Git que Linus Torvalds comenzó a gestionar con las fuentes de Kernel de Linux. Nuestros amigos en Travis-CI comenzaron un proyecto de código abierto, crearon una campaña en Crowdfunding y luego lo convirtieron en un negocio de bootstrap a distancia (la cual también hace campaña para la diversidad tecnológica a través de su fundación).

Planio está basada en Redmine y nosotros contribuimos muchas de nuestras características y mejoras a la comunidad. Esto funciona muy bien en muchas formas; nuestras contribuciones y compromiso con la comunidad ayuda a que el proyecto de código abierto avance y Planio se exhibe a potenciales clientes. Para nosotros, es la forma más auténtica de desarrollar la marca; al mostrar nuestro código y responder las discusiones técnicas abiertas, demostramos que sabemos lo que estamos haciendo.

Contrata Profesionales Certificados

Contratar una flota de pasantes cada año solo tiene sentido si se planea que el número de empleados crezca tan pronto como se llegue a la próxima ronda de financiación.

La externalización de tareas es fácil si se trata de copiar-y-pegar, pero en realidad no se quiere externalizar losDevOps (Desarrolladores y Operaciones) a alguien con la tarifa más baja por hora, cuando tienes miles de clientes dependiendo de tus servidores: querrás tener profesionales certificados como los que se encuentran enToptal.

Matt Mullenweg, fundador de la plataforma de código abierto para blogs WordPress, declaró que al concentrarse en la calidad significó que su compañía, Automattic, pudiese contratar a candidatos experimentados que manejan el ambiente de trabajo no estructurado de una compañía a distancia.

Eso significa que “audiciona” candidatos dándoles un trabajo pago en un proyecto por varias semanas, y luego los contrata basándose en su desempeño. Automattic descubrió que este método es mucho más efectivo que los tradicionales CV’s y cartas de presentación para encontrar los candidatos adecuados.

Resalta la Calidad de Vida

Trabajar toma una increíble cantidad de tiempo año tras año. No debería ser algo que haces solo para terminarlo y ya; si es así, probablemente terminarás desperdiciando gran parte de tu vida. La mejor fuente de inspiración y el ingrediente principal para grandes resultados es un ambiente de trabajo que sea inspirador, agradable y divertido. Viajar, aprender, y socializar con otras personas de diferentes culturas hace que el trabajo sea menos como un sacrificio o un mal necesario (al menos en mi vida), que cuando trabajas en una oficina de nueve a cinco.

Trabajar toma una increíble cantidad de tiempo, año tras año. No debería ser algo que haces solo para terminarlo y ya.

No se trata solo de viajar por el mundo, aunque también está el aspecto de la libertad personal. Los padres pueden pasar más tiempo con sus hijos gracias a que evitan un viaje de dos horas. No tienes que vivir en Silicon Valley para ganar el sueldo de San Francisco. Tal vez tu otra mitad también obtenga un trabajo en el extranjero y no tengas que estar limitado a la terrible decisión de quedarte con tu trabajo y continuar tu carrera, o convertirte en un “cónyuge de traslado” con opciones profesionales limitadas.

En Planio, aunque muchos de nosotros trabajamos a distancia, todos tratamos de reunirnos una vez al año en un lugar divertido. El año pasado, pasamos un par de semanas durante el verano en Barcelona, y muchos de nosotros nos conocimos aquí en Koh Lanta este año. Aún estoy buscando ideas para el próximo destino, ¡así que déjame saber si tienes algunos consejos de viaje!

Artículo original en Toptal

Leer Entrada Completa

Diseñando un Mejor Portal Web: Los Fundamentos Primero

BY ALEX GUREVICH - FREELANCE DESIGNER @ TOPTAL (TRANSLATED BYTOPTAL SPANISH EDITORIAL TEAM)

¿Cuántas veces has terminado un proyecto, sólo para mirar atrás y decir: “¡Si tan sólo pudiera regresar en el tiempo y hacerlo todo de nuevo con lo que sé ahora!?” Al menos yo lo he pensado.

A todos nos pasa; estamos emocionados por un nuevo proyecto. Hacemos chistes con el cliente sobre el sitio web actual, firmamos los contratos y luego comienzan los planes y prototipos. Cuando se trata de proyectos pequeños este tipo de estrategias podrían funcionar. Pero cuando se trata de proyectos grandes, el crecimiento repentino y cambios no planeados después de la primera presentación. Y si llegas a terminar el proyecto, probablemente acabarás con una monstruosidad que se parece a lo que debías arreglar, sólo que éste lucirá un poco mejor que el original.

Un buen diseño y una buena experiencia de usuario no empiezan con un prototipo o maqueta atractiva, o con un plano, sino con una base conceptual que se centra en los objetivos de la empresa. Y dichos objetivos no son “Hagamos un sitio web más sencillo y bonito.” Como tú eres responsable de la UX y UI (Experiencia de Usuario e Interfaz del Usuario), por lo que es necesario asegurarse que los usuarios tengan la mejor experiencia en la interfaz que se está diseñando. Y para lograr esto, se debe planificar a fondo desde el principio.

Investigación Inicial para el Diseño de Páginas Web

Una vez que se termina la investigación inicial del campo del cliente y el de su competencia, lo siguiente es saber con qué se va comenzar. Se puede tener un precio separado para este análisis (que se incluirá en la cotización final del proyecto). Esto evitará cotizaciones altas y ambiguas que supuestamente incluirán cualquier ítem que salga más adelante.

El cliente que se tratará como ejemplo es una organización sin fines de lucro en el campo de la arqueología. La compañía explora y protege sitios arqueológicos en el sur-oeste del país. Actualmente, el sitio web está descomunalmente desorganizado. Imagina montañas y montañas de contenido poco organizado en un antiguo portal cms. Teniendo esto en cuenta, el primer paso es organizar el contenido.

Paso 1: Familiarización con el contenido

Cuando estás construyendo una casa nueva, no derrumbas todas las paredes sin antes sacar lo que está dentro de la misma. El primer objetivo sería ir dentro de todas las habitaciones y sacar todo el contenido. En diseño hablado (Design Speak), debemos ir a todas las entradas y determinar cuáles deberían ser estáticas y cuales tienen material para ser tipo post.

Al tener la información se puede hacer una estrategia para organizar mejor el sitio. En principio no se comprueba lo que debe ser eliminado definitivamente y que no, debido a que en el mundo real no se trabaja de esta forma. Cada parte del portal está asignado a un equipo de trabajo, debido a que hay mucho contenido. Lo mejor es clasificar todo primero.

Por lo general se comienza con la página principal y luego se van analizando el resto de las páginas. De esta forma, tengo un esquema del sitio web antes de la primera reunión. Aunque este no fue el caso para el proyecto que tenemos aquí, por qué la mayoría de los enlaces estaban escondidos en el contenido y no eran accesibles en la navegación inicial del portal, (si la cotización del proyecto se basó en la navegación principal o la página principal, este será el momento en el que te arrepientes). Una vez se habló con diferentes personas en el equipo del cliente, se pudo aclarar la situación para continuar.

Al final, la solución fue hablar con el cliente y tener una sesión de intercambio de ideas (brainstorming). Durante esta sesión se le pidió al cliente identificar las características, el contenido, el flujo de trabajo y el enfoque de la página web. Luego se establecieron los siguientes núcleos (core types), algunos son nuevos y otros ya estaban establecidos:

La parte más difícil de este proyecto es que los enlaces no estaban disponibles a primera vista, sino ocultos dentro del contenido del sitio. Y una vez que se habló con el cliente y el equipo del mismo, se pudo continuar con el proyecto.

Paso 2: Creación del Enfoque, Simplificación y Organización

Con el contenido de la casa fuera de la misma, empaquetado y etiquetado, es momento de hacer los planos para una nueva casa que tendrá un mejor estilo y mostrará el contenido de mejor manera. Pero antes de llegar a ello, se debe crear el enfoque.

Según el cliente, los usuarios que visitan la página web buscan información sobre arqueología, tanto como sus proyectos de investigación, ver los próximos eventos, o leer la revista mensual. A pesar de que estas son las áreas de contenido es donde terminan los usuarios, el sitio web no se desenvuelve en torno a ellas; para poder encontrar el foco del portal, debes prestar atención al núcleo de la organización.

Se delimitó que la “localización” está en el centro de los contenidos. Sin la ubicación o localización no existirían los sitios arqueológicos, ruinas, museos o exposiciones. En el fondo, la arqueología se desenvuelve en torno a las ubicaciones.

Una vez se tiene el enfoque es momento de simplificar y organizar. Abajo, se despliega el contenido que se sacó del sitio que no tenía relación con ubicaciones, tales como las páginas del equipo, informes anuales, y así sucesivamente. Luego de ordenar y categorizar el contenido, se obtuvo este mapa:

Ahora se tienen dos áreas principales “Cosas por hacer” y “Ubicaciones ”. En “Cosas por hacer” se tratan todos los temas que tienen que ver organización, mientras que en “Lugares” se cubre el contenido relacionado a una ubicación específica. Es posible que el usuario promedio no sepa el nombre del video o el del proyecto, pero si la ubicación de donde se desarrolló. Por ejemplo, en la sección de proyectos, el usuario podría encontrar el que le interesa a través de su ubicación.

Además, hay un color para cada tipo de post. Desde el punto de vista organizativo, los eventos, exposiciones, clases y exposiciones online son todos, esencialmente, eventos, sólo que hay diferentes tipos.

En el sitio actual había una página estática para una revista, y una para la tienda. Se decidió eliminar el paso adicional de ir a la tienda, y en su lugar tener una plantilla para artículos de la revista en la tienda. El resto es sencillo: una página con información acerca de la organización, un enlace directo a la tienda, una página de donaciones (por qué esas páginas generan ganancias y necesitan una sección en el navegador principal), también nuevas páginas para actualizaciones y un enlace directo a la tienda/donaciones. Debido a que esas páginas generan dinero, merecen un lugar en la navegación principal. Ahora se tiene el plano del proyecto, y es momento de vincular contenido a la misma.

Paso 3: Looping al Cliente

En el mapa del sitio exhibido con anterioridad, se incluyen los tipos de páginas pero no el mapa de los contenidos. Como de seguro ya sabrán, la mayoría de los problemas se producen una vez el cliente comienza a agregar contenido al sitio. Para evitar esta situación se hace un loop con el cliente desde el principio. Lo siguiente es crear un documento de Google con el mapa del sitio que tenemos, y luego enviárselo al cliente para que nos diga cuál es el contenido actual y cómo lo quiere mapear en la nueva estructura.

Si algo no encaja se puede resolver más adelante. Esto es uno de los pasos más importantes, debido a que no sólo involucra al cliente sino que también nos deja saber cualquier problema de la estructura antes de comience la implementación. Para el proyecto que estamos tratando, resultó que se cambiaron algunos elementos del mapa del sitio con respecto al menú; cómo el cliente tenía varias páginas de donaciones, la solución fue crear un post único para las mismas.

Creación de Estructura Visual a través de Wireframing

Lo siguiente es crear una estructura visual para el sitio. Para que la función del sistema trabaje exitosamente, y para lograr la idea de “todo relacionado a la ubicación”, se creó una relación bidireccional entre los diferentes tipos de posts.

Esta es la idea: Cuando un visitante llega al sitio de arqueología y escoge el Gran Cañón, no sólo verá la información sobre el lugar, sino que también encontrará los eventos, proyectos, exposiciones y cualquier otra cosa que el cliente haya enlazado en relación a la página del Gran Cañón. Y así terminamos con algo como esto:

La página de índice de ubicaciones muestra los lugares más recientes en la parte superior. La barra de búsqueda es lo primero que verá el usuario al entrar en la página. Cuando el usuario entra en el sitio, podrá ver el mapa de Google en un 80% de la pantalla, y cuando escoja un punto en el mismo o van viendo la página, aparecerán la red de listas para facilitar su búsqueda.

En una página individual de ubicación la navegación principal estará a la izquierda, debido a que es la información más relevante, mientras que la información meta relacionada al lugar estará a la derecha. Cuando se diseña un plano, para obtener una buena composición se debe tener bloques de elementos primarios, secundarios y terciarios bien definidos. Así el ojo humano seguirá cada uno sin quedarse estancado en un solo elemento.

En este diseño, el usuario empezará en la cabecera del sitio, y luego continuará hacia el bloque de contenido, y después la información a la derecha. Cada segmento de contenido relacionado se muestra en orden de relevancia e importancia. Si el usuario está leyendo sobre el Gran Cañón, por ejemplo, probablemente a esto le seguirán fotos y un mapa del lugar.

Este sitio es esencialmente educacional, por lo que después vendrá “En relación a esta ubicación”. Debido a que el cliente no tiene mucha información única asociada con cada ubicación, se combinó el contenido apenas usado en un bloque exclusivo debajo del menú del sitio.

Colocando miniaturas de la revista y los videos en contenido relacionado añade elementos visuales adicionales y guía a los usuarios hacia la página de “compra”. La página está terminada al mostrarle las ubicaciones, ya que esto incentiva a los usuarios a seguir explorando el sitio web.

El siguiente paso es continuar con esta estructura para otros tipos de posts. Éstos son algunos de ellos:

Ahora que se tiene un modelo general para los tipos de posts, me puedo concentrar en la página principal. Al igual que con todo interfaz de usuario, el primer paso es llegar a la meta de la página principal. La investigación del cliente mostró que muchos usuarios se tropiezan con el sitio sin entender completamente lo que es. Por lo tanto, una introducción y un texto de bienvenida debe ser lo primero que ven los usuarios. El nuevo enfoque central gira en torno a lugares y éste debe ser el bloque secundario, seguido de lo que está pasando en ArchaeologySouthwest.org (la revista actual, blog, eventos, noticias, etc.). Esta es la iteración del proceso de diseño:

Con V1, se creó un diseño básico que se asemeja a la página inicial. No hay mucha jerarquía; lo primero que un usuario verá es el lugar destacado y luego se perderá en las columnas. Con V2, se creó una columna separada que hace que sea más fácil de seguir. Sin embargo, todavía se puede mejorar. Aquí es donde el conocimiento del contenido juega un papel importante. Se sabe que ArchaeologySouthwest.org no tiene más de dos eventos sucediendo a la vez, por lo que no tiene sentido tener muchos en la página de inicio. En V3, el foco está en los próximos eventos de manera que si va a haber más de dos, el usuario puede hacer clic en un botón “más” y ver el resto. También se hizo un énfasis adicional en la revista actual, ya que es fuente de dinero del cliente. Los usuarios comienzan en la parte superior y con el uso de un patrón F, se mueven hacia abajo. Así que ahora, el flujo del ojo es Localización> Bienvenido> Revista> Eventos> Noticias.

Ahora que se tiene un wireframe visual y estructura del sitio es mucho más fácil solidificar características y cómo funcionarán las cosas. Se tiene otra reunión con el cliente para repasar la funcionalidad real (que ahora sale a la luz) y el flujo de la interacción del usuario. Se sabe que todavía habrá ajustes en el final, pero serán solo ajustes y no cambios en todo el proceso. Lo más importante es que no habrá sorpresas.

Artículo original en Toptal

Leer Entrada Completa