CONTENIDO Brief Pregunta problema Objetivos Alcance Audidencia Adquisición Conversión Retención Investigación Primaria Investigación Secundaria
5 6 7 8 8 9 9 9 10 11-12
CONCEPTUALIZACIÓN UI UX IA
14 14 15
Referentes visuales
16-17
Interfaz de usuario Experiencia de usuario Arquitectura de la información Mapa de navegación Estrategia de comunicación
18-22 23-24 25-29 30-31 32-33
Bocetación Jeraquía tipográfica Identidad sitio web Wireframes Mockups Campaña publicitaria
34-35 36-37 38-43 44-52 53-60 61-66
3
BRIEF Constantemente las personas se quedan sin ideas para cocinar, ya sea porque tienen una dieta especial por salud o simplemente porque quieren probar algo nuevo y recurren a internet a buscar recetas que sean saludables, económicas y de su gusto. Kokku es una página web que brinda un servicio de asesoría, recomendaciones y recetas para personas de acuerdo a sus gustos y características alimenticias. La función principal de Kokku es ser un asesor virtual que actuará mediante filtros y ayudarás al usuario a encontrar una receta balanceada, esto a su vez ayudará a Kokku a ir almacenando preferencias y gustos en una base de datos que luego utilizará en recomendaciones y recetas fáciles de preparar.
5
¿? 6
PREGUNTA PROBLEMA ¿De qué manera, mediante una página web se podría
ayudar en la selección de recetas adecuadas, de fácil preparación y del gusto de usuario que ingrese según sus necesidades diarias?
OBJETIVOS • Hacer de Kokku el mejor asesor de comida online • Ayudar a las personas con dietas a variar sus recetas sin tanto esfuerzo • Facilitar a las personas con recursos limitados, recetas económicas y de fácil preparación • Incentivar a chefs, ya sea principiantes o profesionales a promocionar sus recetas nuevas
7
ALCANCE
AUDIENCIA
Este proyecto busca facilitar la vida de las personas a la hora de tomar la decisión de que comer, todo esto se debe a que muchas veces tienen que seguir una dieta especial debido a alguna enfermedad que poseen o tienen recursos limitados para cocinar. Kokku les facilitará mucho la vida ya que les mostrará recetas nuevas acordes a su dieta o recursos. También podrá crear un calendario-horario para las recetas de esa manera será posible programar recetas para determinados días y/o horas, además de eso las recetas contarían con paso a paso o también para comprarla en algún restaurante cercano.
Público objetivo entre los 25 y 45 años de edad.
El proyecto comenzaría en la ciudad de Barranquilla con un número limitado de usuarios y una base de datos pequeña que pueda ir llenándose de recetas de los usuarios.
8
Publico directo: personas con enfermedades que necesiten dietas y personas con recursos limitados que quieran probar recetas nuevas. Publico indirecto: todas aquellas personas que quieran probar alguna receta nueva y/o compartir alguna receta propia.
ADQUISICIÓN
CONVERSIÓN
RETENCIÓN
El primer paso para adquirir usuarios será la promoción digital exponiendo las virtudes de Kokku, con imágenes llamativas alusivas al sitio, a través de las redes sociales como Facebook, Twitter e Instagram. Adquiridos los primeros usuarios, incentivaremos al usuario mediante consejos útiles e información de valor gratis (que le ayuden en su dieta y/o preparación de alimentos diarios u ocasiones especiales) a que se haga suscriptor y un potencial promotor de la página, al tener el poder de calificar, escribir su sugerencia respecto al sitio y/o a la receta y compartir artículos y recetas de su agrado.
Para atraer a más usuarios, se impulsará la página web mediante publicidad tradicional (Flyer, brocures, carteles) en lugares frecuentados por nuestro target group, en esa publicidad se expondrá la versatilidad, facilidad y gratuidad del sitio. De igual manera se crearán campañas creativas a través de los medios digital para generar un gran impacto visual. Otro método para atraer a más usuarios será la colocación de recetas exclusivas de chefs, útiles para ocasiones específicas.
La retención se efectuará mediante la fidelización de los usuarios a través de sus preferencias al armar las recetas de su gusto. Kokku guardará esta información en una base de datos que luego utilizará para enviar al usuario mediante la misma página o correo electrónico recomendaciones, recetas adaptadas a sus posibles gustos y artículos culinarios de interés. El usuario tendrá la manera de guardar, organizar, compartir, programar notificaciones de recetas personales y montar al sitio mediante imágenes sus realizaciones culinarias, que podrán ser calificadas por otros usuarios.
9
INVESTIGACIÓN PRIMARIA Las primeras receta de Kokku, serán compartidas de otros sitios web especializados en alta cocina, cocina de uso diario, recetarios y recetas especiales para dietas que sean fidedignas. De esta manera se iniciará con la información inicial en el sitio web. De igual forma se armará un equipo de profesionales en el área médica, nutricional y gastronómica que estén buscando experiencia en el inicio de su carrera y quieran exponer sus artículos a los usuarios. También se hará uso de las encuestas digitales y físicas para recopilar información valiosa en la consecución de recetas nuevas y/o más consumidas el público.
10
INVESTIGACIÓN SECUNDARIA Partiremos de referentes web como:
• hiulitscuisine.com: Un portal dedicado a la cocina vegana casera, cuya navegación lleva al usuario a diferentes recetas por categorías como: desayunos, entradas, meriendas platos principales, postres de diferentes cocinas internacionales.
• Eladerezo.hola.com: Este blog muestra recetas desde los productos, como: res, cerdo, pescado, etc. y dedica muchísimas recetas en cada una de ellas, además expone artículos de vinos para acompañar con los diferentes platos.
11
INVESTIGACIÓN SECUNDARIA
• Vix.com: Es un blog que expone artículos de comidas saludables, consejos y tips de cocinas.
12
• Dieteticasinpatrocinadores.org: Blog de dietistas y nutricionistas que publican sobre los desórdenes alimenticios, las enfermedades que se pueden disipar mediante alimentos y artículos sobre comer sano, etc.
CONCEPTUALIZACIÓN IU/UX/IA
UI
UX
Kokku, será una página de interfaz sencilla, de tendencia actual, de fácil uso para el usuario que navegue sin complicaciones y pueda ubicarse dentro de la página con rapidez. Su diseño se basará en los grafismos generados a partir de la marca, manejará tonos rojos y blancos alusivo a la comida, también tendrá tonalidades pasteles alternos en la medida que los grafismos lo requieran.
Kokku, contará con un navegador con varias divisiones de menú que llevarán al usuario por diferentes secciones. El logotipo de Kokku aparecerá en el centro de la barra de navegación para mayor recordación del usuario. En la parte superior derecha del menú estarán los iconos de las redes sociales y un espacio para abrir sesión o para suscribirse a la página. Tendrá un hero image que mostrará los artículos y recetas más interesantes y una barra de búsqueda para que el usuario empiece a navegar a partir de una palabra clave que lo lleve a un artículo de su interés. Tendrá un bloque de consejos de nutricionistas, chefs y médicos, también de testimonios y experiencias de usuarios. Tendrá un bloque para publicidad que estará al lado derecho al ingresar a las secciones y al izquierdo estarán los ítems del filtro para depurar la información y llegar a lo específico que el usuario busca. En el footer estará la información de Kokku y los avisos legales.
La tipografía a utilizar será sobria, elegante y sans serifada para imprimirle prestigio a la marca y al sitio web. Kokku hará uso del marketing visual mediante imágenes de productos de calidad para despertar sensaciones de gusto en los usuarios.
14
IA El Menú estará en el lado izquierdo de la barra de navegación, el logotipo en el centro, los iconos de las redes sociales y la entrada de los suscriptores en el lado derecho, para darle una mayor orden a la barra y hacer más visibles el logo para mayor recordación, las redes sociales y suscriptores para crear curiosidad de entrar y ver más contenidos. El hero image se ubica debajo del navegador por ser lo primero que el usuario ve al ingresar a la página, de esa manera se crea una conexión e interés con la información plasmada ahí.
recomendaciones e incidan positivamente en la búsqueda por filtros. El bloque de consejos y testimonios estará debajo de la barra de búsqueda, esto le da menos visibilidad, pero no le resta importancia. Se estipula de esa manera para que el usuario recorra la página y tenga acceso a todos los contenidos. Y por último el footer con la información de menos interés para el usuario.
Debajo de esta estará la barra de búsqueda para concretar ese interés e incentivar al usuario a seguir explorando la página. Al ingresar a la búsqueda la interfaz cambia un poco quedando en el lado izquierdo los ítems del panel de filtros, en el centro la búsqueda y al lado derecho la información recomendada, esto hace que lo más visible después de la búsqueda sean las
15
REFERENTES VISUALES Nuestro punto de partida serán páginas como:
• wix.heladería: De esta página el referente es la barra de navegación, la disposición de los elementos, como el logo en la parte central para hacerlo más recordado, el menú en el lado izquierdo para una mejor distribución visual.
16
• Trivago.com: De esta página nuestro referente será la disposición de los filtros y de la información buscada, porque le da buena jerarquía visual a la información requerida por el usuario, que se moverá eficientemente en el sitio.
REFERENTES VISUALES
• Adidas.co: De este referente tomaremos la distribución de los bloque de información, que en nuestra web se encontrará en la página de entrada, debajo del hero image.
• Trivago.com: De esta página nuestra referencia a seguir, será la distribución de del formulario de registro para los nuevos usuarios, por su sencillez y fácil uso.
17
INTERFAZ
DE USUARIO
18
19
20
21
22
EXPERIENCIA DE USUARIO
23
UX El navegador de Kokku tendrá en sus divisiones de menú, (Inicio, Nosotros, Ingresa tu receta, contactos) que llevarán al usuario por diferentes secciones. En el apartado “Nosotros” el usuario tendrá la posibilidad de conocer a cerca de la página y qué hace. En “Ingresa tu receta” aquellos usuarios registrados tendrán la posibilidad de ingresar sus resetas y compartirlas ya sea en la misma página o a través de las redes sociales. En “contacto” el usuario podrá contactarse con los administradores de la página para sugerencias, quejas o reclamos. En el centro de la barra de navegación aparecerá El logotipo de Kokku para mayor recordación del usuario. En la parte superior derecha del menú estarán los iconos de las redes sociales y un espacio para abrir sesión o para suscribirse a la página. El hero image ubicado debajo de la barra de navegación mostrará los artículos y recetas más interesantes. Debajo del hero image se encontrá la barra de búsqueda 24
a partir de esta el usuario podrá ingresar al siguiente contenido donde encontrará información requerida que haya buscado previamente, además de los filtros en el lado izquierdo que lo ayudarán a organizar esa información. Tendrá un bloque de consejos de nutricionistas, chefs y médicos, también de testimonios y experiencias de usuarios en el lado derecho. En la parte central aparecerá por bloques la busqueda requerida por el usuario. En el footer estará la información de Kokku y los avisos legales.
ARQUITECTURA DE LA INFORMACIÓN
25
La página principal está dispuesta de esta manera para facilitar su uso. La barra de navegación consta en el lado izquierdo del menú, en el centro el logo y al lado derecho los ícono de las redes sociales y el ítem de ingreso y registro. Debajo de la barra de navegación se encuentra el hero image, que contará con imágenes interesantes y adaptadas al contenido en general, luego la barra de búsqueda en un buen tamaño para incentivar al usuario a buscar información de su gusto. Siguiente a eso están los contenedores de consejos y testimonios de los usuarios, los chefs y nutricionistas. Por último el footer con la información legal de la página. La información está dispuesta de esta manera para facilitar la navegación al ser una página sobria y sin saturación de información.
26
Esta pรกgina consta de la misma barra de navegaciรณn y la distribuciรณn de su informaciรณn es diferente a la primera. En ella los bloques de informaciรณn estรกn dispuestos tres en columnas de manera vertical. En la primera columna se encuentran los filtros, en la segunda columna el bloque con la informaciรณn solicitada y en el tercer bloque los consejos e informaciรณn relacionada con la busqueda. De esta manera el usuario tiene una mejor lectura de la informaciรณn por su composiciรณn de izquierda a derecha mejorando la navegaciรณn y el desempeรฑo del usuario en la pรกgina
27
Esta página contiene la información ampliada de una de las busquedas seleccionadas, aquí la información está dispuesta de manera sencilla. En la parte superior la barra de navegación, luego la imagen ampliada alusiva a la busqueda y debajo de esta la información detallada y por último el footer
28
La pĂĄgina de registro es sencilla, fĂĄcil y dispuesta de tal manera que el usuario intuya lo que debe hacer. Su contenido es claro y conciso. Del lado izquierdo se encuentra el registro a travĂŠs de facebook, google+ o con el correo y en el lado derecho el ingreso de los usuarios.
29
MAPA
DE NAVEGACIÓN
30
31
ESTRATEGIA
DE COMUNICACIÓN
32
CAMPAÑA DE LANZAMIENTO La campaña de lanzanmiento que se utilizará para dar a conocer la página Kokku, será, implementando la publicidad tradicional mediante flyer, brochure, carteles, etc. El día de lanzamiento se estarán repartiendo volantes con información del sitio web, sus ventajas y beneficios y todo lo que se puede realizar desde la página; también se estarán pegando carteles en zonas de alto movimiento de personas. Con la campaña masiva se espera llegar al mayor número de personas que conozca el sitio, para de esa manera adquirir los primero usuarios. Los puntos donde se estará dando a conocer la página serán aquellos donde frecuente gran cantidad de personas jóvenes, como los centros comerciales de la ciudad de Barranquilla. Anterior a ese lanzamiento se habrá difundido la información a través de las redes sociales más importantes como: Facebook, Instagram, Twitter y vídeos publicitarios en Youtube. 33
BOCETACIÓN WEB KOKKU
34
Boceto home
Boceto Pรกgina filtros
Bocetos logo Kokku
35
JERARQUÍA TIPOGRÁFICA
36
37
IDENTIDAD
DEL SITIO
38
LOGOTIPO
39
BLANCO Y NEGRO
40
TAMAÑOS Y FAVICON Tamaños mínimos para sistemas online e impresos
FAVICON
41
TIPOGRAFÍA PRIMARIA
42
TIPOGRAFÍA SECUNDARIA
43
WIREFRAMES DESKTOP
44
45
46
47
48
WIREFRAMES TABLET
49
50
WIREFRAMES MÓVIL
51
52
MOCKUP DESKTOP
53
54
55
56
MOCKUP TABLET
57
58
MOCKUP MÓVIL
59
60
CAMPAÑA PUBLICITARIA REDES SOCIALES
61
62
63
64
65
66
Por: Ever Acosta AndrĂŠs Molina