Catálogo Agosto Farma 365

UNIVERSIDAD LAICA “ELOY ALFARO” DE MANABÍ.

Facultad Ciencias Informáticas.

Nombres y Apellidos:
Andrés Alejandro

Moncayo Zambrano

Tema:
ELABORAR UN PROTOTIPO DE INTERFAZ DE USUARIO PARA LA FARMACIA

“FARMA 365”

Curso:
Cuarto Nivel “B”

Asignatura:
Interfaces Humano del Computador (HCI)

Docente:
Ing. Elsa Vera Burgos.

Índice.
1. Introducción. ...........................................................................................................3
2. Objetivos. ...................................................................................................................3

2.1 Objetivo General. ..................................................................................................3
2.2 Objetivos Específicos............................................................................................3
3. Desarrollo...................................................................................................................4
3.1 Descripción del Prototipo. ....................................................................................4
3.2 Pasos en la elaboración del prototipo...................................................................4
3.3 SortCard................................................................................................................8
3.4 SideMap................................................................................................................8
3.5 WireFlow. .............................................................................................................9
3.6 WireFrame............................................................................................................9
4. Prueba del prototipo. ............................................................................................... 10
5. Prototipo Adobe XD. ................................................................................................ 10
6. Conclusiones. .......................................................................................................... 10
7. Bibliografía. .............................................................................................................. 10

2

1. Introducción.

Este documento describe el trabajo de un prototipo de diseño centrado en el usuario,
la cual consiste en una pagina web para la Farmacia FARMA365, situado en la ciudadela La
Pradera. La cual se describen las características y apartados que tendrá dicha web, tomando
en cuenta los conocimientos adquiridos en la asignatura.

Se centró sobre todo en el diseño de interfaces con el fin de ser adaptativas y
dinámicas para el usuario, tomando los requisitos funcionales del sistema y a las necesidades
del cliente de automatizar sus servicios farmacéuticos.

2. Objetivos.

2.1 Objetivo General.

Diseñar un prototipo de una pagina web para la automatización de los servicios que
brinda la farmacia FARMA 365, basado al Diseño Centrado en el Usuario.

2.2 Objetivos Específicos.

• Analizar los requisitos necesarios para su implementación dentro del prototipo
• Especificar las funcionalidades del sistema para su correcta fluidez e interacción con

el usuario.
• Brindar una interfaz dinámica para evitar confusiones al usuario.

3

3. Desarrollo.

3.1 Descripción del Prototipo.

La pagina para la farmacia FARMA 365 tiene como finalidad vender productos
farmacéuticos a todos sus clientes permitiéndoles conocer las ofertas más recientes y los
productos nuevos que obtenga la farmacia, además de distintas promociones que tenga el
negocio.

Esta página hará uso de su propio carrito de compras llamado “Bolsa”, con la
finalidad de que cualquier usuario pueda agregar lo que desee comprar y pedirlo para que
sea llevado hasta su domicilio, pero para pedirlo debe estar logueado. El sistema también
contará con un asesor virtual la cual estará disponible en cualquier parte donde se desplace
el usuario, este asesor permitirá que un doctor especializado le conteste para las dudas que
tenga y si es problemas de sus servicios lo contestará el administrador de la página en casos
como lo es: retraso de entrega, no visualización de facturas no agrega productos al carrito,
entre otros.

También permitirá que los clientes que realizaron su compra en el mismo local
puedan ver sus facturas de forma electrónica con la opción de ser descargadas e impresas.
Para que los usuarios puedan entrar a ver su factura deberá loguearse con su C.I Número de
Cédula en la página https://www.farma365.ec/facturacion-electronica/ mismo que será
impresa en cada factura.

3.2 Pasos en la elaboración del prototipo.

A continuación, se mostrarán los pasos que tendrá el prototipado FARMA365,
tomando en cuenta que cualquier usuario tendrá acceso a la visualización de los productos
de la página.

3.2.1 Usuarios: El sistema contará con dos tipos de usuarios, que son:
• Usuarios Invitado: Este usuario tiene acceso a la visualización de todos los
productos y a agregar productos a la bolsa, pero no podrá hacer el pedir ni
pedir asesoría en el chat virtual del sistema.
• Usuario logueado: Este tipo de usuario tendrá acceso a todos los apartados
del sistema, podrá agregar direcciones para realizar pedidos, asesoría virtual y
si agrega productos a la bolsa no se eliminarán al cerrar la página.

4

3.2.2 Login: Cuando el usuario desee confirmar su pedido en la bolsa deberá
obligatoriamente loguearse si no lo está. Lo cual pedirá:
• Iniciar Sesión: En este apartado le pedirá al usuario que ingrese su correo y
su contraseña, así mismo lo podrá hacer si está registrado con Facebook o con
su cuenta de Gmail de Google.
• Registrarse: Si el usuario no tiene una cuenta, deberá llenar los siguientes
datos para registrarse:
o Nombre.
o Apellidos.
o Correo Electrónico.
o Teléfono.
o Fecha de Nacimiento.
o Contraseña.
o Confirmar Contraseña.

También se podrá registrar por Facebook o Google de ser el caso.

PARTE SUPERIOR

3.2.3 Menú de Productos: Esta opción contendrá todos los productos que tenga la
farmacia a su disponibilidad, categorizados de la siguiente manera:
• Ofertas: Ofertas que tenga la farmacia disponible.
• Medicamentos: Contendrá todos los medicamentos existentes.
• Dermacosmética: Contendrá productos del cuidado de la piel.
• Nutrición y Vitaminas: Contendrá toda clase de vitaminas y suplementos
nutricionales.
• Infantil y Maternidad: Contendrá productos para mujeres en lactancia y
embarazo, además de productos para el cuidado de bebes.
• Bienestar Sexual: Contendrá productos para la prevención y cuidado de
transmisión sexual.
• Adulto Mayor: Apartado solo para adultos mayores donde estará disponible
suplementos vitamínicos para adultos mayores y cuidado de su piel, visión,
entre otros
• Nutrición Deportiva: Suplementos ricos en proteínas y aminoácidos para
deportistas e atletas.
• Cuidado Personal: Productos para el uso personal.

5

Al entrar a cada una de las categorías existentes, aparecerán diversas subcategorías
que lo conformen. Además, de estar organizado por tema también estará organizado
por facetas en el caso del precio y nombre del producto, ya sea este de mayor a
menos, de la A-Z o viceversa.

3.2.4 Cuenta: En este apartado el usuario podrá acceder a la configuración de su cuenta,
para permitirle agregar, modificar, administrar o eliminar su información.
• Información: El usuario podrá modificar su correo, teléfono o restablecer
su contraseña.
• Direcciones: El usuario podrá agregar, modificar y eliminar sus direcciones
donde quiere recibir su pedido.
• Historial: En este apartado aparecerán todas las facturas y pedidos que
realice el usuario, redirigiéndolo hacia el apartado Consulta de
Comprobantes.
• Métodos de Pago: Aquí el usuario podrá agregar su tarjeta de crédito o
débito o enlazar su cuenta de PayPal para un nuevo pedido.
• Mis alertas: En este apartado contendrá todas las notificaciones del usuario,
y podrá eliminarlas o marcarlas como no leídas.

3.2.5 Bolsa de Productos: Esta bolsa de productos recogerá todos los productos que
desee comprar el cliente, cuando el cliente los desee pedir. La bolsa obtendrá los
datos del usuario para agregarlos a una nueva factura y realizar la transacción de
compra.

3.2.6 Buscador: Este botón le servirá al usuario para dirigirse rápidamente al producto
en especifico que desee agregar a la bolsa. Lo podrá buscar por el nombre del
producto, nombre de la marca o por subcategoría como, por ejemplo, “producto para
la piel”

3.2.7 Catálogo: En este apartado contendrá el catálogo de productos del mes, con el fin de
que el usuario visualice las ofertas durante el mes y los precios de nuevos productos
agregados.

3.2.8 Contáctanos: En este apartado se colocarán las referencias del negocio como:
• Direcciones: El negocio cuenta con dos tiendas (matriz y sucursal), la cual
se colocará con una organización por ubicación para que el usuario divise la
calle y avenida especifica de su negocio.
• Contacto: Se agregarán los contactos para el servicio al cliente los cuales
son el número de teléfono fijo y el correo electrónico del negocio.

6

3.2.9 Factura Electrónica: Como se mencionó anteriormente el sistema permitirá
visualizar las facturas de su cliente, ingresando a este apartado lo destinará a una
nueva ventana donde deberá agregar su número de identificación C.I. como
IDENTIFICACION y CONTRASEÑA y al ingresar encontrará la factura más reciente.
• En el caso de ser usuario registrado el sistema lo redirigirá directamente a la
ventana Consulta de Comprobantes, donde encontrará todas sus facturas y
pedidos realizados en la misma página.

Para los usuarios no registrados solo podrán visualizar facturas de hace 10 días
después de haber hecho la compra.

3.2.10 Notificaciones: Este botón solo estará disponible para los usuarios logueados, la
cual recibirán notificaciones cada vez que haya una nueva oferta o tenga un cupón de
descuento por reclamar.

3.2.11 Quienes somos: En este apartado estará la descripción de la empresa junto a su
misión y visión.
PARTE INFERIOR:

3.2.12 Asesor Virtual: En este botón el usuario logueado podrá solicitar asesoría medica
profesional o reportar inconvenientes en el uso de la página. Permitiendo que el
administrador les responda lo más rápido posible. Los que deberá ingresar el usuario
es:
• Nombre.
• Correo Electrónico.
• Mensaje o Inconveniente.

3.2.13 Esquema final de la página: En este esquema estará simplificado la mayoría de
los apartados de la página como lo es:
• Quienes Somos.
• Catálogo.
• Factura Electrónica.
• Horarios de Atención.
• Contactos

Así mismo, también contara con un espacio para que los usuarios coloquen las
sugerencias o reclamos de la página.

7

3.3 SortCard.
3.4 SideMap.

8

3.5 WireFlow.
3.6 WireFrame.

9

4. Prueba del prototipo.

Enlace del video de la prueba del prototipo:

https://youtu.be/AHkno9xJ-FM

5. Prototipo Adobe XD.

Enlace directo a la visualización del prototipo en Adobe XD:

https://xd.adobe.com/view/3dbd4093-d4da-4670-8bef-796b93ee21ee-68ee/

6. Conclusiones.

Como conclusión, pienso que la creación de este prototipo de “juguete” me ayudo
para adquirir mas conocimientos sobre el diseño de aplicaciones y lo complejo que es montar
un software, que no solo se trata de implementar lo que el propietario o administrador
quiere, sino de como el usuario lo usará dándole facilidades al localizarlo o al tamaño de cada
botón.

El cardsortin fue de mucha ayuda al iniciar el prototipo porque me ayudo a ubicar los
diferentes apartados que tendría la aplicación, y el SiteMap de cómo iba a ir enlazado cada
apartado para su correcto funcionamiento. Esto me servirá como base para seguir diseñando
nuevas interfaces más creativas e interactivas para el publico y de la misma manera
implementarle animaciones con la herramienta Adobe Animate.

7. Bibliografía.

Adobe Creative Cloud. (s.f.). (Adobe Systems Incorporated) Obtenido de
https://www.adobe.com/la/products/photoshop.html

Adobe, C. (s.f.). Adobe XD. Obtenido de https://www.adobe.com/la/products/xd.html

flaticon. (s.f.). (Freepik Company) Obtenido de https://www.flaticon.es/resultados?search-
type=icons&word=botones+web&license=&color=&stroke=&current_section=&auth
or_id=&pack_id=&family_id=&style_id=&category_id=

Grupo , S. (2010). FarmaciasSANASANA. (Corporacion GPF) Obtenido de
https://www.sanasana.com.ec/

10

Help, A. (s.f.). Prototipos en XD. (Adobe XD) Obtenido de
https://helpx.adobe.com/es/xd/help/work-with-prototypes.html

Vera Burgos, E. (2020). ELABORACIÓN DE DISEÑO PROTOTIPOS DE INTERFAZ DE
USUARIO UTILIZANDO LA HERRAMIENTA ADOBE XD. Manta.

Vera Burgos, E. (s.f.). ELABORAR UN PROTOTIPO DE INTERFAZ DE USUARIO DEL.

11