EXAMEN FINAL DE DISEÑO DE INTERFACES GRÁFICAS ISIL 2019 - 2 / PROYECTO OCEANIKA

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.