Diseño de un producto: del concepto al estrellato

Al mostrar una nueva funcionalidad, un nuevo producto, una adaptación a nuevas tecnologías o simplemente un nuevo diseño, solemos olvidar pronto el largo viaje que  se ha recorrido.
Desde que comienza la elaboración más rudimentaria (el concepto “diseño en servilleta” que siempre se menciona en la creación de una startup) hasta llegar al foco estelar de un lanzamiento, el proceso puede llevar meses o incluso años. Para explicarlo mejor, tomemos como ejemplo el Informa Estratégico, un informe muy especial que requería de un minucioso análisis para mostrar de forma atractiva y resumida una visión completa de una empresa.

Muchas de las diferentes fases por las que pasó el diseño visual hasta su aprobación final.

FASE 1: LA IDEA

Cuando la idea ha cobrado sentido en una reunión, tras los filtros pertinentes de contras y aprobaciones, suele aparecer en el departamento de diseño en forma de una hoja de papel con multitud de ideas plasmadas en boli azul. Se acompaña normalmente de un mail que explica las especificaciones técnicas que han ido tomando forma. Y finalmente una explicación frente al papel que puede durar apenas 20 minutos. Y una vez recogidos estos datos, se comienza a trabajar sobre la pantalla.

FASE 2: EL DISEÑO

En muchos casos se utilizan las herramientas de Mockup o de bocetado. Son esquemas sin colores, fuentes  ni estilos que sirven para trasladar al diseñador simplemente la ubicación de los elementos.

En el caso concreto que cogeremos como ejemplo, se parte de cero para destacar con un diseño diferente a lo actual e impactante: el que dé lugar al nuevo Informa Estratégico. Así que se diseña directamente en la herramienta que nos permite ser más versátiles, Adobe Illustrator.

Pasan 3 meses (vacaciones de verano mediante) para tener un diseño que nos convenciera a todos.

Pero esto es sólo un “dibujo”. Un ideal de lo que queremos tener en una página web. Y para hacer el traslado de uno a otro entraremos en la…

El código HTML y su resultado final en el navegador.

FASE 3: HTML + CSS

Hoy en día son muchos los factores a tener en cuenta y que hemos mencionado en otros post (experiencia de usuario, SEO), pero en este artículo nos centraremos en el tema del que estamos hablando, el diseño visual.

Aunque la usabilidad ya se ha estado contemplando, conviene tenerla en cuenta a la vez que se trata de hacer un HTML óptimo, fiel al dibujo inicial y lo más duro y que trae de cabeza a todo programador web (redoble de tambores) ¡¡la compatibilidad con navegadores!! (alarido de pánico). Hacer que todo se vea en un Firefox, Chrome y en el temido/odiado Internet Explorer.

Si lo hemos conseguido todo, será para estar orgullosos.

FASE 4: IMPLANTACIÓN

Y es que todo es muy bonito en un HTML “tonto”, pero ahora hay que darle cuerpo. Hacer que los “Lorem ipsum” tengan sentido y que los datos de tu BBDD no estropeen las cajas que tan monas y aseadas quedaban con unas cifras redondas. Los amigos de informática harán su parte del trabajo, colgarán el contenido en un entorno de pre-explotación y comenzará una de las fases más tediosas pero necesarias.

FASE 5: PRUEBAS

Y es que desde Marketing todo parece perfecto, pero los test dan lugar a multitud de situaciones que cuando se ha imaginado el escenario, no han salido a la luz. Nos mantiene inmersos esta fase en una continua noria de momentos desde “esto está niquelado” al “imposible, hay que retrasar la fecha de salida”.

Los cambios que surgen hacen volver en muchos sentidos a las fases anteriores, aunque sea solamente para comprobar que los nuevos datos caben o que el flujo de navegación no se ve afectado.

Hasta que litros de café, decenas de correos, tablas de contenidos y largas conversaciones de teléfono después, se da por preparada la creación.

Una de las promos diseñadas.

FASE 6: LANZAMIENTO

Y es el momento de la verdad. La subida a real.

Los días previos, el departamento de marketing es un hervidero de actividad. Banners, cartas, email, todo debe quedar preparado para el gran día. Una mañana se sube el producto mientras se lanzan también las comunicaciones. Ya está. Se hizo. Está “vivo”.

Y en muchos de los casos llega una de las mejores recompensas que podemos recibir desde el equipo. Trabajamos codo con codo al lado de atención al cliente. Y podemos escuchar cómo entran las primeras llamadas para decir que “el nuevo producto les ha encantado”. Muchos no podemos evitar esbozar una sonrisa.

Puede que no todos los trabajos tengan esta respuesta, pero desde luego trabajamos para ello.

En el proyecto del Informa Estratégico se comenzó a trabajar en Mayo del 2013. Tras pasar por todas las fases hace ya unas semanas, se lanzó con notable éxito.

Hoy en día es uno de esos diseños de los que estamos más orgullosos.