EXAMEN FINAL DISEÑO DE INTERFACES PROYECTO: OCEANIKA Integrantes: - Diana Ureta - Lady Otrera - César Castro - Gianella Morales - Lucia Leud
JUSTIFICACIÓN DEL PROYECTO Sustento
Inicio a la página bloqueado por ventana emergente vacía.
Secciones en desorden.
Categoría de Eventos vacía.
Falta de información (descripción, precios) acerca de sus platos.
Barra de menĂş mal centrada.
SecciĂłn innecesaria y sin interacciĂłn.
Sistema de registro y reserva ineficiente.
Apariencia actual del website
DISEÑO UX Cliente Nombre del negocio: Oceanika Restaurante Sushi Bar & Lounge es un restaurante con el propósito de satisfacer a los clientes con una gran variedad de opciones, tanto en comida fusión, como en sushi bar, además de una diversa variedad de tragos. Rubro: Pertenece al rubro de restaurantes, específicamente al rubro de restaurante sushi bar.
Producto o servicio ofrecido: Ofrece un servicio de sushi bar, barra libre en comida fusiรณn, sushi y tragos.
Promesa a usuarios:
Pasar un momento cรกlido y alegre con amigos o familia en unidad.
Competencia directa:
Competencia indirecta:
Perfil de usuario
●
Demográfico: Personas de 24 años hasta 50 años, hay un balance de consumo en género y edades, consumen tanto mujeres como hombres.
●
Psicográfico: Vive en distritos cercanos a San Borja. Estudió o estudia una carrera profesional, y actualmente trabaja para solventar sus gastos. Personas entusiastas y amigables, que les gusta compartir con los demás. Siempre le gusta reunirse a comer con amigos, familia o compañeros de trabajo.
â—?
Customer Journey map
DISEÑO UI / UX Arquitectura de la información ●
Objetivo del website:
Reservar mesa y pedido.
● Mapa de sitio:
● Diagrama de flujo:
●
Sistemas de búsqueda: Sistema paralax landing
Sistema de navegación: Ventanas emergentes
Diseño UX ●
WIREFRAME DESKTOP
Página inicio:
Página inicio con ventana de registro:
●
WIREFRAME DESKTOP
Página inicio con ventana de sección carta:
Página interior:
●
WIREFRAME DESKTOP Ventanas de inicio:
●
WIREFRAME DESKTOP
Ventanas emergentes para cada categoría de la carta:
●
WIREFRAME DESKTOP Ventanas de confirmación:
Diseño UX Página inicio con menú hamburguesa: ●
WIREFRAME SMARTPHONE Página inicio:
●
WIREFRAME SMARTPHONE
Página inicio con ventana de registro:
Página inicio con ventana de sección carta:
●
WIREFRAME SMARTPHONE
Página interior:
●
WIREFRAME SMARTPHONE
Ventanas de inicio:
●
WIREFRAME SMARTPHONE
Ventanas emergentes para cada categoría de la carta:
●
WIREFRAME SMARTPHONE
Ventanas emergentes para cada categoría de la carta:
●
WIREFRAME SMARTPHONE
Ventanas emergentes para cada categoría de la carta:
●
WIREFRAME SMARTPHONE Ventanas de confirmación:
Diseño UI
●
GUÍA DE ESTILOS
(TABLERO DE DISEÑO)
●
MOCKUP DESKTOP
Página inicio:
●
MOCKUP DESKTOP
Página inicio con ventanas:
●
MOCKUP DESKTOP
Página interior:
●
MOCKUP DESKTOP Ventanas de inicio:
●
WIREFRAME DESKTOP
Ventanas emergentes para cada categoría de la carta:
Sección MAKIS
●
WIREFRAME DESKTOP
Ventanas emergentes para cada categoría de la carta:
Sección BEBIDAS
●
WIREFRAME DESKTOP
Ventanas emergentes para cada categoría de la carta:
Sección COMBOS
●
WIREFRAME DESKTOP
Ventanas emergentes para cada categoría de la carta:
Sección ESPECIALES
●
WIREFRAME DESKTOP
Ventanas emergentes para cada categoría de la carta:
Sección COMPLEMENTOS
●
WIREFRAME DESKTOP
Ventanas emergentes para cada categoría de la carta:
Sección POSTRES
●
MOCKUP DESKTOP
Ventanas de confirmación:
●
MOCKUP SMARTPHONE
Página inicio:
Página inicio con menú hamburguesa:
Página inicio con ventana de sección carta: ●
MOCKUP SMARTPHONE Página inicio con ventana de registro:
●
MOCKUP SMARTPHONE
Página interior:
●
MOCKUP SMARTPHONE
Ventanas de inicio:
●
MOCKUP SMARTPHONE
Ventanas emergentes para cada categoría de la carta:
●
MOCKUP SMARTPHONE
Ventanas emergentes para cada categoría de la carta:
●
MOCKUP SMARTPHONE
Ventanas emergentes para cada categoría de la carta:
●
MOCKUP SMARTPHONE
Ventanas emergentes para cada categoría de la carta:
●
MOCKUP SMARTPHONE
Ventanas emergentes para cada categoría de la carta:
●
MOCKUP SMARTPHONE
Ventanas emergentes para cada categoría de la carta:
●
MOCKUP SMARTPHONE
Ventanas emergentes para cada categoría de la carta:
●
MOCKUP SMARTPHONE
Ventanas emergentes para cada categoría de la carta:
●
MOCKUP SMARTPHONE
Ventanas emergentes para cada categoría de la carta:
●
MOCKUP SMARTPHONE
Ventanas emergentes para cada categoría de la carta:
●
MOCKUP SMARTPHONE
Ventanas emergentes para cada categoría de la carta:
●
MOCKUP SMARTPHONE
Ventanas emergentes para cada categoría de la carta:
●
MOCKUP SMARTPHONE
Ventanas emergentes para cada categoría de la carta:
●
MOCKUP SMARTPHONE
Ventanas emergentes para cada categoría de la carta:
●
MOCKUP SMARTPHONE
Ventanas emergentes para cada categoría de la carta:
●
MOCKUP SMARTPHONE
Ventanas emergentes para cada categoría de la carta:
●
WIREFRAME SMARTPHONE Ventanas de confirmación:
DISEÑO DE INTERACCIÓN Enlace a mockup Desktop: https://marvelapp.com/496h2ba/screen/64250898
Enlace a mockup Smartphone: https://marvelapp.com/497c482/screen/64277226
TEST UX Metodología Empleada Se realizaron entrevistas, a participantes que se encuentran
dentro del público objetivo, donde pudimos rescatar diferentes opiniones acerca de la estructura de nuestra propuesta de diseño del website. Además logramos anotar todas las sugerencias que nos brindaron.
Metodología Empleada
Preguntas para la entrevista: ¿Puedes localizar las opciones de modo práctico? ¿Puedes encontrar el elemento específico de manera rápida o demoras en ubicarlo? ¿Qué partes de la web te parece más práctica?
¿Qué partes de la web te parecen que deben mejorar? ¿Qué opinas de la estructura y diseño de la web?
Resultados de Tests Entrevistado 1:
Entrevistado 2:
Nombre: Giovanna Rondon
Nombre: Frank Mendoza
Edad: 25 años
Edad: 30 años
Vive en: San Luis
Vive en: San Borja
Ocupación: Estudia y trabaja
Ocupación: Trabaja
Recomendaciones:
Recomendaciones:
-
Aplicar la selección en la imagen y no solo en el texto de la sección carta.
-
Quitar la marca de la empresa del centro, quizás ponerla a un costado en la web para celular.
Resultados de Tests Entrevistado 3:
Entrevistado 4:
Nombre: Ziara Collantes
Nombre: Angela Fernández
Edad: 24 años
Edad: 25 años
Vive en: San Borja
Vive en: San Luis
Ocupación: Estudia y trabaja
Ocupación: Estudia y trabaja
Recomendaciones:
Recomendaciones:
-
Agrandar los iconos de las redes sociales en la web para celular.
-
Agrandar el menú hamburguesa de la web móvil.
Mejoras a los prototipos Mejora: Los iconos de las redes sociales se hicieron mĂĄs grandes debido a la dificultad para poder seleccionarlos. El logo se moviĂł al lado izquierdo para darle espacio a los botones de las redes y tenga un mejor aspecto.
Antes
DespuĂŠs
Mejoras a los prototipos Mejora: Se incrementó el espacio de selección, del recuadro de las secciones de la carta, para que así sea más fácil de manejar para el usuario.
Antes
Después
Evidencia de tests Entrevista a Giovanna Rondon: https://youtu.be/FLmYaIUzfAM
Evidencia de tests Entrevista a Frank Mendoza: https://youtu.be/EVvD-cEQpJA
Evidencia de tests Entrevista a Ziara Collantes: https://youtu.be/EVvD-cEQpJA
Evidencia de tests Entrevista a Angela Fernรกndez: https://youtu.be/ZwlUF-nzu3U
CAMPAร A DE MARKETING DIGITAL Objetivos -
Buscar que el restaurante Oceanika destaque mรกs entre la competencia que va creciendo.
-
Fidelizar a los clientes, mediante las promociones que tiene el restaurante.
-
Facilitar el acceso a la website para los usuarios.
Productos â—? Banner:
â—? Emailing:
â—? Redes sociales: Facebook
â—? Redes sociales: Instagram
â—? Landing page:
CONCLUSIONES DEL PROYECTO -
Los usuarios prefirieron nuestra website ya que cuenta con una interacción agradable en las secciones de la carta, pues contiene la descripción y precio de cada plato, para que el usuario pueda decidir qué desea comer.
-
A los usuarios les gustó la opción de que mediante la web del restaurante se pueda reservar la mesa y además lo que se desea pedir.
-
Encontraron el sistema paralax landing de la página muy agradable y accesible, ya que no se les redirige a otras pestañas, sino que encuentran todo en una misma página de una manera ordenada.