Soy Jose y me apasiona el diseño UX/UI. Me encanta poder encontrar un equilibrio estético y funcional en cada proyecto, por muy complejo y exigente que sea.
01
Kualum
Web corporativa tratando el proceso UX/UI
02
OpciónTic
UX/UI de Software de gestión implementando un Design System y web corporativa multisite.
03
The Daily Gring
App para ordenar y entregar café
04
Amedio Travel
Design System
Kualum
Web corporativa tratando el proceso UX/UI
Kualum Studio es una StartUp dedicada al mundo digital, ofreciendo 4 pilares fundamentales en su web: Marketing Digital, Desarrollo Web, Diseño Gráfico y Fotografía de Producto.

Requerimiento para el proyecto

Empresa de gente joven y emprendedora, destaca por diseños fuertes y accesibles para cualquier usuario. Adapta a cada cliente un lenguaje técnico específico para ayudar a entender mejor el sector.

Formulario de contacto con dos funciones

  • Guiar al usuario dando unos pequeños flujos de navegación y encontrar todo lo que necesite.
  • Ayudar al Studio para saber qué proyecto real propondria el cliente
UX
UI

Research

Nuestro Research nos ayudó a identificar el user persona de la plataforma, siendo todos unos perfiles muy similares. Destaca la inmediatez y la profesionalidad para contratar el servicio que se busca sin perderse por flujos interminables, siendo claros y honestos con el lenguaje.

Flujo de Navegación

Accesibilidad del color

El estudio de color para Kualum encajar en los requisitos de joven, con fuerza y sobre todo ACCESIBLE. Nuestra elección tras el estudio y análisis del cliente como del mercado, llegamos a la conclusión de utilizar un Azul Eléctrico, dando un Ratio de contraste con buena accesibilidad y aportando a su vez la profesionalidad que buscábamos.
Contrast Ratio

4.62:1

Fujo de navegación: Contacto

Para cumplir los dos requisitos que teníamos, la solución que implantamos fue crear un flujo de preguntas y selecciones para ayudar tanto al usuario como al Studio.

En el apartado contacto, creamos un flujo de preguntas y selecciones para ayudar tanto al usuario como al Studio. El cliente que necesitaba información sobre un servicio específico, se autogestionaba generando un flujo con una serie de preguntas, y aislandolo del ruido generado por otras áreas, facilitando de esta forma la puesta en común con el Studio.Esto ayudó a que las personas con menos conocimientos en el sector no se sintieran pérdidas y pudieran responder fácilmente en su mayoría con un SÍ-NO.

Este formulario facilitó el primer contacto entre el Studio y el usuario, conociendo de esta forma más de detalle lo que necesitaba.

Para realizar un correcto flujo, realizamos un nuevo Research entre distintos Studios para analizar y complementar las preguntas más frecuentes que les hacían en los correos de contacto. Una vez implementado, fue testeado y analizado por clientes reales antes de salir al mercado.

OpciónTic
UX/UI de Software de gestión implementando un Design System y web corporativa multisite.
OpciónTic es un Software Factory con más de 6 años en el sector tecnológico, queriendo ofrecer soluciones digitales para la gestión global de las empresas.

Requerimiento para el proyecto

OpciónTic buscaba una mejora y fluidez a la hora de realizar los proyectos, queriendo implementar una metodología ágil para desarrollar los Software. Dentro del mundo tecnológico querían destacar por su usabilidad y diseño, ofreciendo productos a medida para sus diversos clientes.

Por otro lado, se realizó un rediseño web para ofrecer distintos servicios dependiendo del consumidor, implementando un multisite para centralizar la información de cada uno de los servicios.

Design System

Para agilizar el proceso de creación de Software, se quiso implementar un Design System que diera sentido a la creación de pantallas, ya que la empresa se encontraba en expansión, incorporando a distintos programadores descentralizados, y se corría el riesgo de incoherencia en las plataformas.

Para este proceso, analice la plataforma que utilizaban para crear los Software con las posibilidades y limitaciones que ofrecía. Esto me sirvió para poder ser realista a la hora de proponer soluciones y modificaciones dentro del programa, sin que fuera costoso o poco eficiente.

El Research principal de otros Software de gestión como los de la compañía, nos reveló que un alto porcentaje de los usuarios se perdían con tanta funcionalidad, al igual que no eran capaces encontrar los distintos botones y acciones para realizar el proceso.

Con esta información empezamos a construir un Design System con unos parámetros muy específicos, tanto de limitación por el programa utilizado en la creación de los Software, como con la implementación de un sistema más simple de navegación en el proceso.

Software antes del Desing System

Software Despues del Desing System

Desing System Aplicado a la Platadorma
Desing System junto al UI del cliente
Esta implementación facilitó el trabajo del proceso de creación de los Software, y ayudó a coordinar a los distintos miembros del equipo descentralizado. A su vez, fomentamos que los usuarios no se perdieran por la plataforma y se agilizaran de esta forma los procesos que realizaban dentro de ella.

Web corporativa multisite

El reto que se propuso para este proyecto fue la creación de un wireframe suficientemente robusto, para que, utilizándolo como plantilla, sirviera para todas las distintas variantes de la web principal, mantenido un estilo a lo largo el multisite.

Esto provocó una serie de testeos fallidos con el usuario hasta llegar al wireframe que necesitaban, siendo fácil de gestionar e implementar con sus distintos subdominios.

UX
UI

Flujo de Navegación

Con esta metodología de externalizar los servicios en multisite queríamos lograr un mayor impacto de captación, ofreciendo al cliente las distintas variantes dependiendo de sus perfiles y siendo capaces de llegar a ellos por el posicionamiento SEO y palabras clave en cada una de las webs.
The Daily Gring
App para ordenar y entregar café
Se trata de una propuesta para realizar pedidos de café, mediante una aplicación utilizable tanto Android como iOS. Siendo un proyecto evaluable, la propuesta contendrá:
  • Diagrama de flujo de navegación.
  • Wireframes para mostrar en detalle el flujo y la arquitectura de la información.
  • Interfaz de usuario de las páginas clave.

Requerimiento para el proyecto

La tienda solo podría servir una única clase de café, pudiendo pedirles que te lo entregasen en tu ubicación en un periodo de 30 minutos o establecer una hora concreta para ir a recogerlo en la ubicación específica.

  • El usuario puede optar por añadir: 0-2 paquetes de leche.
  • El usuario puede optar por añadir: 0-2 paquetes de azúcar.
  • El usuario puede elegir el tamaño: Pequeño, Mediano, Grande.

Flujo de navegación

Al ser una App con los requerimientos tan detallados, dediqué la mayor parte del tiempo en el Research, ya que me pareció interesante indagar en el comportamiento de los usuarios que ordenan alimentación online.

La propuesta más destacada que pude encontrar fue la posibilidad de navegar y realizar un pedido como “Invitado” ya que se daba el caso de pagar en el establecimiento.

Dentro del Research, descubrí que un gran número de aplicaciones no destacaban ingredientes ni alérgenos, por lo que se perderían usuarios por miedo o dudas del producto que consumirian.

Wireframes

Una vez el flujo de navegación especificado, pasamos a la fase de wireframe, entrando con detalle el flujo y la arquitectura de la información, jerarquizando los movimientos elementales de la aplicación. En esta parte destaqué los dos posibles caminos dentro de la App, la recogida en tienda y el envío a tu ubicación, mostrando el camino al establecimiento o la localización del repartidor respectivamente.

Ui y Prototipado final

Para la parte visual del proyecto busqué limpieza y claridad para favorecer la accesibilidad y manejo de la aplicación. Utilicé un color burdeos de fácil legibilidad con una tipografía de palo seco. El prototipo final lo realicé en la plataforma Marvel para entregar al cliente únicamente la URL del proyecto
Contrast Ratio

7.71:1
Amedio Travel
Design System
Con la propuesta de realizar una App junto a mis compañeros, se quiso implementar un Design System que engloba cada molécula de los distintos componentes, realizando un estudio detallado de cada uno de ellos. Actualmente, seguimos el desarrollo para más tarde poder agilizar e implementarlo en futuros proyectos.

Requerimiento para el proyecto

Los principales requerimientos de nuestro Design System los dicta el tipo de App que queríamos hacer. Tras la fase de Research detectamos los principales problemas que tenían los usuarios para emprender un viaje y se creó dos user persona con distintas necesidades y actitudes.

Decidimos que nuestra App fuera joven y dinámica, tratando de ser lo más limpia y accesible posible, ofreciendo todo lo que necesitaba cada usuario con unos pocos clicks.

Color y Tipografía

Uno de los factores más importantes a la hora de realizar una App es consolidar una paleta de color robusta y accesible, teniendo en cuenta todos los colores que se utilizarían, desde grises para fondos y tipografías hasta colores primarios y secundarios del resto de la aplicación.
Para encontrar nuestro color primario y secundario, cada uno tuvimos que analizar y proponer dichos colores ante el resto. No solo tendrían que combinar sino que nos propusimos el reto de que tuviera un Contrast Ratio por encima de 6.

Una vez puestos en común el análisis de cada uno, se llego a la conclusión de utilizar una paleta de colores fríos que tuvieran mayor peso visual en la aplicación sobre blancos y grises.

Contrast Ratio

7.60:1
Con la tipografía, hicimos el mismo proceso que con el color, analizando y poniendo en común cada una de las búsquedas, sabiendo que queríamos una tipografía de Palo Seco y otras Serif para complementar los textos y anotaciones.

Una vez encontradas y que tuvieran una buena legibilidad en pantalla, creamos un grid de nuesta App para poder expresar en REMs el tamaño que tendrían dentro de nuestra aplicación, dando como valor más bajo y excepcional 14px.

Principios de Diseño

En este apartado, dedicamos más tiempo, ya que sería el que daría las pautas para realizar los distintos componentes de la aplicación. Desde el radio de las esquinas del componente hasta el tratado de las sombras, estuvimos testeando y analizando el comportamiento de los elementos dentro de nuestras pantallas.

Creación de componentes

Una vez realizados el proceso de color, tipografía y principios de diseño, vimos que clase de componentes tendría que llevar nuestra App para a su vez empezar a diseñar cada uno de ellos sobre nuestro grid previamente establecido. Estos son algunos de ellos:
Aún se está desarrollando el Design System por lo que algunos textos y componentes están aún por comprobar, pero estamos trabajando en ello para poder tenerlo lo antes posible.