Este documento describe el rediseño de la identidad corporativa y la página web de TuBillete. Incluye una revisión del logotipo, la creación de manuales de identidad y comunicación, y la optimización de la experiencia de usuario y el diseño de la página web de acuerdo con principios de usabilidad. También detalla el desarrollo de nuevas funcionalidades como el registro de usuarios a través de redes sociales y la creación de una aplicación de lista de deseos.

1. tubillete.com
Coduxe

2. Índicetubillete.com
Índice
0. Diseño identidad corporativa
1. Restyling identidad corporativa TuBillete
1.1 Rediseño de identificador visual
1.2 Manual de identidad corporativa
1.2.1 Versiones / Uso identificador
1.2.2 Uso cromático
1.2.3 Uso tipográfico
1.2.4 Escalabilidad y proporciones
1.2.5 Adaptaciones a papelería
1.3 Manual de comunicación corporativa
1.3.1 Uso en comunicación corporativa
1.3.2 Uso en comunicación digital
2. Rediseño tubillete.com
2.1 Auditoría y evaluación de usabilidad y
experiencia de usuario
2.2 Diseño web
2.2.1 Color
2.2.2 Tipografía
2.2.3 Elementos gráficos
2.2.4 Rejilla (grid)
2.2.5 Experiencia de usuario (UX)
2.3 Ciclo de implementación
2.3.1 Supervisión
2.3.1.1 Análisis
2.3.1.2 Test
2.3.1.3 Ejecución
2.3.2 Elaboración de manuales
3. Desarrollo de interacción
3.1 Herramientas de maquetado
3.2 Herramientas de interacción
3.3 Guías generales y manual
3.4 Estructura semántica
3.5 Desarrollo multi-dispositivo
3.6 Entorno de trabajo (GIT)
4. Adaptación de la aplicación a la API
5. Nuevas implementaciones
5.1 Registro de usuarios mediante RRSS
5.2 Diseño y programación de arquitectura de
aplicación “Lista de deseos”
5.3 Diseño y programación plan de fidelización tobing

3. Diseño identidad
corporativa
Diseño del identificador visual
Para el diseño de la marca tobing.com tendremos
en consideración el alcance internacional con el
que nace la empresa, con especial atención a las
consideraciones culturales y de imagen
aplicables en cada país objetivo y su público.
1. Restyling identidad corporativatubillete.com
Manual de identidad corporativa
Documento en el que se diseñan las líneas
maestras de la imagen de tobing.com En él, se
definen las normas que se deben seguir para
imprimir la marca y el logotipo en los diferentes
soportes internos y externos, con especial
hincapié en aquellos que se mostrarán al público.
El manual describe los signos gráficos escogidos
para mostrar su imagen así como todas sus
posibles variaciones: forma, color, tamaño, etc.
En el mismo, se explica su forma, oportunidad y
lugar de utilización mediante la inclusión de
ejemplos gráficos. Se muestran también las
normas prohibitivas de sus aplicaciones. También
se incluyen los colores y las tipografías
corporativas.
tobing.com Versiones / Uso
identificador
Uso cromático
Uso tipográfico
Escalabilidad y
proporciones
Adaptaciones a papelería

4. Restyling identidad
corporativa
Rediseño del identificador visual
El restyling propone mantener las bases que lo
hacen reconocible y actualizar su estética. De
esta forma, después del cambio sigue siendo
perfectamente reconocible por su público, pero ya
no se ve anticuado. Además, el cambio, nos
permite prepararnos para el lanzamiento de la
nueva marca tobing, planificando un período de
transición en el que convivan la versión antigua
del logo y la nueva.
1. Restyling identidad corporativatubillete.com
Manual de identidad corporativa
Documento en el que se diseñan las líneas
maestras de la imagen de tubillete.com /
tobing.com En él, se definen las normas que se
deben seguir para imprimir la marca y el logotipo
en los diferentes soportes internos y externos,
con especial hincapié en aquellos que se
mostrarán al público.
El manual describe los signos gráficos escogidos
para mostrar su imagen así como todas sus
posibles variaciones: forma, color, tamaño, etc.
En el mismo, se explica su forma, oportunidad y
lugar de utilización mediante la inclusión de
ejemplos gráficos. Se muestran también las
normas prohibitivas de sus aplicaciones. También
se incluyen los colores y las tipografías
corporativas.
tubillete.com Versiones / Uso
identificador
Uso cromático
Uso tipográfico
Escalabilidad y
proporciones
Adaptaciones a papelería

5. 1. Restyling identidad corporativatubillete.com
Manual de comunicación corporativa
La Comunicación Corporativa se compone de un
sinnúmero de elementos, tanto internos como
externos, que desarrollándolos, constituyen la
plataforma de proyección de la imagen en una
forma eficiente.
Uso en comunicación digital
Web
Banners
RSS
Uso en comunicación comercial
Prensa
Radio
Televisión

6. 2. Rediseño tubillete.comtubillete.com
Rediseño tubillete.com - Diseño Gráfico
Auditoría y evaluación de usabilidad y
experiencia de usuario
Realización de estudio pormenorizado bajo los
siguientes criterios:
Learnability. Facilidad para el usuarios al llevar a
cabo tareas básicas la primera vez que se
enfrentan al diseño.
Eficiencia. Superado el aprendizaje básico del
diseño funcional - tiempo medio en la realización
de tareas.
Memorability. uso del diseño después de un
periodo sin hacerlo - tiempo en volver a adquirir el
conocimiento necesario para usarlo
eficientemente.
Eficacia. Durante la realización de una tarea -
Media de errores que comete el usuario / Nivel de
gravedad / Rapidez en enmendar los errores.
Satisfacción. Sencillez y experiencia percibida
por el usuario en el uso del diseño.
La utilidad del servicio tubillete junto con altos
estándares de usabilidad web son, sin duda, los
factores determinante a la hora de incrementar
las ventas por internet. Optimizando los procesos
de venta en internet, incrementamos el ROI y
minimizamos el número de abandonos. Por lo
que la meta evidente es conseguir que todo
usuario con intención de compra la finalice sin
obstáculos ni interrupciones.
Nuestra auditoría comprende todo un conjunto de
metodologías que hacen que nos permitan
detectar zonas de mejora, carencias y
oportunidades.
En una segunda batería de pruebas, se evalúa la
web para comprobar:
- Navegabilidad.
- Estructura.
- Facilidad de encontrar la información y salir de
la misma.
- Rapidez de carga.
- Diseño.
- Efectividad del contenido y su correcta
legibilidad.

7. tubillete.com
Diseño web
Se realizará el diseño web bajo un principio de
navegabilidad, interactividad, usabilidad,
arquitectura de la información y la interacción de
medios, distribuyendo los textos, gráficos,
vínculos y resto de información como contenido
web.
El primer paso es trabajar los diferentes bocetos,
esto nos facilita un orden claro sobre el diseño y
su estructura adecuándonos al contenido.
En el segundo paso nos centramos en definir los
colores, elecciones tipográficas, diseño de
elementos gráficos, grid del sitio, etc.
2. Rediseño tubillete.com

8. 2. Rediseño tubillete.comtubillete.com
Color
Seleccionamos los colores adecuados para
captar la atención del usuario y mejorar la
experiencia de usuario.
Hay una relación directa entre el color y los
elementos de una composición, alterar el color de
un objeto puede repercutir en la valoración
jerárquica que se defina.

9. tubillete.com
Tipografía
La tipografía es una de las áreas importante en el
diseño web. Nos basamos en ocho puntos
importantes para la elección:
1. Elección de tipografía adecuada para su lectura
2. Jerarquía tipográfica
3. Tamaño de letra legible
4. Uso máximo de dos tipografías
5. Interlineado correcto
6. Control de letras capitales o mayúsculas
7. No exceder en textos centrados
8. Uso de contraste adecuado
Geometric Sans
Humanist SansOld Style
Transitional
ModernSlab Serifs
2. Rediseño tubillete.com

10. tubillete.com
Elementos gráficos
Los elementos gráficos son una parte
fundamental del diseño en todas sus
modalidades, introduciendo en las composiciones
información visual que complementa en gran
medida el mensaje que se desea transmitir, y que
a menudo es tan importante en el diseño como
los contenidos textuales del mismo.
Existen diferentes objetos gráficos, como
logotipo, banners, iconos, bullets, fotografías,
ilustraciones, etc. Cada uno de ellos posee unas
características de diseño y unas capacidades de
comunicación propias, jugando un papel diferente
en la composición y cuya correcta disposición
completará los objetivos de comunicación y
transaccionabilidad.
2. Rediseño tubillete.com

11. tubillete.com
La rejilla (grid)
Las rejillas permiten construir una estructura
sólida y dar forma al diseño web, facilitando la
colocación de módulos y dándole una coherencia
al sitio. La rejilla nos ayuda a que el usuario
entienda mejor la estructura web y así ofrecerle
una navegación clara y fácil de utilizar.
2. Rediseño tubillete.com

12. tubillete.com
Experiencia de usuario (UX)
El proceso para el diseño de UX está relacionado
con la correcta comprensión y diseño de la
experiencia del usuario durante el proceso de
navegación. Tanto el aspecto estético y las
funcionalidades de un sitio junto con los
requerimientos del negocio y las necesidades de
los usuarios conforman los aspectos a tener en
consideración en la construcción del UX.
Los pensamientos de los usuarios sobre un
producto son mayormente influenciados por las
experiencias y sensaciones mientras se sirven de
estos.
Una buena experiencia de usuario produce
clientes apasionados y felices.
UX
Proceso de diseño
1. Investigación
2. Análisis
3. Diseño
5. Testeo 4. Prototipo
2. Rediseño tubillete.com

13. tubillete.com
Ciclo de implementación
1. Supervisión
1.1 Análisis
Para el supuesto en que la maquetación web se
realice desde la estructura de tubillete,
realizaremos análisis semanales de los
procesos y diseños implementados.
1.2 Test
Durante el proceso de diseño y maquetación
someteremos la herramienta y su diseño en un
entorno de test con el fin de minimizar los
errores previo a su fase de producción.
1.3 Ejecución
Prestaremos apoyo durante todo el proceso de
diseño y maquetación en aquellas funciones
que sean necesarias para la ejecución.
2. Elaboración de manuales
Elaboración de manuales para la correcta
implementación del diseño y navegabilidad del
sitio.
Supervisión
1. Análisis
2. Test
3.
Ejecución
2. Rediseño tubillete.com

14. Derarrollo e interacción - Diseño y Maquetación
Herramientas de maquetado
Usaremos bootstrap como herramienta frontal
para garantizar la consistencia y compatibilidad a
lo largo de los diferentes navegadores.
Bootstrap ha transformado la industria del
front-end estableciendo guidelines que ayudan a
todos los desarrolladores a hablar el mismo
idioma o como denomina la regla dorada: "cada
línea de código debe parecer haber sido escrita
por una sola persona, sin importar el número de
contribuyentes".
3. Desarrollo e interaccióntubillete.com
Herramientas de interacción
Para el desarrollo de la interacción usaremos
javascript sobre Backbone. Backbone es un
front-end framework que coordina todo el
comportamiento de la aplicación, interactuando
con el servidor mediante pedidos ajax,
recogiendo solo aquella información necesaria,
actualizando la vista y reduciendo recargas
innecesarias, mejorando así la experiencia del
usuario.
Backbone es usado por grandes referentes en la
industria, incluyendo Linkedin, Pinterest o
Freelancer.
Su principal objetivo es implementar arquitectura
MV* en el front-end reforzando organización y
estructura, mejorando así la escalabilidad y
mantenimiento mediante el uso de módulos
según funcionalidades.

15. Guías generales y manual
Desarrollo de un manual específico para el
proyecto que permitirá a todos aquellos
contribuyentes entender el funcionamiento de la
aplicación y así poder fácilmente trabajar y/o
colaborar en su desarrollo, prueba o mejora
creando un entorno de trabajo fácil de aprender,
dinámico, escalable y de fácil mantenimiento.
tubillete.com
Estructura semántica
Uso de código semánticamente estructurado,
eliminando redundancias o partes innecesarias
para mejorar el rendimiento y estructura de la
aplicación.
3. Desarrollo e interacción

16. Desarrollo multi-dispositivo
Respondemos a todos los eventos, necesidades
y proporciones de cada explorador, adaptando los
viewports a los requisitos del usuario potencial de
cada plataforma para mejorar la experiencia
general.
tubillete.com
Entorno de trabajo bajo sistema de control
(GIT)
Todo el proyecto estará alojado en un sistema de
control de versiones que mediante un repositorio
nos permite crear, guardar o registrar versiones,
trabajar en equipo, seguir cualquier alteración o
cambio. Así fácilmente se podrá desarrollar
diferentes ramas para mejorar el workflow general
del proyecto.
Browse Change Revert Update Branch Commit PublishCreate
3. Desarrollo e interacción

17. Implementación de la conexiones de la API actual
de tubillete con la aplicación frontal poniendo así
en funcionamiento completo el proyecto.
Para lo que se requiere concertar un entorno de
desarrollo con la API para poder desarrollar
pruebas de integración y rendimiento.
4. Adaptación de la aplicación a la APItubillete.com
Adaptación de la aplicación
a la API
API tubillete.com

18. 5. Nuevas implementacionestubillete.com
El aumento del tráfico en un site como tobing.com
a través de la creación de contenido por usuarios
constituye la base de la estrategia.
“ Nuestro negocio en tobing.com no es el viaje, es
la experiencia del viajero”
Por ello el conocimiento, análisis y estudio de
cada experiencia ha de suponer la punta de lanza
de tobing.com convirtiendo al usuario en el
creador de los servicios que prestamos.
tobing.com no solo responde a la pregunta - ¿A
donde viajes? - si no que debe responder - ¿Con
quien viajes? - ¿Que estás haciendo durante tu
viaje? -
La plataforma se construye sobre una
arquitectura colaborativa que permite a usuarios
interactuar entre ellos, realizando comentarios,
planteando preguntas, sugerencias sobre cada
experiencia vivida, con el fin de crear un alto nivel
de participación.
Nuevas implementaciones

19. Registro de usuarios mediante RRSS
Registro mediante RRSS permitiendo acceso al
panel de usuario con funcionalidades:
_ Panel de Control
_ Mis Viajes
_ Tus Deseos
_ Viajes en Grupo
_ Invita Amigos
_ Obtén puntos tobing
tubillete.com
Panel de Control
Mis Viajes
Tus Deseos
Viajes en Grupo
Invita Amigos
Obtén puntos tobing
928 36 70 15
Chat
e-mail
Canjear tobings
tubillete.co
Usuario
Contraseña
Acceder
Registro con facebook
Registro con LinkedIn
5. Nuevas implementaciones

20. tubillete.com
Diseño y programación de arquitectura de
aplicación “Lista de deseos”
La lista de deseos constituye el comienzo de lo
que posteriormente ha de convertirse en la
plataforma de crowdExperience sobre la que
construir el primer modelo de planificación
turística del destino.
La plataforma de “lista de deseos” se construirá
sobre un CMS que permite parametrizar y
adaptar la arquitectura de está a las necesidades
de búsqueda y participación de los usuarios,
trasladándoles el control de la herramienta. Para
ello contamos con una solución incorporada al
sistema de incentivos tobing que incentiva la
participación y cocreacción de experiencias
individuales y colectivas.
Destino Precio
Deseo guardado
Público Privado
Compartir
Visible a usuarios Usuarios Web
Registro web
Apoyar deseo
Máx. 115€Min. 90 €
Duración
Vacaciones
Aviso de
posibilidad de
cumplir el deseo
5. Nuevas implementaciones

21. tubillete.com
Diseño y programación de plan de Fidelización tobing
Elemento de engagement y participación que premia a los usuarios
por transacción y experiencia realizada.
Permite donar tobings entre usuarios
Acceso a panel de redención desde el primer tobing
Integra FFP de compañias aéreas y socios
Integra sistema de Evalucación
Obtiene puntos por generar contenido (publicado + lecturas)
Otorga puntos por geotag durante la experiencia
Obtiene puntos por participación (recomendación, sugerencia,
respuesta a otros viajeros)
Integra ExperienceDiary App http://flightdiary.net/
El plan de incentivos permite obtener descuentos y premios desde el
momento de registro, y escala la obtención de puntos en función de la
participación haciendolo mas accesible a los iniciados y mas complejo
a los usuarios habituales.
5. Nuevas implementaciones

22. tubillete.com
0. Diseño identidad corporativa
1. Restyling identidad corporativa
1.1 Rediseño de identificador visual
1.2 Manual de identidad corporativa
1.2.1 Versiones / Uso identificador
1.2.2 Uso cromático
1.2.3 Uso tipográfico
1.2.4 Escalabilidad y proporciones
1.2.5 Adaptaciones a papelería
1.3 Manual de comunicación corporativa
1.3.1 Uso en comunicación corporativa
1.3.2 Uso en comunicación digital
2. Rediseño tubillete.com*
2.1 Auditoría y evaluación de usabilidad y
experiencia de usuario
2.2 Diseño web
2.2.1 Color
2.2.2 Tipografía
2.2.3 Elementos gráficos
2.2.4 Rejilla (grid)
2.2.5 Experiencia de usuario (UX)
2.3 Ciclo de implementación
2.3.1 Supervisión
2.3.1.1 Análisis
2.3.1.2 Test
2.3.1.3 Ejecución
2.3.2 Elaboración de manuales
3. Desarrollo de interacción
3.1 Herramientas de maquetado
3.2 Herramientas de interacción
3.3 Guías generales y manual
3.4 Estructura semántica
3.5 Desarrollo multi-dispositivo
3.6 Entorno de trabajo (GIT)
4. Adaptación de la aplicación a la API
5. Nuevas implementaciones
5.1 Registro de usuarios mediante RRSS
5.2 Diseño y programación de arquitectura de aplicación “Lista de
deseos”
5.3 Diseño y programación plan de fidelización tobing
5. Presupuesto

23. Gracias
info@dealupandpartners.com