leonardomndesign
leonardomndesign
leonardomndesign
Hay sabores que todo el mundo debería probar. Hay películas que todo el mundo debería ver. Hay experiencias que todo el mundo debería vivir. Y queremos plasmar todo esto en la nueva web de Django's Burger.
Conoce los ingredientes para una receta de película.
Hay sabores que todo el mundo debería probar. Hay películas que todo el mundo debería ver. Hay experiencias que todo el mundo debería vivir. Y queremos plasmar todo esto en la nueva web de Django's Burger.
Conoce los ingredientes para una receta de película.
Hay sabores que todo el mundo debería probar. Hay películas que todo el mundo debería ver. Hay experiencias que todo el mundo debería vivir. Y queremos plasmar todo esto en la nueva web de Django's Burger.
Conoce los ingredientes para una receta de película.
Proyecto
Diseño UX/UI
de porfolio con implementación
y propuesta
de marketing
Rol
Product
Designer
Duración
3 meses aprox
Retos
Retos
Retos
‘’Necesitamos una web mobile para mostrar nuestros productos y que redirija a los servicios de delivery’’ Esa fue inicialmente la única premisa pero al ser un proyecto joven, necesitábamos plasmar los sabores a la imagen de la marca en dicha web. Por lo que nosotros también priorizamos;
Un coppy que transmita
Cohesión de imagen
Fluidez y facilidad de navegación
Nuestra propuesta
Nuestra propuesta
Nuestra propuesta
Propuesta de diseño web || Django’s Burger
leonardomndesign Página 1
Propuesta de diseño
página web
Jorge quiere una hamburguesa
Para ello, vamos a elaborar un plan de acción, guiándonos en la experiencia de Jorge en su intento de conseguir su hamburguesa
Qué es lo que pasa cuando busca su hamburguesa, pasos anteriores.
La construcción de la página web, necesitamos saber qué elementos incluir en nuestra página web y su estructura, preguntemos a Jorge
Vamos a darle forma y color, que lo pueda leer Jorge y su abuela también
Nuestro diseño a examen ¿Pasará la lupa de Jorge?
Propuesta de diseño web || Django’s Burger
leonardomndesign Página 2
Ponte en la piel de Jorge
Vamos a ver paso a paso, cómo se siente Jorge y qué encuentra
Queremos una burger de Django´s, vamos a ver en Google
Encuentra 4 páginas web diferentes que pertenecen a otros establecimientos, lo que puede generar confusiones.
Empezamos mal.
Miramos la card de Google pero hay información justita, queremos conocer el menú y fotos del local
Propuesta de diseño web || Django’s Burger
leonardomndesign Página 3
¿Qué sugerencias tenemos?
¿Qué sugerencias tenemos?
Si buscamos 'Django´s Burger Madrid la info es más concreta, pero el usuario no tiene por qué saberlo, igual en el naming en rr.ss añadir el Django´s Burger Madrid pueda ayudar
Las cards de Google con la información del establecimiento es primordial, tanto para fomentar nuestra imagen profesional como para atraer nuevos posibles clientes
Para ir empezando
El tiempo es oro y Jorge quiere su hamburguesa. La página web necesitará un para de días pero mientras tanto...
Podemos ir creando material para las cards de Google; fotos e información mucho más detallada del establecimiento
También podemos ir diseñando el menú para incluirlo en rr.ss, en las cards de Google en formato jpg
Propuesta de diseño web || Django’s Burger
leonardomndesign Página 4
Ladrillo a ladrillo
Vamos a ponerle los cimientos a la página web
Los apartados y contenido de la página web los definiremos en base a los resultados de las encuestas, así como también de las siguientes acciones y herramientas entre otras;
Comparación y análisis de las páginas web de la competencia, así como patrones de diseño familiarizados con el mundo de la alimentación
El análisis de los usuarios; sus hábitos al navegar en internet, hábitos de consumo, factores culturales etc.
Propuesta de diseño web || Django’s Burger
leonardomndesign Página 5
Ladrillo a ladrillo
Vamos a ponerle los cimientos a la página web
Los apartados y contenido de la página web los definiremos en base a los resultados de las encuestas, así como también de las siguientes acciones y herramientas entre otras;
Comparación y análisis de las páginas web de la competencia, así como patrones de diseño familiarizados con el mundo de la alimentación
El análisis de los usuarios; sus hábitos al navegar en internet, hábitos de consumo, factores culturales etc.
Propuesta de diseño web || Django’s Burger
leonardomndesign Página 5
Vamos a darle color y forma
Una vez aprobada la estructura de la página web, vamos a aplicar la paleta de colores y tipografías acorde a la imagen de Django’s Burger bajo los estándares;
Accesibilidad y legibilidad; Google es muy observador respecto a que nuestra página sea legible y cumpla con unos mínimos, así como también elegir unas fuentes y paletas ayudará al cliente a centrarse en nuestro producto
Principios de jerarquía visual y psicología del color; los colores y las tipografías nos ayudan a organizar la información de manera intuitiva en el subconsciente
Crear uniformidad y proyectar una imagen de marca sólida que acompañe al contenido en redes sociales.
Propuesta de diseño web || Django’s Burger
leonardomndesign Página 6
Nuestro diseño a examen
Una vez tengamos el diseño, antes de implementarlo tenemos que testarlo por los siguientes motivos;
Comprobar que el proceso del usuario es tal y como está previsto, analizando debilidades y anteponiéndonos a problemas de los usuarios; Jorge se puede equivocar
Asegurarnos que se cumple con la calidad que pretendemos en el producto
Aplicar cambios y sugerencias del cliente, así como también de los usuarios
Propuesta de diseño web || Django’s Burger
leonardomndesign Página 7
Propuesta de diseño web || Django’s Burger
leonardomndesign Página 1
Propuesta de diseño
página web
Jorge quiere una hamburguesa
Para ello, vamos a elaborar un plan de acción, guiándonos en la experiencia de Jorge en su intento de conseguir su hamburguesa
Qué es lo que pasa cuando busca su hamburguesa, pasos anteriores.
La construcción de la página web, necesitamos saber qué elementos incluir en nuestra página web y su estructura, preguntemos a Jorge
Vamos a darle forma y color, que lo pueda leer Jorge y su abuela también
Nuestro diseño a examen ¿Pasará la lupa de Jorge?
Propuesta de diseño web || Django’s Burger
leonardomndesign Página 2
Ponte en la piel de Jorge
Vamos a ver paso a paso, cómo se siente Jorge y qué encuentra
Queremos una burger de Django´s, vamos a ver en Google
Encuentra 4 páginas web diferentes que pertenecen a otros establecimientos, lo que puede generar confusiones.
Empezamos mal.
Miramos la card de Google pero hay información justita, queremos conocer el menú y fotos del local
Propuesta de diseño web || Django’s Burger
leonardomndesign Página 3
¿Qué sugerencias tenemos?
¿Qué sugerencias tenemos?
Si buscamos 'Django´s Burger Madrid la info es más concreta, pero el usuario no tiene por qué saberlo, igual en el naming en rr.ss añadir el Django´s Burger Madrid pueda ayudar
Las cards de Google con la información del establecimiento es primordial, tanto para fomentar nuestra imagen profesional como para atraer nuevos posibles clientes
Para ir empezando
El tiempo es oro y Jorge quiere su hamburguesa. La página web necesitará un para de días pero mientras tanto...
Podemos ir creando material para las cards de Google; fotos e información mucho más detallada del establecimiento
También podemos ir diseñando el menú para incluirlo en rr.ss, en las cards de Google en formato jpg
Propuesta de diseño web || Django’s Burger
leonardomndesign Página 4
Ladrillo a ladrillo
Vamos a ponerle los cimientos a la página web
Los apartados y contenido de la página web los definiremos en base a los resultados de las encuestas, así como también de las siguientes acciones y herramientas entre otras;
Comparación y análisis de las páginas web de la competencia, así como patrones de diseño familiarizados con el mundo de la alimentación
El análisis de los usuarios; sus hábitos al navegar en internet, hábitos de consumo, factores culturales etc.
Propuesta de diseño web || Django’s Burger
leonardomndesign Página 5
Ladrillo a ladrillo
Vamos a ponerle los cimientos a la página web
Los apartados y contenido de la página web los definiremos en base a los resultados de las encuestas, así como también de las siguientes acciones y herramientas entre otras;
Comparación y análisis de las páginas web de la competencia, así como patrones de diseño familiarizados con el mundo de la alimentación
El análisis de los usuarios; sus hábitos al navegar en internet, hábitos de consumo, factores culturales etc.
Propuesta de diseño web || Django’s Burger
leonardomndesign Página 5
Vamos a darle color y forma
Una vez aprobada la estructura de la página web, vamos a aplicar la paleta de colores y tipografías acorde a la imagen de Django’s Burger bajo los estándares;
Accesibilidad y legibilidad; Google es muy observador respecto a que nuestra página sea legible y cumpla con unos mínimos, así como también elegir unas fuentes y paletas ayudará al cliente a centrarse en nuestro producto
Principios de jerarquía visual y psicología del color; los colores y las tipografías nos ayudan a organizar la información de manera intuitiva en el subconsciente
Crear uniformidad y proyectar una imagen de marca sólida que acompañe al contenido en redes sociales.
Propuesta de diseño web || Django’s Burger
leonardomndesign Página 6
Nuestro diseño a examen
Una vez tengamos el diseño, antes de implementarlo tenemos que testarlo por los siguientes motivos;
Comprobar que el proceso del usuario es tal y como está previsto, analizando debilidades y anteponiéndonos a problemas de los usuarios; Jorge se puede equivocar
Asegurarnos que se cumple con la calidad que pretendemos en el producto
Aplicar cambios y sugerencias del cliente, así como también de los usuarios
Propuesta de diseño web || Django’s Burger
leonardomndesign Página 7
A través de estas diapositivas puedes ver la propuesta simplificada, tras una pequeña investigación, que le entregamos al cliente para que comprendiera nuestro proceso de diseño, obviamente explicando que este es un proceso reiterativo
y cíclico, no lineal.
A través de estas diapositivas puedes ver la propuesta simplificada, tras una pequeña investigación, que le entregamos al cliente para que comprendiera nuestro proceso de diseño, obviamente explicando que este es un proceso reiterativo
y cíclico, no lineal.
A través de estas diapositivas puedes ver la propuesta simplificada, tras una pequeña investigación, que le entregamos al cliente para que comprendiera nuestro proceso de diseño, obviamente explicando que este es un proceso reiterativo
y cíclico, no lineal. (Puedes hacer zoom si lo necesitas)
A través de estas diapositivas puedes ver la propuesta simplificada, tras una pequeña investigación, que le entregamos al cliente para que comprendiera nuestro proceso de diseño, obviamente explicando que este es un proceso reiterativo
y cíclico, no lineal. (puedes hacer zoom si lo necesitas)
Investigación
Investigación
Investigación
Si hablamos de diseño web, los patrones y las referencias son fundamentales. Analizamos decenas de hamburgueserías, desde las más conocidas hasta las que no son tan populares pero presentan un buen producto.
Lo siguiente fue analizar las estadísticas de las empresas de delivery y dimos con un insight bastante relevante; en España el momento cuando más hamburguesas se venden es los días de fútbol. Por lo que debíamos incluir un apartado de ofertas para ocasiones como estas.
Y por último, para lograr esa fluidez y facilidad de navegación era necesario conocer de primera mano como navegan, qué buscan y cómo lo hacen los consumidores en las páginas web de hamburgueserías en concreto. Por lo que a través de un lean survey canvas, planteamos las siguientes preguntas con sus resultados:
Si hablamos de diseño web, los patrones y las referencias son fundamentales. Analizamos decenas de hamburgueserías, desde las más conocidas hasta las que no son tan populares pero presentan un buen producto.
Si hablamos de diseño web, los patrones y las referencias son fundamentales. Analizamos decenas de hamburgueserías, desde las más conocidas hasta las que no son tan populares pero presentan un buen producto.
Si hablamos de diseño web, los patrones y las referencias son fundamentales. Analizamos decenas de hamburgueserías, desde las más conocidas hasta las que no son tan populares pero presentan un buen producto.
Y por último, para lograr esa fluidez y facilidad de navegación era necesario conocer de primera mano como navegan, qué buscan y cómo lo hacen los consumidores en las páginas web de hamburgueserías en concreto. Por lo que a través de un lean survey canvas, planteamos las siguientes preguntas con sus resultados:
Lo siguiente fue analizar las estadísticas de las empresas de delivery y dimos con un insight bastante relevante; en España el momento cuando más hamburguesas se venden es los días de fútbol. Por lo que debíamos incluir un apartado de ofertas para ocasiones como estas.
Estructura
Estructura
Estructura
Con los resultados de la investigación, ya podíamos ponernos a pensar en la estructura que iba a tener la home de la web. Puedes hacer zoom para ver bien los elementos.
Materialización
Materialización
Materialización
Teniendo ya la estructura, que nos garantizase a través del testeo su fluidez y navegación, podíamos ya empezar a darle forma pero no antes de proponer una serie de materiales que nos den cohesión y una imagen más corporativa.
Acompañando a esto, un copy relacionado con el personaje de Django, de la película ‘Django desencadenado’ de Tarantino. Un copy algo rebelde y relacionado con el cine.
Y por supuesto, un menú interactivo y dinámico que nos permita saber rápidamente qué opciones tenemos.
Teniendo ya la estructura, que nos garantizase a través del testeo su fluidez y navegación, podíamos ya empezar a darle forma pero no antes de proponer una serie de materiales que nos den cohesión y una imagen más corporativa.
Teniendo ya la estructura, que nos garantizase a través del testeo su fluidez y navegación, podíamos ya empezar a darle forma pero no antes de proponer una serie de materiales que nos den cohesión y una imagen más corporativa.
Teniendo ya la estructura, que nos garantizase a través del testeo su fluidez y navegación, podíamos ya empezar a darle forma pero no antes de proponer una serie de materiales que nos den cohesión y una imagen más corporativa.
Acompañando a esto, un copy relacionado con el personaje de Django, de la película ‘Django desencadenado’ de Tarantino. Un copy algo rebelde y relacionado con el cine.
Y por supuesto, un menú interactivo y dinámico que nos permita saber rápidamente qué opciones tenemos.
Conclusión
Conclusión
Conclusión
Las decisiones respaldadas por investigación, empatía a través de formularios o testings, afianzan la solidez de las propuestas.
También es importante mencionar que no siempre hay que hacer por hacer, analizar y dar pequeños pasos nos acercan mucho más a los objetivos.
Los siguientes pasos serían utilizar diferentes métricas para comprobar que se están recibiendo más pedidos y que las promociones en fechas como los días de partido tienen efecto.
¿Ganas de burgers? ¿Curiosidad por ver la página web?
y comprueba el proceso con tus propios ojos
(y paladar, quién sabe)