Skip to content

Commit

Permalink
feat: adds new UXD project UXploradoras (#1797)
Browse files Browse the repository at this point in the history
* 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
3 people authored Apr 12, 2024
1 parent cc5a59b commit 73f132d
Show file tree
Hide file tree
Showing 3 changed files with 347 additions and 0 deletions.
325 changes: 325 additions & 0 deletions projects/02-uxploradoras/README.md
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! 🙌💛**
22 changes: 22 additions & 0 deletions projects/02-uxploradoras/project.yml
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
Binary file added projects/02-uxploradoras/thumb.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 73f132d

Please sign in to comment.