PFG Aquiles Montalvo by UMx LDGM

PROYECTO FIN DE GRADO Diseño UX/UI Aquile Montalvo Lora Universidad Mondragón México

Documento que avala el Proyecto Fin de Grado de Aquiles Montalvo Lora estudiante de la Licenciatura de Diseño Grafico Multimedia por la Universidad Mondragón México generación 2016-2020. Asesor: Manuel Fernández Del Campo García Director de carrera: Aníbal Villa Álvarez

Índice Contexto

Introducción al proyecto

Definición del problema

Brief

Proceso de diseño

Investigación de campo

Análisis de la competencia

Ideación

Bocetos y propuestas

Versión final

Mockups

Resultados

Conclusión

Arize Computers

Proyecto fin de grado

Contexto Desde siempre he tenido cierto interés hacia el área “geek”, todo lo relacionado a gadgets, computadoras, videojuegos y demás, poco a poco al adentrarme en el mundo de las computadoras, decidido ante esta inquietud me dí a la tarea de armar mi propio equipo en vez de comprar uno de alguna marca. Investigando y empapándome de conocimientos decidí adentrarme a comprar las piezas que en su momento consideraba de un buen balance para una gama media, puesto que puedes armar equipos básicos, hasta equipos costosos (más de cien mil pesos) con partes muy específicas o de nicho (equipos con sistemas de enfriamiento líquido, personalización del gabinete para competencias, etc.). Al juntar las piezas y armarlo me di cuenta de que en realidad es mas sencillo de lo que parece, y que no necesitas conocimientos de informática y demás, salvo lo mas básico, pero que sin duda alguna puedes armar por ti solo tu equipo y que al final tiene muchos beneficios como mayor costo/beneficio, mayor potencia, entre otras.

La idea de este proyecto surge después de ese momento, un usuario promedio puede parecerle atractivo los beneficios que llevaría el poder armar su propio equipo, pero que al final lo que los usuarios desean es poder tener su equipo sin mayores complicaciones ni pasos extras, por esa razón deciden comprar el equipo de marcas que ya existe (Dell, HP, Asus, etc.) Es por eso que el proyecto abarca la necesidad de poder ofrecer a los usuarios una alternativa y una manera sencilla de poder obtener un equipo de escritorio pc personal, de acuerdo con su carrera/nicho donde se desarrollan, agregando un cierto nivel de personalización a los equipos.

Introducción al proyecto El objetivo de esta plataforma es ofrecer el mejor equipo pre armado sin la necesidad de complicarle aún más las cosas al usuario, ofrecer la misma experiencia como si el usuario mismo armara su equipo en base a ciertas preferencias de presupuesto, componentes, área enfocada para mejor desempeño, etc. Generando la experiencia completa sin los contratiempos que pueden considerarse a la hora de armar el equipo, teniendo en cuenta todo el tiempo al usuario al que va dirigido. De entrada, el usuario ideal a atraer son los que les interese una pc de escritorio, para necesidades específicas del área desempeñada (edición y render de video, diseño gráfico general, render de arquitectura, animación 2D & 3D, VFX, programación, investigación científica, servidores y área de informática, uso educativo y uso gamer).

Ejemplos de Pc personalizadas y armadas desde cero

Personas que deseen ahorrar en la computadora porque se ajustara a sus necesidades dando la flexibilidad de poder recortar o aumentar ciertos componentes en áreas de la pc.

Arize Computers

Proyecto fin de grado

Definición del problema Uno de los aspectos más fundamentales serán el del valor agregado, usando la plataforma al comprar el equipo, se envía listo para usarse, totalmente ensamblado, con ciertos beneficios como descuentos o promociones, además de poder elegir entre un rango la personalización de la carcasa y algunos componentes sin costo alguno.

Tu como usuario necesitas ciertos requerimientos para desempeñarte en tu área de trabajó/profesión, como lo es un diseñador, arquitecto, ingeniero, creador de contenido, etc. Esta plataforma dará la ventaja de ahorrarle dinero al usuario puesto que podrá elegir entre muchas opciones generadas en base a un cuestionario previamente contestado para que la misma aplicación pueda recomendarte un equipo armado de piezas de la pc. La razón de usar el cuestionario es simplificar el proceso de elección del equipo, la plataforma contara con la función un quiz/cuestionario que presenta la información de los parámetros que desea el usuario (presupuesto, potencia, etc.) de una manera mas sencilla y amigable, sin agobiar al usuario en términos o en opciones de componentes para su equipo.

Uno de los problemas principales al armar una pc es el grado de complejidad y la variedad de ciertas partes de una computadora

El usuario podrás elegir ciertos parámetros para que la app sugiera la pc armada, todo en base a un cuestionario simplificado que ayuda al usuario sin confusiones o tecnicismos. El usuario necesita ciertos requerimientos para desempeñarse en su área, si eres diseñador, arquitecto, ingeniero o creador de contenido, o si tu como usuario simplemente quieres un equipo que sirva para aumentar la productividad, jugar videojuegos o como herramienta de trabajo para la oficina.

La manera mas sencilla y amigable para el usuario de elegir opciones es en base a un cuestionario/quiz.

esta aplicación tendrá la ventaja de ahorrarte dinero puesto que tu como usuario podrás elegir entre muchas opciones generadas en base a un cuestionario previamente contestado para que la misma aplicación pueda recomendarte un equipo armado de piezas de la pc.

Arize Computers

Esto ofrece una ventaja a la hora de elegir un equipo, puesto que la plataforma te está recomendando en base a tus elecciones un equipo armado para ti, sin la necesidad de tener conocimientos de computación, o de informática, añadiendo simpleza a la hora de comprar una computadora. Cuando se muestre la sugerencia de la plataforma podrás personalizar ciertos aspectos del equipo, como cambiar el color del gabinete, añadir stickers o añadir un vinil que cubrirá la mayor parte del equipo, haciendo que el usuario le dé su toque único y personalizado.

Problemas a resolver Uno de los principales problemas es que la mayoría de los usuarios desconocen como armar una pc, no saben cuáles componentes son compatibles con el resto de la computadora, ni cuales son los mejores en base a sus necesidades además de desconocer el proceso correcto de como armar una pc.

Proyecto fin de grado

Uno de los objetivos es atraer a nuevos usuarios que tienen la inquietud de probar equipos pre armados que no sean producidos por las demás compañías de cómputo, pero con el beneficio de personalización en base a sus necesidades, aumentar el número de entusiastas. Otro de los objetivos es crear un diseño general de la interfaz de la plataforma reflejando los valores de la marca y el logo, unificando el branding.

Objetivos de la plataforma Guiar al usuario de la mejor manera para sugerirle el equipo con la mayor facilidad ahorrándole esfuerzos, contratiempos y dinero, ofreciéndole las opciones de equipos que mejor se adapten a sus necesidades, área de desarrollo y componentes personales. Agregar un valor añadido al ensamble final mediante promociones, personalización de componentes específicos haciendo que el usuario se sienta parte de ese proceso, de esta forma atraemos a posibles usuarios interesados en equipos de cómputo.

El usuario general podría parecerle un proceso complicado o que necesites tener conocimientos técnicos de sistemas o informática, otro de los problemas es que la mayoría de las app son limitadas en cuanto a opciones, con mala usabilidad y un diseño de la interfaz mejorable.

Objetivos del proyecto Crear una plataforma ligera, sencilla y fácil de usar enfocada en la usabilidad, ahorrando los contratiempos y facilitando a los usuarios los equipos deseados creando soluciones que se adapten a sus necesidades ofreciendo una plataforma que sea capaz de recomendar equipos pre armados y darles un valor añadido de personalización y simplicidad.

Arize Computers

Proyecto fin de grado

Brief Usuario (¿Quiénes son?) • • • • • • • •

Rango de edad de 18 a 40 años Nivel socio económico A/B y C+ Personas con un interés hacia la computación, los videojuegos, y software creativos Usuarios que desconocen parte del tema Usuarios que buscan un ahorro en la próxima compra de su pc Usuarios enfocados en las áreas afines (diseño, gamer, arquitecto, etc.) Usuario que busca una pc de acuerdo a sus propias necesidades Posibles usuarios que buscan comprar una nueva pc

Restricciones y limitaciones Las principales restricciones del proyecto son limitadas a la misma plataforma, la dirección del proyecto será llevada hasta el punto del prototipo, puesto que crear la plataforma funcional requiere equipo y pasos extras al proyecto además de poder contar con el capital o el ingreso para poder lanzar la plataforma a nivel funcional y operativo en línea. Generar un esquema para que este funcionando el ecommerce es también un reto, pues se necesita un modelo de inventario además de la organización para el soporte de la tienda en línea, así como el personal que de seguimiento a las compras y que armen los equipos, así como una sección para poder personalizar los gabinetes, servidores y proveedores de piezas

Mi rol en el proyecto Mi proceso en el diseño se cumple a general la estructura del proyecto así como su idealización, creando la parte visual y de interfaz de la aplicación así como toda la creación del diseño de identidad visual (colores, tipografías, icono de la app/sitio web) de la plataforma.

Proceso de diseño Siendo una plataforma totalmente digital debe seguir como todo producto de diseño, ciertos lineamientos a la hora de crear productos visuales, lo primero es dar forma a la idea, generando los conceptos necesarios para poder delimitar y crear el diseño general de la plataforma. Necesitamos basarnos en un método de diseño que nos ayude como Guía para poder conceptualizar. Después de eso, viene toda la parte de desarrollo de marca del producto, conocida como Arize computers, para posteriormente crear la plataforma mediante el diagrama de flujo, colores del branding y finalizando con el prototipo funcional de la plataforma.

Opciones de diseño Las opciones de diseño deben ser estructuradas de acorde al método de diseño previamente definido, la plataforma contara con las guías de diseño de UX/UI establecidas como el estándar, la estructura general de la plataforma debe seguir esos lineamientos puesto que el usuario reconoce estos patrones definidos, lo cual crea un ambiente de familiaridad, además de usabilidad.

Arize Computers

Proyecto fin de grado

Investigación de campo Nos basaremos en los diferentes esquemas establecidos, los cuales dan pautas para mejorar el diseño de interfaces y crear una experiencia más unida, orgánica y sencilla. Tal es el caso de Material Design de google, que es los lineamientos para diseñar y delimitar los elementos y componentes de cualquier aplicación de Android, así como también Human Interface Guidelines de apple. Todos estos lineamientos son el estándar en cuanto a usabilidad y apariencia de cualquier aplicación móvil, están previamente diseñados para ofrecer la mejor experiencia al usuario dando uniformidad a la apariencia y la forma en que se navega por la aplicación móvil.

Para tener una visión completa del panorama y de cómo queremos visualizar la plataforma, debemos investigar todo lo relacionado con sitios parecidos, como inspiración, tomando los mejores elementos e ideas para perfeccionar el sitio y poder ofrecer una experiencia mejorada de la plataforma. En este caso debemos observar que es lo que algunas marcas ofrecen como propuesta, además de la experiencia que tienes al visitar sus sitios.

Porsche Algunas marcas de coches utilizan este tipo de plataforma para ofrecer al usuario la configuración de sus unidades, en este caso la marca Porsche te permite personalizar de una manera más única, eligiendo diferentes opciones para personalizar el coche, y aplicando los cambios en tiempo real, además de poder enviar la información al concesionario, como también poder guardar diferentes configuraciones en base a unos códigos para no perder las opciones elegidas.

En la industria ya existen lineamientos de diseño para unificar y ofrecer la experiencia de alta calidad en una plataforma digital (Material Design a la izquierda y Human Interface Guidelines a la derecha)

Para el seguimiento al proceso de diseño general nos enfocaremos totalmente al usuario, las necesidades de cada uno, y los entornos en donde se desarrolla, al tratarse de un tema que pudiera parecer complicado los usuarios enfrentan ciertos bloqueos, es por eso la importancia de empatizar y tener en la mente al usuario al momento de desarrollar la plataforma.

Arize Computers

Proyecto fin de grado

Dbrand

Nikon

Otro caso de este tipo de plataformas que buscan darle el giro es Dbrand, la cual es una empresa que se dedica a vender “skins” de vinil y fibra de carbono para celulares, la ventaja de esto es que además de ofrecer personalización y diferentes diseños cumplen la función de proteger el equipo.

Basándonos en la página de Nikon del Reino Unido (UK) ellos manejan una buena manera para poder elegir la mejor cámara en cuanto a necesidades de los usuarios, usan el Quiz/cuestionario para poder recomendarle la mejor cámara al usuario, basándose en diferentes parámetros como uso profesional o amateur, uso para video o foto, ajustes manuales o automáticos, etc. De esta manera delimitas las funciones que puede que al usuario no le interesen o no necesite debido al uso que le dará al equipo.

Arize Computers

Proyecto fin de grado

Análisis de la competencia Para tener un antecedente, lo mejor es analizar lo que está en el marcado actual, evaluar a nuestra competencia permite identificar área de oportunidad y mejoras que contenería nuestra plataforma. En las plataformas web existen varias páginas que proporcionan este tipo de servicios, el poder armar tu pc ideal con componentes elegidos, pero que la gran mayoría no agregan un valor a la experiencia más que el de poder armar tu pc y poder guardarla.

Esta plataforma además de contar con este sistema cuenta con una línea de diseño muy buena, que compite con grandes marcas de accesorios y partes de computadoras como lo podría ser Logitech, Razer, gigabyte entre otras. Esta plataforma es de la compañía NZXT la cual es una empresa dedicada a vender gabinetes, sistemas de enfriamiento y accesorios para la pc, lo cual habla de la experiencia de como desarrollaron la plataforma.

NZXT una de las mejores plataformas previamente citadas es sin duda la de lets bld, la cual consiste en elegir uno de los juegos de la lista, los cuales suelen ser los mas jugados y más populares, y en base a ese juego elegir unos parámetros, dentro de esos el más importante es el del precio (presupuesto) y en base a eso te recomienda la pc ya armada, además de a cuantos cuadros por segundo correría ese juego con esos parámetros seleccionados.

Arize Computers

Proyecto fin de grado

Ibuypower

Spartangeek

Otra de las plataformas que son muy competentes es la de Ibuypower. com, esta plataforma se dedica a vender equipos pre armados, pero al igual que letsbld.com, ofrecen la posibilidad de poder recomendar un build en base a que juegos quieres que corra ese equipo, al igual la interfaz es sencilla y con buen balance.

Esta plataforma, creada por el canal de YouTube del mismo nombre es una tienda ecommerce que vende computadoras armadas para distintos sectores especializados, además de contar con tienda para accesorios y periféricos de computación. Cuenta con un diseño equilibrado, con buen balance entre funcionalidad y buen diseño, a diferencia de las otras plataformas puedes pedir que te armen un equipo en base a tus necesidades, pero es mediante un formulario de información para que posteriormente se pongan en contacto contigo, lo cual agrega pasos extras y no obtienes al instante el equipo que deseas.

Arize Computers

Proyecto fin de grado

Ideación Para tener en claro opciones de diseño, debemos basarnos en algunas plataformas que existen actualmente, tomar las mejores ideas y crear una primera maquetación del sitio y como serviría la plataforma para después empezar a proponer conceptos e ideas de la actual plataforma.

Después de elegir el boceto del logo se empezó a formular el concepto final, que da como resultado el logotipo, líneas ascendentes cruzadas, que evocan la conexión con la tecnología, además de la paleta de colores que en el logo se usan degradados haciendo evidencia a los colores de la plataforma.

Bocetos y propuestas Comenzando con la propuesta de todo el branding de la marca como tal, debemos seguir el proceso de diseño enfocado a ser un producto meramente digital. La primera fase es la del bocetaje de logo para la parte de identidad de la plataforma, así como el nombre que tendrá, se decidió por Arize sinónimo de arise (ascender), se dio este significado debido al significado con la tecnología de ascender el conocimiento y el avance. Para el logo el objetivo era darle uniformidad a la marca, dando ese toque tecnológico y vanguardista, además de estar relacionado con el nombre, de los cuales se hicieron bocetos hasta llegar a la propuesta actual.

Logos preliminares

Logos final (versión sobre blanco)

Logo final (versión sobre fondo oscuro)

Ubuntu Questrial

Primeros bocetos del logo de la marca de lado izquierdo, boceto del logo final lado derecho

Construcción del logo

Colores y tipografía del logotipo

Arize Computers

Proyecto fin de grado

Bocetos y propuestas La primera fase es crear un par de pantallas tipo wireframes a forma de boceto, esto nos ayuda a visualizar como se vería la plataforma en un nivel mas simple, sirviendo de guía para los componentes generales, botones, forma e imágenes, un bosquejo rápido para aterrizar ideas de forma rápida y sencilla.

Mapa de flujo

Home

Quiz

Busqueda

Carrito

Perﬁl

Conﬁguración

Resultado Build

Sugerencias

Checkout

Notiﬁcaciones

Ayuda

Agregar al carrito

Dirección envío

Favoritos

Información

Método de pago

Información perﬁl

Idioma

Detalles del pedido

Compras

Seguridad e inicio sesión

Pedidos

Ajustes generales

Personalización

Logout

Personalizar

Arize Computers

Proyecto fin de grado

V1 Para la versión inicial se propuso la idea de contrastar los colores principales que son el azul cielo y el azul marino que fueron utilizados en la construcción del logo final, con variaciones para ciertos componentes, botones y CTA (call to action).

Para las secciones se pensó usar una pestaña en forma orgánica, dando una sensación de innovación y tecnología reflejando la manera en la que el usuario perciba la marca y la plataforma.

Para los componentes se pensó en utilizar formas que diferenciar cada uno de ellos, cada componente se pensó en módulos de formas redondeadas debido a la creciente tendencia de hacer diseños más orgánicos y minimalistas, se pensó en un menú posicionado en la parte inferior, para un alcance más fácil para el usuario y de mas rapidez cambiando entre diferentes secciones.

Arize Computers

Versión final Para la versión final se mejoro el diseño de la interfaz, balanceando los colores haciendo que se vea lo mas limpia posible, contrastando los colores principales con el blanco del resto de la aplicación, haciéndola más sutil. El menú principal que se encuentra en la parte inferior se complementa con cualquier otro botón, creando una especie de niveles, haciendo que cualquier acción secundaria o primaria sea más sencilla de activar.

Proyecto fin de grado

Home Esta sección puedes ver tus personalizaciones guardadas, ofertas actuales y sugerencias de equipos pre-hechos (fast builds),además de contar con un botón arriba del menú para hacer el quiz. Mediante el menu inferior puedes acceder al resto de secciones de la app.

La solapa principal se utiliza en cualquier submenú que necesite modificaciones, apareciendo desde el fondo inferior, dando una sensación de facilidad a la hora de modificar algún elemento, de manera que no necesitas que la aplicación se dirija a otro apartado, haciéndola mas ligera.

Al darle click en iniciar sesión, aparece un menu solapando la pantalla actual, de esta manera la app no te envía a alguna otra pantalla, pudiendo modificar e ingresar datos.

Arize Computers

Proyecto fin de grado

Busqueda

Checkout

Sección donde puedes buscar Fast builds, palabras clave,accesorios, periféricos y muchas cosas mas.

Modifica las opciones de pago, elige la dirección de envío y recibe los detalles del pedido

Carrito de compras

Perfil

En el carrito de compras puedes ver tus artículos agregados y pasar al checkout para pagar

Accede a las demás subsecciones relacionadas con el perfil o ajusta los datos de la cuenta.

Arize Computers

Proyecto fin de grado

Quiz

Resultados

El Quiz funciona para recabar datos del usuario, de esta forma la plataforma le sugiere el equipo que mejor se adapta al usuario.

Esta sección muestra el resultado del equipo recomendado del Quiz, donde puedes ver la información de las características del equipo, fotos y más, además de tener las opciones de agregar al carrito y personalizarlo.

Accesorios y periféricos Sección que da información de artículos y accesorios disponibles también para su compra.

Arize Computers

Personaliza tu build

Proyecto fin de grado

Mockups

En esta sección puedes cambiar el color de tu equipo, agregar stickers y cambiarle el vinil al gabinete, además de poder guardar esas configuraciones para poder elegirlas después en algún otro build.

Arize Computers

Proyecto fin de grado

Resultados

Conclusión

El resultado del proyecto fue crear la plataforma, desde sus orígenes, desarrollo de marca, hasta el prototipo funcional. Como resultado final, obtenemos una plataforma ligera y funcional que añade un plus y simplifica los problemas de poder comprar un equipo armado con las características que el usuario desee, esto añade flexibilidad a la hora de poder elegir la mejor computadora para el usuario final.

Este proyecto presento un reto para mí, es la culminación de todos los conocimientos de diseñador que tuve a lo largo de la carrera, nosotros como diseñadores tenemos que ser profesionales multidisciplinarios en varias áreas afines del diseño, desde pre presa, edición de video, retoque fotográfico, creación de desarrollo de marcas, publicidad, diseño web, animación entre otras. Eso hace que el diseño sea una carrera y un área donde podemos explotar y desarrollar al máximo nuestros conocimientos.

Los siguientes pasos serán el poder empezar a desarrollar y programar la plataforma para que este abierta al público, siendo una tarea compleja puesto que se requiere de un equipo multidisciplinario que desarrolle la aplicación, siendo responsiva para cualquier celular que se encuentre actualmente en el mercado, además de darle soporte continuo y mejoras de actualización, creación de bases de datos de usuarios y demás. Después de eso sería crear la estructura de negocio para poder comercializar y distribuir los equipos, accesorios y periféricos, una gran tarea a continuación.

Al ir desarrollando la plataforma me di cuenta de que es un área muy compleja, además de nunca haber diseñado en plataformas móviles, debes de estar consiente de cierto lineamientos y estándares para lograr una experiencia de gran calidad, y pensar y diseñar 100% en el usuario, empatizar con el y ofrecer soluciones que mejorar y faciliten los problemas que pueda encontrarse al utilizar este tipo de plataformas. El Diseño de interfaz/experiencia es una área relativamente nueva y creciente, pero que sin duda es una de las áreas que mas me ha interesado para desarrollarme como profesional, que es un área de muchísima importancia para cualquier producto digital actual, y que actualmente hay mucho campo laboral y muchos retos que podemos adentrarnos como diseñadores. 36