Generamos ideas solución para prototipar formas de comercio electrónico

(1)

DIRECCIÓN DE EDUCACIÓN SECUNDARIA

Generamos ideas solución para prototipar formas de comercio electrónico

ACTIVIDAD 2

EXPERIENCIA DE APRENDIZAJE 7 EDUCACIÓN PARA EL TRABAJO

| 1.

^er

y 2.° grado

¡Nos informamos para idear!

La tercera fase del design thinking recibe el nombre de idear. Corresponde a un momento de generación de ideas que tratan de solucionar el problema planteado en la etapa de definición, a partir de los problemas y necesidades encontrados.

Tras estas primeras fases de análisis, comienza el proceso creativo en el design thinking. En la fase de idear se puede emplear la técnica del brainstorming, la cual es la más utilizada para generar gran cantidad de ideas en poco tiempo. Una de las claves para conseguir un buen brainstorming es no tener miedo de aportar ideas, pues el objetivo es conseguir muchas. No obstante, el problema definido debe estar siempre en mente y debemos intentar no salirnos del tema.

¡Hola! En la actividad anterior, definimos el problema a partir de la información obtenida en la fase empatizar.

Ahora, generaremos ideas creativas que brindarán alternativas de solución al problema o necesidad identificada. Pasaremos de la idea solución a desarrollar un prototipo, que luego tendremos que validar.

Llegó la hora de utilizar el drawstorming como variante del brainstorming. Dentro de esta técnica de creatividad, la lluvia de ideas se hace a través de dibujos, lo que facilita posteriormente el proceso de crear prototipos.

(2)

Generamos ideas solución para prototipar formas de comercio electrónico

1.^er y 2.° grado | Secundaria Educación para el Trabajo

¡Creamos!

Para utilizar la técnica del drawstorming debemos seguir las siguientes pautas:

• Iniciar recordando el problema identificado que queremos resolver.

• Debemos intentar dar la mayor cantidad de ideas. Aunque parezcan alocadas, todas son válidas.

• La técnica consiste en dibujar las ideas en tarjetas de papel y ponerlas en un lugar donde todos las puedan ver, como, por ejemplo, en una pizarra o pared.

• Luego escogeremos entre las que mayor probabilidad de éxito puedan tener.

Terminada la ejecución de la técnica, evaluamos las ideas elegidas usando el siguiente cuadro:

La idea ganadora será la que obtuvo el mayor puntaje.

¡Manos a la obra!

Es el momento de redactar nuestra idea solución ganadora.

N.^o Indicadores para identificar la idea

solución Idea 1 Idea 2 Idea 3

1 Es original. (0 – 5)

2 Brinda solución al problema encontrado.

(0 – 5)

3 Está fuera de lo común. (0 – 5) 4 Es económica. (0 – 5)

5 Es fácil de implementar. (0 – 5) Puntaje total

Registra en tu cuaderno de trabajo.

Idea ganadora

...

(3)

3 Nos informamos para prototipar

Ahora que ya tenemos un gran número de ideas que nos ayudarán a solucionar el problema inicial, es necesario materializarlas o volverlas tangibles. El prototipado nos ofrece una gran ventaja, crear una versión reducida del producto aplicando las ideas extraídas de las fases anteriores. Gracias al prototipado, evitamos realizar una gran inversión antes de saber si el producto o servicio soluciona el problema de nuestras usuarias o usuarios o clientes. Otra de las ventajas que nos ofrece el prototipado es la posibilidad de optimizar nuestro producto, y es ahí cuando entra en juego la fase de testeo.

Como ya sabemos, para prototipar no es necesario contar o tener muchos recursos.

Existen diferentes maneras de crear un prototipo de nuestro producto, para ello veremos algunas técnicas que nos permitirán realizar algo tan sencillo como hacer bocetos o dibujos.

Antes de hacer real nuestra idea, es importante dibujar considerando la técnica prototipo de app de papel. Esta técnica es muy sencilla y nos permitirá representar el prototipo a través de dibujos realizados a mano alzada, sobre todo si el diseño implica la creación de una aplicación o página web. Plasmar el diseño en papel nos permitirá saber si este es atractivo, intuitivo y, por supuesto, si sigue los criterios de usabilidad. Si se trata de una aplicación web, lo ideal es dibujar las pantallas con las que interactuarán las usuarias y los usuarios. También podemos elaborar nuestro prototipo utilizando herramientas digitales como aplicativos, redes sociales, etc., como, por ejemplo, Figma, WhatsApp, Facebook, entre otros.

Referencia: https://www.goconqr.com/p/6277863-competencias-mind_maps

Los prototipos nos permiten hacer realidad una idea, comprobar si es viable o no, convertir dicha idea en un producto o servicio, e investigar cómo las personas piensan y sienten acerca de ese producto o servicio.

(4)

¡Creamos!

Ha llegado el momento de elaborar nuestro prototipo. Para ello, preparamos el espacio y los materiales necesarios, es decir, lápiz, papel, celular, tableta o computadora.

Recuerda que el prototipo que vamos a representar tendrá ciertos elementos, como proceso de registro, buena apariencia y diseño, catálogo de productos. Nuestro prototipo debe orientarnos sobre lo que queremos representar y lo que deseamos promocionar y vender.

Ahora, elaboramos nuestro prototipo utilizando la técnica de prototipo de app de papel, dibujando con lápiz en una hoja o cuaderno las interfaces o pantallazos de un celular o tableta de la aplicación que queremos diseñar.

Para hacer más atractivo nuestro prototipo, podemos trabajar con redes sociales como WhatsApp o Facebook y con aplicativos como Figma, Mock Up, entre otros.

Figma es una herramienta de diseño digital y creación de prototipos con una interfaz colaborativa. En ella podemos crear, probar y compartir diseños mientras trabajamos en línea. Es una aplicación gratuita, muy amigable y fácil de trabajar.

Observemos el siguiente ejemplo de cinco diseños de interfaces (pantallazos) de una tienda virtual. Podemos prototipar de manera manual o digital, pero, primero debemos dibujar nuestro prototipo en un papel.

Leemos los recursos “Guía de orientaciones para registrarse al aplicativo Figma”

y “Pasos para diseñar prototipos de tiendas virtuales”, los cuales encontrarás en la sección “Recursos para mi aprendizaje”. Luego de seguir las indicaciones de los textos, estaremos listas y listos para iniciar nuestro trabajo.

De acuerdo con el desafío planteado, nuestro prototipo debe responder a la promoción y venta, a través del comercio electrónico, de productos con valor agregado utilizando los recursos de nuestra comunidad.

¡Manos a la obra!

(5)

5

Nos autoevaluamos para reconocer nuestros avances e identificar los aspectos que queremos mejorar.

Tomemos en cuenta que…

Evaluamos nuestros avances

Al finalizar nuestro prototipo, debemos enviar nuestra evidencia a nuestra o nuestro docente a través del WhatsApp, Telegram u otro medio de comunicación pactado.

Recuerda que un prototipo puede ser un futuro producto o servicio. Lo importante es hacer funcional nuestra idea.

Criterios de evaluación ^{Lo logré}

Estoy en proceso de

lograrlo

¿Qué puedo hacer para mejorar mis aprendizajes?

Creé una propuesta de valor a partir del desafío y de la información recogida para definir el problema de las usuarias y los usuarios en función al comercio electrónico.

Trabajé cooperativamente para plantear ideas solución y apliqué habilidades técnicas al elaborar el prototipo solución en relación con las formas del comercio electrónico.

Evalué el prototipo y lo mejoré a partir de la retroalimentación con las y los posibles usuarias y usuarios.

Competencia: Gestiona proyectos de emprendimiento económico o social.

(6)

El contenido del presente documento tiene fines exclusivamente pedagógicos y forma parte de la estrategia de educación a distancia gratuita que imparte el Ministerio de Educación.

¡Bien, hemos culminado la actividad!

En esta actividad, convertimos nuestras ideas en realidad, elaborando un prototipo de representaciones visuales. En la siguiente actividad, evaluaremos nuestro prototipo con ayuda de las usuarias y los usuarios.

Vamos a la siguiente actividad

(7)

DIRECCIÓN DE EDUCACIÓN SECUNDARIA

Guía de orientaciones para registrarse en el aplicativo Figma

Actividad 2 | Recurso 1 | 1.

^er

y 2.° grado | Educación para el Trabajo

¿Cómo crear una cuenta para utilizar el software Figma?

Figma es un editor de gráficos vectoriales y una herramienta de creación de prototipos que se basa principalmente en la web, el cual cuenta con una versión gratuita para registrarse con una cuenta de correo electrónico. Este programa permite que varias personas puedan colaborar dentro del mismo proyecto simultáneamente y en tiempo real, cuenta con un interfaz muy fácil de aprender y permite diseñar pantallas de sitios web y aplicaciones para celulares.

A continuación, se describen los pasos para registrarse creando una cuenta y así poder acceder a utilizar el software de manera gratuita.

Paso 1. Escribimos “Figma” en el buscador Google de nuestro ordenador; luego, presionamos la tecla “enter”.

Figma

(8)

Guía de orientaciones para registrarse en el aplicativo Figma

Paso 3. Ahora accederemos a la página web de Figma, pero el idioma estará en inglés, así que debemos dar clic derecho en el espacio blanco. Se activará una ventana con varias opciones;

elegimos la opción “traducir a español”, luego hacemos clic en la opción “inscribirse” que está en la parte superior derecha.

Paso 2. Elegimos la opción “www.figma.com” y hacemos clic en el título “Figma: the collaborative interface design tool”.

Espacio en blanco

(9)

3

Paso 4. Luego, se activará una ventana para inscribir nuestros datos. Ahí debemos escribir nuestra dirección de correo electrónico (cualquier correo electrónico personal que tengamos: Gmail, Hotmail, Yahoo, etc.) y debemos crear una contraseña para acceder al software (puede ser distinta a la contraseña del correo). Luego, hacemos clic en “create account” (significa crear una cuenta).

Paso 5. Escribimos nuestro nombre en la opción “your name” (1), luego hacemos clic en la segunda opción “What kind of work do you do?” (¿Qué tipo de trabajo hace usted?) (2) y elegimos la opción “other”. Finalmente, hacemos clic en la opción “create account” (3). Luego, aparecerá un comunicado indicando que nos enviaron un mensaje a nuestro correo electrónico para que verifiquemos nuestra cuenta.

(1) Your name

(2) Other

(10)

Paso 6. Revisamos nuestro correo electrónico (el que inscribimos al inicio). Abrimos el correo que nos enviaron para verificar nuestra dirección de correo electrónico. Hacemos clic en la opción

“Verify your email adress”, y listo.

Paso 7. Ya ingresamos al software en línea. Al entrar, aparecerá una ventana de bienvenida;

hacemos clic en “next” y clic derecho en el espacio en blanco. Ahí, se activará una ventana con varias opciones, elegimos la opción “traducir a español”.

Espacio en blanco Next

(11)

5

Paso 8. Hacemos clic en el signo + que está al lado derecho de la opción “primer proyecto” (1);

luego, hacemos clic en “lienzo blanco”, (2) y, finalmente, en “crea un archivo” (3).

¡Estamos listas y listos para empezar a diseñar de forma gratuita utilizando el software en línea!

1 2

3

(12)

Pasos para diseñar prototipos de tiendas virtuales

Prototipamos una tienda virtual utilizando un software gratuito

Ahora que ya tenemos una cuenta en la página web Figma, elaboraremos los prototipos de tiendas virtuales a través de este software, el cual nos permitirá visualizar nuestras ideas, porque podremos diseñar prototipos de aplicaciones o páginas web y simular su navegación.

Ten en cuenta nuestro reto, que responde a la siguiente pregunta: ¿Cómo podríamos conservar las frutas de estación para comercializarlas fuera del tiempo de producción? A continuación, se presentan los pasos para diseñar las primeras cuatro pantallas de una tienda virtual que sea compatible con celulares Android.

Primero, abrimos el software Figma y lo traducimos al español para una mayor comprensión. Para ello, hacemos clic derecho en el bloque de color negro horizontal y elegimos la opción “traducir al español”.

Paso 1. Generamos cuatro pantallas. Para ello, elegimos el modelo de nuestra preferencia (para este ejemplo utilizamos el modelo “Android”). Para ello, realizaremos las siguientes acciones:

• Hacemos clic en la herramienta “marco” (1) y luego nos aseguramos de estar en la opción

“design” (2). Ahí, elegimos y hacemos clic en la opción “Android” (3), y aparecerá la primera pantalla en el área de dibujo.

1 2

3

• Para obtener cuatro pantallas, realizamos esta operación cuatro veces y listo. Si deseas diseñar más pantallas, repite hasta tener el número de pantallas que necesites.

(13)

7

Paso 2. Diseñamos la primera pantalla. Para ello utilizamos la herramienta “texto” para escribir el nombre de la tienda (ejemplo “Allin Miski Mikuy”), los nombres de los productos, el sitio web, el precio, etc. Asimismo, utilizamos las herramientas de forma (línea, polígono u otros) para dibujar los íconos representativos para un celular. Finalmente, pegamos las imágenes de los productos (deslizar las imágenes, desde la carpeta donde están guardadas, al fondo gris). Dibujar el ícono de la lupa (buscar) es muy importante en este tipo de ventas en línea, porque nos permite buscar con facilidad los productos por su nombre.

Texto Forma

Frutimermeladas caseras

Néctar de

aguaymanto Frutas tropicales en almíbar Yogurt natural Autor: Erika Cabrera /

Vía: FMDOS

Autor: ToscaWhi / Vïa:

Shutterstock

Autor: Osmar Junior Costa / Vía: Dr. Saúde

Autor: Ale. Calcagno / Vía: Pinterest

(14)

Paso 4. Diseñamos la tercera pantalla. Esta pantalla aparece como resultado de haber dado clic en la opción “Descripción del producto” de la segunda pantalla; entonces, aquí se usa la herramienta

“texto” para colocar una breve descripción del producto; asimismo, se emplea la herramienta

“rectángulo” para dibujar dos cajitas rectangulares con las opciones “Comprar el producto” e “Ir al inicio”.

Paso 3. Diseñamos la segunda pantalla de la tienda. En este paso vamos a suponer que se hizo clic en el producto “Frutimermeladas caseras” de la primera pantalla; entonces, esa acción nos lleva a la segunda pantalla. Aquí se debe colocar la imagen del producto elegido, luego se desarrolla la sección “Descripción del producto”. También se emplea la herramienta “rectángulo” para dibujar tres cajitas rectangulares con las opciones “Descripción del producto”, “Comprar el producto” e “Ir al inicio”. Este proceso se deberá realizar para cada uno de los productos que deseemos vender. En esta ocasión, solo mostramos uno de ellos a modo de ejemplo de un producto.

Herramienta rectangular

Frutas tropicales en almíbar Yogurt natural

(15)

9

Texto

Paso 5. Diseñamos la cuarta pantalla, la cual aparece como resultado de haber dado clic en la opción “Comprar el producto” de la tercera pantalla. Aquí diseñamos los espacios usando la herramienta rectangular y luego bordes número 20 para que las y los clientes escriban sus datos:

nombres, apellidos, documento de identidad, correo electrónico, número de celular, etc.

Forma

rectangular Borde 20

(16)

Paso 6. Diseñamos las interacciones para la navegación. Aquí diseñamos la simulación del prototipo de la tienda virtual; es decir, diseñamos las conexiones entre una pantalla y otra. Para ello, consideramos lo siguiente:

• Debemos asegurarnos de estar en la opción Prototype.

• Hacemos clic en la imagen o texto que deseamos vincular con otra pantalla; luego, arrastramos el botón central del objeto que seleccionamos hacia la siguiente pantalla y repetimos este proceso en todas las pantallas diseñadas.

• Finalmente, hacemos clic en el ícono de “Presentación” (está en la parte superior derecha) para visualizar la simulación de la navegación.

Prototype

Frutimermeladas caseras

Néctar de

aguaymanto Frutas tropicales en almíbar Yogurt natural

(17)

11

• Paso 7. Luego de hacer clic en este ícono, podemos visualizar los diseños enmarcados con la apariencia de un celular real. Observa la presentación final de las cuatro primeras pantallas diseñadas.

Botón

Icono de presentación

(18)

El contenido del presente documento tiene fines exclusivamente pedagógicos y forma parte de la estrategia de educación a distancia gratuita que imparte el Ministerio de Educación.

¡Estamos listas y listos! Con el ejemplo, puedes diseñar tu prototipo de tu tienda virtual innovadora. En caso no cuentes con los recursos tecnológicos, puedes dibujarlo manualmente haciendo uso de herramientas de dibujo en la web.