-
Notifications
You must be signed in to change notification settings - Fork 461
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: adds new UXD project UXploradoras (#1797)
* Create new UXD project * Create README.md * Add files via upload * Update README.md * Update README.md * Update README.md * Update project.yml * MD lint corrections * Heading estandarizado * Update README.md * adds resumen del proyecto --------- Co-authored-by: Ivy Feraco <ivy@laboratoria.la> Co-authored-by: Ivy Feraco <unjust@gmail.com>
- Loading branch information
1 parent
cc5a59b
commit 73f132d
Showing
3 changed files
with
347 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,325 @@ | ||
# UXploradoras | ||
|
||
## Índice | ||
|
||
- [1. Preámbulo](#1-preámbulo) | ||
- [2. Resumen del proyecto](#2-resumen-del-proyecto) | ||
- [3. Lo que aprenderás](#3-lo-que-aprenderas) | ||
- [4. Objetivos de aprendizaje](#4-objetivos-de-aprendizaje) | ||
- [5. Consideraciones](#5-consideraciones) | ||
- [6. Alcance](#6-alcance) | ||
- [7. Documentación para portafolio](#7-documentación-para-portafolio) | ||
- [8. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias) | ||
|
||
--- | ||
|
||
## 1. Preámbulo | ||
|
||
Aunque parezcan invisibles, los principios de diseño visual y diseño UX son los | ||
pilares técnicos que nos permiten generar productos de alto valor estético y | ||
funcional. En este proyecto nos enfocaremos tanto en la arquitectura de | ||
información como en la interface visual de una plataforma digital, para | ||
profundizar en los aspectos más técnicos que fundamentan nuestras propuestas. | ||
|
||
## 2. Resumen del proyecto | ||
|
||
**Tu misión será diseñar un dashboard desde cero, empezando con la jerarquía y | ||
arquitectura de la información (agrupación, etiquetas, navegación), el diseño de | ||
la propuesta de interface visual (layout, espaciado, colores, tipografía, etc.) | ||
y finalmente validación con usuarios.** | ||
|
||
En este proyecto quebraremos el proceso de diseño para iniciar desde la | ||
experimentación, incluyendo a las personas usuarias al final del proceso. | ||
Es una forma muy eficiente de realizar diseño centrado en las personas, | ||
pero la clave está en llegar lo más rápido posible a la fase de validación | ||
y la realices con rigurosidad. | ||
|
||
![UXploradoras](https://raw.githubusercontent.com/Laboratoria/bootcamp/main/projects/02-uxploradoras/thumb.png) | ||
|
||
## 3. Lo que aprenderás | ||
|
||
- Al ser un proyecto corto, es clave definir el alcance y el plan de trabajo a | ||
nivel general, con detalle de etapas, entregables, tiempos y actividades | ||
|
||
- Aprenderás a generar propuestas de diseño desde cero, cuando no existe un | ||
producto inicial al cual realizarle mejoras, así como a utilizar herramientas | ||
para pruebas de usabilidad no-moderadas | ||
|
||
- Profundizar en principios de diseño visual, accesibilidad, usabilidad, | ||
arquitectura de información y flujos de usuario | ||
|
||
- Diseñar el contenido y guías básicas de voz y tono que apliquen para contenido | ||
de UX | ||
|
||
- Documentar la librería de componentes y patrones reutilizables, usando los | ||
principios de Atomic Design | ||
|
||
### Life Skills | ||
|
||
Si bien las 8 habilidades siempre estarán presentes, échale un ojo👀 a estas: | ||
|
||
**1. Comunicación eficaz.** Articula y transmite preguntas, pensamientos e ideas | ||
con claridad y facilitando el diálogo (oral o escrito). Es elocuente y sabe | ||
dar y recibir feedback. | ||
|
||
**2. Iniciativa.** Monitorea, define, prioriza y completa tareas sin supervisión | ||
directa. Participa de manera activa preguntando y emitiendo opinión. Intenta ir | ||
más allá de los requisitos mínimos del trabajo. Es diligente, tomando activamente | ||
el control e intenta siempre solucionar los problemas que surgen. | ||
|
||
**3. Autoaprendizaje.** Es capaz de adquirir continuamente nuevos conocimientos | ||
y habilidades. Puede monitorear sus propias necesidades de aprendizaje y | ||
encontrar los medios para intentarlo y lograrlo autónomamente. Aprende de los | ||
propios errores. | ||
|
||
**4. Planificación, organización y manejo de tiempo.** Es capaz de estructurar | ||
una “ruta”, identificar dependencias y posibles impedimentos. Logra priorizar | ||
y organizar su trabajo de forma adaptativa en lugar de intentar “predecir”. | ||
|
||
## 4. Objetivos de aprendizaje | ||
|
||
> ℹ️ Esta sección será automáticamente generada en el idioma pertinente, a partir | ||
> de los objetivos de aprendizaje declarados en [`project.yml`](./project.yml), | ||
> al crear el repo del proyecto para un cohort en particular usando | ||
> [`./scripts/create-cohort-project.js`](../../scripts#create-cohort-project-coaches). | ||
> | ||
> Acá puedes ver una [lista de todos los objetivos de aprendizaje](../../learning-objectives/data.yml) | ||
> que contempla nuestra currícula. | ||
## 5. Consideraciones | ||
|
||
- No se permite realizar entrevistas ni encuestas, con el fin de que te atrevas | ||
a realizar el proceso de diseño de forma experimental. Las pruebas de | ||
usabilidad deben ser no-moderadas. | ||
|
||
- Trabajarás en duplas (2 estudiantes), te sugerimos elegir un nombre que las | ||
represente y facilite identificar tu equipo. No te preocupes, recibirás guía | ||
para formar tu equipo. | ||
|
||
- Cada equipo debe reclutar sus propios usuarios para las pruebas. Trata de | ||
que sean usuarios potenciales e idealmente testea con 5 personas, de lo | ||
contrario los resultados pueden estar sesgados o ser insuficientes. | ||
|
||
- Cada equipo debe presentar su propia solución, prototipos y tests. Sabemos | ||
que algunas soluciones serán similares dado que resuelven el mismo reto, | ||
pero nuestra forma de pensar y resolver es única, atrévete a explorar más | ||
allá de lo convencional. | ||
|
||
## 6. Alcance | ||
|
||
Para realizar el proyecto, tendrán que elegir una categoría de producto digital, | ||
ya que necesitarás plataformas de referencia. Aquí te damos algunas opciones | ||
pero podrás proponer otras dentro de las categorías definidas: | ||
|
||
- **Mercadeo:** Monitoreo de métricas relevantes para mercadeo. | ||
Algunos ejemplos: [Semrush](https://www.semrush.com/analytics/overview/?q=ebay.com&searchType=domain), | ||
[Unbounce](https://agencyanalytics.com/integrations/unbounce), | ||
[Mixpanel](https://mixpanel.com/blog/mixpanel-marketing-analytics/) | ||
|
||
- **Deportes y salud:** Aplicaciones enfocadas en indicadores de actividad | ||
física y salud. Ejemplos: [Samsung health](https://play.google.com/store/apps/details?id=com.sec.android.app.shealth&hl=en&gl=US&pli=1), | ||
[Flo health](https://app.flo.health/?utm_source=google&utm_medium=cpc&utm_campaign=&utm_content=02c&utm_term=2&gad_source=1&gclid=CjwKCAjwzN-vBhAkEiwAYiO7oB8LmUS-VkVbbVAZ0UR_-eHsLz1cxzhIp-untRWmJlfxTVSEg_qyUxoCnOEQAvD_BwE), | ||
[Nike Training Club](https://www.nike.com/ntc-app) | ||
|
||
- **Finanzas:** Finanzas personales o aplicaciones bancarias modernas. | ||
Ejemplo: [Splitwise](https://www.splitwise.com/), | ||
[iSaveMoney](https://isavemoney.app/), | ||
[Nequi](https://www.nequi.com.co/) | ||
|
||
El proyecto está dividido en hitos, los cuales son como marcas de kilómetros en | ||
las carreteras, donde tú decides qué tan lejos quieres llegar. La decisión es | ||
tuya y dependerá del tiempo que tengas disponible día a día, de tu ritmo de | ||
aprendizaje y de la profundidad que quieras alcanzar. | ||
|
||
**Realizar los hitos obligatorios es indispensable para considerar el proyecto | ||
como completado, los demás hitos son opcionales, ya que son para profundizar | ||
o explorar otras habilidades.** | ||
|
||
Durante los diferentes avances, o al cierre del proyecto, debes presentar | ||
documentación que demuestre lo que hiciste de forma tangible y cumpliendo | ||
con los criterios de aceptación, los cuales existen para que puedas | ||
auto-validar si realmente alcanzaste el resultado deseado. | ||
|
||
### Hito 1: Proyecto (obligatorio) | ||
|
||
Organizarnos cuando no existe una solicitud específica de parte del negocio | ||
puede ser muy retador, pero sigue siendo clave para sacar el máximo provecho | ||
de nuestro tiempo. | ||
|
||
**Criterios de aceptación:** | ||
|
||
1. Resumen del alcance general del proyecto, con detalle de posibles entregables | ||
y un plan de trabajo con listado de tareas por realizar. | ||
|
||
*No todo el tiempo es necesario invertir el mismo esfuerzo en cada etapa del | ||
proceso de diseño. Utiliza como guía los OAs que quieres potenciar durante | ||
el proyecto para definir el tiempo que vas a dedicar en cada etapa. | ||
Por ejemplo: quieres fortalecer tus habilidades de prototipado y diseño UI, | ||
planifica desde el principio un análisis breve y una fuerte profundización | ||
en exploración visual.* | ||
|
||
### Hito 2: Análisis de lo existente (obligatorio) | ||
|
||
¿Cómo entender a los usuarios de productos que aún no existen? Analizando | ||
productos de competidores u otras herramientas que usan para resolver sus | ||
necesidades. | ||
|
||
**Criterios de aceptación:** | ||
|
||
1. Análisis de dashboards de referencia, donde identifiques las funcionalidades | ||
clave de este tipo de producto digital | ||
|
||
2. Investigación de escritorio sobre dolores de usuario de la categoría que | ||
hayas elegido | ||
|
||
### Hito 3: Propuesta de diseño (obligatorio) | ||
|
||
Debes proponer una solución que se pueda diseñar en el tiempo del proyecto, | ||
asegurando que resuelva los problemas prioritarios. | ||
|
||
**Criterios de aceptación:** | ||
|
||
1. Múltiples ideas de solución y criterios para priorizarlas. Las ideas pueden | ||
ser frases o bocetos en papel y lápiz que representen la solución | ||
|
||
2. Diagramas de flujo de usuario y arquitectura de información (categorías, | ||
etiquetas, navegación) | ||
|
||
3. Detalle de cómo la propuesta respeto los principios de usabilidad | ||
|
||
4. Guía básica de voz y tono aplicado al producto digital | ||
|
||
5. Propuesta de textos (micro-copy), iconos e imágenes | ||
|
||
6. Prototipo básico* enfocado en la arquitectura de información | ||
|
||
*Un prototipo básico es aquel donde se puede navegar entre pantallas e incluye | ||
el contenido y funcionalidades más relevantes, sin incluir detalles visuales | ||
como color, tipografía, etc. | ||
|
||
### Hito 4: Prototipado (obligatorio) | ||
|
||
Una vez que tengas clara la estructura de tu propuesta, es momento de integrar | ||
los elementos visuales necesarios para potenciar una buena experiencia de uso. | ||
|
||
**Criterios de aceptación:** | ||
|
||
1. Moodboard con referencias visuales que funcione como inspiración para tu UI | ||
|
||
2. Guía visual con especificaciones de los elementos gráficos: paleta de colores, | ||
tipografías, layout y espaciado entre elementos (márgenes internos: padding / | ||
márgenes externos: margin) | ||
|
||
3. Prototipo navegable de alta fidelidad con interacciones básicas (cambio de | ||
pantalla, atrás, etc.). Debe incluir una versión para web y otra para mobile o | ||
tablet | ||
|
||
4. Explicación donde demuestres como aplicaste los principios básicos de | ||
accesibilidad en tu propuesta (perceptibilidad y operabilidad) | ||
|
||
5. Librería de componentes (UI Kit) construida bajo los principios de Atomic Design | ||
|
||
### Hito 5: Validación (obligatorio) | ||
|
||
Es vital que realicemos validaciones de nuestras propuestas, especialmente con | ||
productos construidos desde cero. Para ello es necesario que planifiques tus | ||
pruebas de usabilidad no-moderadas, de forma que obtengas información de | ||
usuario que respalde las decisiones de diseño que tomaste de forma experimental. | ||
|
||
**Criterios de aceptación:** | ||
|
||
1. Documento con el detalle del plan de investigación, que incluya los | ||
objetivos de investigación, perfil del usuario meta y tamaño de la muestra | ||
|
||
2. Guía de tareas que realizarán los usuarios en las pruebas de usabilidad y | ||
evidencia de que validaron estas guías con una persona externa al equipo | ||
(idealmente un usuario) | ||
|
||
3. Prueba de usabilidad no-moderada con al menos 5 personas (guerrilla o | ||
usuarios potenciales) | ||
|
||
4. Identificar tasas de error y otras métricas de diseño relevantes en las | ||
pruebas de usabilidad | ||
|
||
5. Síntesis de resultados, donde se muestren los patrones identificados, las | ||
observaciones y hallazgos (en caso de que existan) | ||
|
||
*En este proyecto, este será el momento en el que involucres a los usuarios de | ||
forma directa. Asegúrate de seguir las mejores prácticas para pruebas de | ||
usabilidad.* | ||
|
||
### Hito 6: Sistemas y librerías de diseño (opcional) | ||
|
||
Si quieres profundizar en la sistematización de componentes, explora Material | ||
Design y utilízalo en la construcción de tu propuesta. | ||
|
||
**Criterios de aceptación:** | ||
|
||
1. Modifica los estilos de Material Design según tu propuesta de diseño | ||
([theme builder](https://m3.material.io/theme-builder#/custom)) | ||
|
||
2. Descarga y utiliza la librería de [Material Design](https://m2.material.io/design/communication/data-visualization.html) | ||
para dashboards | ||
|
||
## 7. Documentación para portafolio | ||
|
||
Durante el bootcamp irás desarrollando proyectos para fortalecer o construir | ||
tu portafolio como diseñadora UX, por eso es importante que al cierre de | ||
cada uno te tomes el tiempo para documentarlo como caso de estudio desde | ||
la perspectiva técnica. Considera incluir la siguiente información: | ||
|
||
- Diferenciar claramente que fue un proyecto técnico, sin colaboración con | ||
la empresa | ||
|
||
- El concepto de diseño visual y los principios técnicos que fundamentan la | ||
propuesta de diseño | ||
|
||
- Bocetos, diagramas, wireframes, pantallas y demás elementos visuales que | ||
explican la propuesta | ||
|
||
- Resultados de la validación con personas usuarias y lo que consideras | ||
que aún debe iterarse | ||
|
||
- Tus aprendizajes personales, tanto técnicos como en habilidades para la vida | ||
|
||
**Esta documentación será indispensable para tu sesión de Project Feedback al | ||
cierre del proyecto. No te preocupes por hacerlo perfecto, seguirás iterándolo | ||
durante todo el Bootcamp. [Acá puedes encontrar una guía →](https://laboratoria1.gitbook.io/job-search-preparation-ux-es/ruta-a-busqueda-de-vacantes/practica-simulacion-tech-mentor-a-1)** | ||
|
||
## 8. Pistas, tips y lecturas complementarias | ||
|
||
Durante el desarrollo del proyecto, las coaches estaremos compartiendo | ||
información por Slack y en los espacios síncronos que sean necesarios. Además, | ||
siéntete libre de complementar con recursos que investigues por tu cuenta y | ||
compartirlo para todas 🤓 | ||
|
||
### Recursos y temas relacionados | ||
|
||
- Contenido sobre | ||
[arquitectura de información →](https://coda.io/d/Bootcamp-UX-Contenido_dqkqk2rV9Z2/Arquitectura-de-la-informacion_suNmQ#_luq24) | ||
- Contenido sobre | ||
[UI Kit](https://coda.io/d/Bootcamp-UX-Contenido_dqkqk2rV9Z2/UI-kit-y-sistema-de-diseno_suIXG#_luzb-) | ||
y [accesibilidad →](https://coda.io/d/Bootcamp-UX-Contenido_dqkqk2rV9Z2/Accesibilidad_suKsx#_luenB) | ||
- Contenido sobre | ||
[pruebas de usabilidad](https://coda.io/d/Bootcamp-UX-Contenido_dqkqk2rV9Z2/Testeos-con-usuarios_suLAI#_lu1kF) | ||
y [métricas de UX →](https://coda.io/d/Bootcamp-UX-Contenido_dqkqk2rV9Z2/Metricas-de-UX_suhXY#_lu8O8) | ||
- Contenido sobre | ||
[voz y tono aplicado a UX →](https://coda.io/d/Bootcamp-UX-Contenido_dqkqk2rV9Z2/Ux-Writing-Ux-Content_sucf6#_lunFr) | ||
|
||
### Preguntas detonadoras | ||
|
||
Luego de leer esta información, te dejamos acá algunas preguntas para | ||
reflexionar antes de iniciar el proyecto. En caso de que tengas dudas, | ||
por favor llévalas al espacio de Q&A que tendremos próximamente: | ||
|
||
- ¿Cuál es la principal diferencia respecto al proyecto anterior? | ||
- ¿Cuáles habilidades clave podrás practicar esta vez? | ||
- ¿Tienes claridad sobre los Objetivos de Aprendizaje del proyecto? | ||
- ¿Comprendes el contenido de cada hito? | ||
- ¿El proyecto te despierta curiosidad? ¿En qué? | ||
|
||
**Aprovecha la oportunidad de enfocarte en áreas que sientas aún retadoras, | ||
para potenciar al máximo tu experiencia de aprendizaje y fortalecer OAs que no | ||
hayas podido profundizar anteriormente. Cuentas con nuestra guía en todo este | ||
proceso, pero especialmente, con el talento y empatía de todas tus compañeras | ||
para enriquecer aún más esta comunidad de aprendizaje! 🙌💛** |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
track: ux | ||
learningObjectives: | ||
- agile-planning/scope | ||
- agile-planning/workplan | ||
- agile-planning/tasks | ||
- business-understanding/benchmark | ||
- design-concept/design-references | ||
- design-concept/ideate | ||
- design-concept/prioritize-ideas | ||
- interaction-design | ||
- interface-design | ||
- content-design | ||
- design-prototype/basic-prototypes | ||
- design-prototype/high-fidelity | ||
- design-prototype/ai-plugins | ||
- research-planning/research-plan | ||
- research-planning/research-sample | ||
- research-planning/participants | ||
- usability-analysis/non-moderated-testing | ||
- design-pitch | ||
- design-specs | ||
- design-systems |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.