project WeblogsSL

Actions

  • IA
  • UX
  • Interfaz
  • Front-end
  • Back-end
  • theming

Diseño y desarrollo del blog EnNaranja de ING Direct

image - - leave a reply -
mockup-1-ing

A través de WeblogsSL tuve la ocasión de ponerme 100% con el diseño y desarrollo del blog EnNaranja de ING (gracias compis!), y que mejor introducción que la escrita por Esther Moroto: Nosotros también nos replanteamos las cosas. Bienvenidos al nuevo diseño de En Naranja, el blog de ING DIRECT.

Desgranando un poco más el asunto del rediseño frente a la anterior versión…

Nuestros objetivos

Aumentar el tráfico:

  • Dando a conocer el blog a nuevos usuarios.

Mantener el tráfico recurrente:

  • Mejorando la experiencia de los usuarios.
  • Su tiempo de permanencia por visita.
  • Creando comunidad.

Acciones

  1. Potenciar el contenido
  2. Mejor aprovechamiento de la interfaz
  3. Socialización
  4. Mobile Web

1. Potenciar el contenido

El contenido es el rey. Hay que potenciar el contenido de calidad que ya existe y el que esta por venir.
Acciones para ello:

  • Textual: Mayor espacio y legibilidad.
  • Gráficos: Imágenes mayores y más calidad.
  • Audiovisual: Video permanente en home.
  • Ubicación y Aire: Mejores localización de los diferentes contenidos y mayor espacio entre ellos.

Navegabilidad

Aumentar la navegación a través de los contenidos.
Acciones para ello:

  • Categorías: En zona de menú principal.
  • Tags: Más presentes en el post.

Buscador

Haciendo que sea un recurso más usado y que sea más eficiente la encontrabilidad de los contenidos.
Acciones para ello:

  • Ubicación: En la zona de menú principal.
  • Interacción: Aumentando el campo.

Slideshow

Destacar contenido fuera de cronología.
Acciones para ello:
Slideshow (con 3 diapositivas)

  • En una primera zona de la home.
  • A gran tamaño.
  • Mostrando título, resumen e imagen del post.
  • Finalizar el slide con un texto personalizable a nivel editorial y los botones sociales a facebook y twitter.

Quote Post

Pequeños y rápidos fragmentos de información.
Acciones para ello:

  • Post rápidos a nivel editorial de tipo “quote” que pueden ser citas, referencias o enlaces.
  • Ubicación en el flujo normal de posts.

Video

Mayor relevancia al video.

  • Bloque propio en la home para destacar el video más reciente y enlace a ver más.

2. Aprovechamiento interfaz

Más contenidos, mejor estructurados y con un mayor grado de visibilidad.

  1. Generar un nuevo layout basado en bloques (usabilidad y claridad).
  2. Romper con la monotonía de 10 posts con el mismo peso.
  3. Más contenido y funcionalidad en la home.
  4. Prescindir del sidebar:
    • Desaparece la dualidad de contenido principal y alternativo.
    • Todos los bloques cobran importancia al estar en el mismo contenedor.
    • Evitamos espacio vacío en vertical del sidebar como sucedía hasta ahora.

3. Socialización

Más comunidad, más cercana y participativa.

  1. Widgets Facebook y Twitter (ampliados)
  2. Disqus
  3. Píldoras de consejos

4. Mobile web

Empleando técnicas de responsive web design.

mockup-2-ing
mockup-ing-870

go to web