1

INSEMSA, INVERSIONES Y SERVICIOS

ELECTROMECANICOS S.A
Kevin Soto, Dereck Vargas Sibaja, Sergio López.

Ksoto20400@ufide.ac.cr
Dvargas70338@ufide.ac.cr
Slopez80408@ufide.ac.cr

I. PALABRAS CLAVES II. INTRODUCCIÓN

Diseño Web, Experiencia del Usuario, Electricidad,
Electromecánica, Insemsa, Design Thinking, Paneles
eléctricos, Automatización, Redes eléctricas, Ux, Ui,
E l uso de la tecnología en los últimos tiempos ha
Soluciones eléctricas, Sitio web moderno, Servicios evolucionado exponencialmente tanto que la venta de
empresariales, Herramienta efectiva, Catálogo de productos. productos en línea ha sido transformada de una manera
radical. Actualmente las empresas o emprendimientos que se
dedican a ofrecer y vender ciertos productos como: comida,
Abstract - The use of technology in recent times has evolved
tecnología, ropa, zapatos, entre otros, deben tener una
exponentially to the point where online product sales have
presencia en la web.
been radically transformed. Currently, companies or ventures
Según el informe de Digital Market Outlook 2020 de Statista,
that engage in offering and selling specific products such as
con la pandemia, Costa Rica alcanzó un crecimiento del 48%
food, technology, clothing, shoes, among others, must have an
de las ventas por Internet. Según fuentes oficiales, del 2017 al
online presence.
2020 las ventas en línea en Costa Rica aumentaron de ¢329
According to the Digital Market Outlook 2020 report by
Statista, Costa Rica experienced a 48% growth in Internet millones a ¢19.603 millones. (Summa, 2021) [1].
sales during the pandemic. According to official sources, from Insemsa se especializa en proporcionar una amplia gama de
2017 to 2020, online sales in Costa Rica increased from ¢329 productos y servicios relacionados con la electromecánica y la
million to ¢19.603 million (Summa, 2021) [1]. reparación de paneles eléctricos, dirigidos tanto a otras
Insemsa specializes in providing a wide range of products and empresas como a cualquier entidad que requiera de sus
services related to electromechanics and the repair of electrical servicios. En este proyecto, emplearemos la metodología del
panels, targeting both other companies and any entity Design Thinking para concebir y desarrollar un sitio web que
requiring their services. In this project, we will employ the sea no solo funcional, sino también atractivo y moderno, que
Design Thinking methodology to conceive and develop a satisfaga los requisitos y necesidades tanto de la empresa
website that is not only functional but also attractive and como de sus clientes.
modern, meeting the requirements and needs of both the Un objetivo fundamental de este proyecto es ofrecer una
company and its clients. experiencia de usuario optimizada que facilite los procesos
A fundamental objective of this project is to offer an internos relacionados con la electricidad y la electromecánica.
optimized user experience that facilitates internal processes Para lograrlo, será necesario recopilar información de diversas
related to electricity and electromechanics. To achieve this, it fuentes y utilizar una variedad de instrumentos de
will be necessary to gather information from various sources investigación. Esto nos permitirá garantizar que el sitio web
and use a variety of research instruments. This will ensure that resultante cumpla con las expectativas y necesidades tanto de
the resulting website meets the expectations and needs of both los clientes como de los empleados de Insemsa.
Insemsa's clients and employees. En resumen, este plan de investigación desempeñará un
In summary, this research plan will play a crucial role in the papel crucial en el proceso de desarrollo del sitio web de
development process of Insemsa's website, ensuring that the Insemsa, asegurando que el producto final sea una herramienta
final product is an effective tool that boosts the company's efectiva que impulse la presencia en línea de la empresa y
online presence and enhances the experience of its users. mejore la experiencia de sus usuarios.

Keywords III. JUSTIFICACIÓN

La justificación para este estudio radica en la necesidad de
Web design, User Experience, Electricity, Electromechanics, Insemsa de evolucionar digitalmente para seguir siendo
Insemsa, Design Thinking, Electric Panels, Automatization, competitiva y ofrecer servicios de calidad a sus clientes. Un
Electric networks, Ux, Ui, Electric solutions, Modern website, sitio web bien diseñado actúa como una ventana digital que
Business services, Effective tool, Product catalogue puede mejorar la eficiencia operativa y la satisfacción del
cliente.
 2

IV. ANTECEDENTES DEL PROBLEMA DE INVESTIGACIÓN sus empleados, se les consultará a través de las preguntas
Esta investigación hace un énfasis a que debido al planteadas en el guion sobre requerimientos y necesidades que
crecimiento de la tecnología y de la venta de servicios y tiene Insemsa como empresa y sobre su proceso de
digitalización.
productos en línea es crucial tener presencia en la web y es por
Si desea observar o consultar el guion de entrevista puede
eso que no tener una presencia en la web lleva a Insemsa a
acceder al mismo con el siguiente enlace: ENTREVISTA
perder ventas de los servicios electromecánicos y de
El segundo instrumento que se utilizará en esta
reparación de paneles eléctricos que ofrece, así como de la investigación será una encuesta realizada en manera de
venta de productos para estos campos. Este proyecto se apoya formulario y utilizando Microsoft Forms, el formulario va
en estudios anteriormente realizados acerca del diseño web dirigido específicamente a los clientes y esto para poder
centrado en el usuario y en los campos de la electricidad y conocer las necesidades que tiene los clientes de Insemsa y
electromecánica. que requerimientos desean ellos en el sitio web de la empresa.
Si desea observar o consultar la encuesta lo puede realizar
V. OBJETIVO GENERAL mediante el siguiente enlace: FORMULARIO
Diseñar una propuesta de sitio web para Insemsa que no
solo sea funcional, sino que también optimice los procesos VIII. PREGUNTAS DE INVESTIGACIÓN
internos relacionados con la electricidad y la electromecánica, Entendemos que Insemsa es una empresa dedicada
mejorando así la experiencia del usuario. totalmente a la venta de equipos electromecánicos y
reparación de paneles eléctricos con mucha experiencia y de
VI. OBJETIVOS ESPECÍFICOS alta calidad.
1. Analizar la situación y requerimientos del cliente a través Sin embargo, no cuentan aún con una página web para
aumentar su exposición y desarrollar sus múltiples servicios,
de una entrevista y encuesta.
lo cual nos llevó a formular varias preguntas. ¿Por qué una
2. Examinar las herramientas tecnológicas para la creación
empresa con tanto tiempo y experiencia en el mercado aún no
de una propuesta de sitio web para Insemsa.
ha comenzado su proceso de digitalización? ¿Cómo podemos
3. Desarrollar un prototipo de sitio web para Insemsa. ayudar a Insemsa a digitalizarse? ¿Cómo debe de lucir
gráficamente una página web para Insemsa? ¿Cómo podemos
VII. MARCO METODOLÓGICO convencer al usuario que mediante una página web puede
El marco metodológico busca explicar qué tipo de mejorar su exposición y ganancias?
investigación se está efectuando, cuáles serán las técnicas de
investigación, los instrumentos para recolectar la información IX. METODOLOGÍA
y como se analizarán los diferentes resultados obtenidos. Este Se comprende utilizar para este proyecto del curso de
proyecto también pretende exponer el diseño, la metodología Diseño de Interfaz Gráfica de Usuario la metodología definida
utilizada y la población o muestra que son más compatibles
como “Design Thinking” que consiste en la resolución de
con esta investigación.
diversos y múltiples problemas a través del diseño, haciendo
A. Tipo de Investigación un énfasis importante en el usuario.
La investigación es de índole cuantitativa, ya que, se Debido a su eficiencia Design Thinking se ha adoptado en
trabajará en el desarrollo de una página web para la empresa numerosos campos, ya no solo enfocados a diseñadores.
Insemsa. Mediante los instrumentos utilizados se realizará una Design Thinking cuenta con cinco fases o etapas
investigación de campo obteniendo de esa manera necesidades específicamente, buscando una mejor comprensión del tema a
de la empresa, opiniones de empleados y las necesidades de continuación se explicarán las fases de esta metodología:
los clientes.
B. Población o muestra 1. Empatizar
Esta etapa consiste en buscar las necesidades, maneras de
La población de este proyecto son los clientes que se ayudar y poner al usuario como la prioridad, se trata de
encuentren en un rango de edad de entre 18 y 52 años de la
escuchar abiertamente al cliente y entenderlo para poder
empresa, así como los trabajadores de Insemsa en los campos
ayudarlo con las necesidades que este mismo presenta.
de electricidad y electromecánica, y el dueño o jefe de la
empresa anteriormente mencionada. 2. Definir
C. Descripción de los instrumentos trabaja en conjunto con la etapa anterior sin embargo esta fase
se trata de delimitar y limpiar las ideas para así conocer cuál
Los instrumentos que se utilizarán para la recolección de
es el problema en concreto al que se le buscara una solución.
información son de gran importancia para esta investigación
ya que nos permite tener un mejor panorama para nosotros 3. Idear
como diseñadores a la hora de crear la página web. Durante esta fase, se fomenta la creatividad y se generan
El primer instrumento que se utilizará será una entrevista de una amplia variedad de soluciones posibles. Se alienta a los
forma estructurada a partir de la creación de un guion de equipos a pensar fuera de la caja y a considerar diferentes
entrevista, la cual consideramos es de vital importancia ya que enfoques para abordar el problema definido. En el diseño de
va dirigida tanto al jefe o dueño de Insemsa como también a
 3

interfaz de usuario, esto podría implicar la generación de La mayoría de los encuestados reside en Heredia, seguido
múltiples diseños conceptuales y la exploración de diversas de cerca por Alajuela y San José. Esto sugiere que el
formas de presentar la información y las funcionalidades. contenido del sitio web debe considerar las particularidades y
preferencias de esta región específica de Costa Rica.
4. Prototipar
Este es el periodo donde las mejores ideas que surgieron de
la etapa anterior se convierten en realidad. Buscando tener de
una manera rápida, ágil y barata una retroalimentación por
parte del usuario y de esta manera conseguir que no solo
pueda imaginarse las ideas sino también que estás sean
tangibles y probadas por el mismo usuario.
5. Testear
Esta última etapa de la metodología Design Thinking 3. Genero
pretende evaluar la funcionalidad de los prototipos con La muestra está equitativamente dividida entre géneros, lo
usuarios reales y así obtener que cosas pueden mejorarse que significa que el sitio web debe ser inclusivo y atractivo
según el usuario. Aquí se busca que el cliente formule tanto para hombres como para mujeres.
sugerencias, comentarios para así definir los fallos del
producto y de esta manera alcanzar una solución que agrade a
los clientes.

Una vez ya definida esta metodología y cada una de sus

fases queremos enfatizar en que este proyecto busca seguir,
aplicar y desarrollar su concepto y sus diferentes fases a lo
largo del mismo para una mejor comprensión del tema y del 4. ¿Cuál es tu ocupación actual?
usuario a la hora de la realización de este proyecto. La mayoría de los encuestados son estudiantes, lo que
indica que el contenido del sitio web puede ser diseñado para
X. INTERPRETACIÓN Y ANÁLISIS DE LOS RESULTADOS satisfacer sus necesidades y deseos específicos.
En esta sección del proyecto se va a realizar el análisis y el
resultado gracias a los instrumentos que se utilizaron para
recolectar la información que para esta investigación fue una
entrevista y una encuesta tanto a jefes, empleados y clientes de
Insemsa. Buscando una mejor compresión del tema y de la
investigación realizada se explicarán a continuación los
resultados mediante gráficos.
5. ¿Cuál es su preferencia en cuanto al diseño general de la
web?
La mayoría prefiere un diseño moderno y minimalista, lo
XI. RESULTADOS DE LA ENCUESTA
que sugiere que el sitio web debe tener un diseño limpio y
Esta sección del proyecto intenta explicar y mostrar los fácil de usar. Además, algunos usuarios están interesados en
resultados obtenidos de forma textual y gráfica de una un diseño colorido pero no excesivamente llamativo, lo que
encuesta que se realizó a través de un formulario a personas sugiere un interés en la estética visual.
colaboradoras y clientes de Insemsa con el fin de recolectar
información y poder utilizarla en la creación del prototipo de
la página web de la empresa ya antes mencionada.

1. ¿En qué rango de edad se encuentra?

La mayoría de los encuestados se encuentra en el rango de
edad de 18-24 años, lo que indica que el sitio web debe estar
orientado hacia una audiencia joven y probablemente 6. ¿Qué tipo de navegación prefiere en nuestro sitio web?
tecnológicamente competente. La mayoría prefiere un menú desplegable en la parte
superior de la página, indicando una preferencia por la
accesibilidad y la facilidad de navegación.

2. ¿En cuál provincia reside?

 4

7. ¿Qué elementos le gustaría encontrar en la página de

inicio? 12. ¿Tiene alguna función o característica específica en
Los usuarios están principalmente interesados en mente que le gustaría que se implemente en la web?
información sobre productos o servicios destacados. Esto La mayoría de los encuestados está interesada en una
sugiere que el sitio web debe presentar claramente los función de búsqueda avanzada, lo que confirma la importancia
productos o servicios que ofrece de manera atractiva y de esta característica para la audiencia.
detallada.

13. ¿Le gustaría que los botones y elementos interactivos en

8. ¿Qué elementos le gustaría encontrar en la página de la web tengan efectos visuales al pasar el mouse sobre
inicio? ellos?
Existe una variedad de preferencias en cuanto al tamaño de La mayoría está de acuerdo en tener efectos visuales al
las imágenes, lo que indica que el sitio web puede considerar pasar el mouse sobre los botones y elementos interactivos, lo
una mezcla de tamaños para satisfacer diferentes preferencias que sugiere una preferencia por una experiencia interactiva y
de los usuarios. dinámica en el sitio web.

9. ¿Le gustaría que la web tenga una sección de búsqueda

avanzada?
14. ¿Tiene alguna preferencia en cuanto a la posición de la
La mayoría de los encuestados considera importante tener
barra de navegación (menú) en la web?
una función de búsqueda avanzada, indicando un deseo de
La mayoría prefiere la barra de navegación en la parte
encontrar información específica de manera rápida y eficiente.
superior de la página, indicando una preferencia por un diseño
estándar y fácilmente reconocible.

10. ¿Qué tipo de contenido le gustaría encontrar en la

página "Acerca de Nosotros"?
Los usuarios están interesados principalmente en el perfil del
equipo, lo que sugiere que quieren conocer las personas detrás 15. ¿Cuál es su preferencia en cuanto a la velocidad de carga
del sitio web y posiblemente establecer una conexión más de la web?
personal con la marca. La mayoría prefiere una carga rápida, incluso con imágenes de
calidad ligeramente reducida, lo que subraya la importancia de
la velocidad de carga para la experiencia del usuario.

11. ¿Cuál es su preferencia en cuanto a la organización de la

información en la web?
La preferencia está dividida entre un diseño de una sola
página (scrolling) y varias páginas con menú de navegación. XII. DIAGRAMA DE AFINIDAD
Esto indica que el sitio web podría considerar una estructura El mapa de afinidad es un método que favorece a la
híbrida para satisfacer diferentes preferencias de los usuarios. comprensión de este proyecto y que se caracteriza por
convertir en información a través de una estructura gráfica las
opiniones y las ideas relacionadas a un tema. Por eso a
continuación se les presentara el mapa de afinidad que
corresponde para este proyecto:
 5

XIII. INSIGHTS
A continuación, podrá detallar 3 insights que consisten en
los hallazgos más importantes encontrados gracias a nuestro
segundo método de recolección que en este caso fue una
entrevista a la persona dueña de la empresa Insemsa:

1. Presencia en línea y accesibilidad: Insemsa desea

aumentar su visibilidad en línea para llegar a un público
más amplio. La facilidad de localización en la web y la
presentación clara de los productos y servicios que
ofrecen son esenciales para la empresa.

2. Enfoque en la industria: Insemsa se centra en

proporcionar soluciones para las industrias por ejemplo
cementeras, elaboración de productos para el consumo
humano e industrias médicas. Quieren que su identidad de
marca y el diseño del sitio web reflejen este enfoque.

3. Integración y funcionalidad: Aunque Insemsa no se

centra en las redes sociales, reconocen la importancia de
tener un sitio web integrado con sus sistemas internos,
como la gestión de inventario. Además, buscan que su
sitio web sea fácil de usar y que los visitantes puedan
encontrar rápidamente lo que buscan, ya sea información
sobre productos, servicios o formas de contacto. La
integración con perfiles en redes sociales puede ser una
consideración futura para aumentar su alcance y
visibilidad.

XIV. ARQUETIPOS
Los arquetipos nos permiten crear una representación de
usuarios con ciertas características como sus frustraciones,
necesidades, habilidades y ocupaciones. Lo cual ayuda de gran
manera para orientar a los diseñadores y poder comprender a
quien se le está diseñando. A continuación, se hará la
presentación de los arquetipos creados para este proyecto:
 6

XV. STORYBOARD
En esta sección del proyecto se encuentra el storyboard que
lo que busca es crear una historia que cuente de alguna manera
como la herramienta que se requiere proponer para este
proyecto sea utilizada y todo esto por medio de ilustraciones.
A continuación, podrá visualizar el storyboard realizado:
 7

XVI. MAPA DE SITIO

El mapa de sitio se puede definir como un esquema gráfico
que permite tener toda la perspectiva de la arquitectura de un
sitio o página web, su estructura y su organización. Para
obtener como resultado el mapa de sitio para este proyecto se
hará la utilización de la técnica de card sorting, esta técnica
consiste en categorizar los contenidos y analizar como los
usuarios clasifican dicha información. Para este proyecto se
hará un card sorting de manera cerrada es decir que se
definirán las categorías antes y estas serán expuestas al usuario
y así se busca aprender como el usuario clasifica los diferentes
componentes.

A continuación, se hará la presentación del card sorting, con

sus respectivas tarjetas y categorías ya definidas:

Una vez ya aplicada la técnica del card sorting dos veces a

los clientes se obtuvieron los resultados los cuales se
mostrarán a continuación con la siguiente matriz:

Y gracias a la técnica mencionada anteriormente se

presentará el mapa de sitio para este proyecto:
 8

XVII. WIFRAMES
A continuación, les proporcionaremos los wiframes de la
propuesta de página web diseñada para la empresa de Insemsa,
estos nos ayudan para tener una idea clara de todo el sitio web.
Un wiframe es un esquema básico que representa la estructura
y disposición de elementos en una interfaz gráfica o página
web.

En este proyecto se buscó que los wiframes que se hicieran

sean sobre secciones consideradas importantes como noticias
y algunos servicios como cotización o productos
electromecánicos.
9
 10

XVIII. PROTOTIPADO
El prototipado es una fase experimental del Design Thinking y su
objetivo es identificar la mejor solución posible para cada uno de
los problemas identificados en las primeras tres etapas de la
metodología. Y para lograrlo debe hacerse rápido, utilizando pocos
recursos y tiempo. (Contreras, 2022) [2].
Como se pudo comprobar la fase o etapa del prototipado es una
parte muy importante para este trabajo, por lo que a continuación se
hará la presentación del prototipo de este proyecto:
 11

Esta sección busca darle una opción de inicio de sesión a los

usuarios de la futura página web para una mejor experiencia y con
diferentes maneras rápidas para iniciar esto gracias a diferentes
redes sociales con las que se puede iniciar o crear una sesión.

Lo que se procura en esta sección de la propuesta de sitio web

es darle a conocer al usuario quienes lideran la empresa con
alguna descripción de estas mismas personas con una sección
donde se puede observar algunos trabajos realizados por
Insemsa y una pequeña sección de preguntas frecuentes.

Esta sección nos da una vista totalmente moderna y lo que

busca es accionar con un “clic” el botón acceder para que se
nos traslade a la siguiente sección, que se va a mostrar a
continuación:

Esta sección lo que pretende es darle al usuario una opción

para navegar más fácil en la futura página web,
específicamente dando “clic” en el botón de cotizar para que
se traslade a la sección donde el usuario podrá consultar y
realizar dicho servicio.

En esta siguiente imagen del prototipo de nuestro proyecto XIX. MOODBOARD

podemos ver el resultado de la sección explicada Un Moodboard es una herramienta que se utiliza para definir
anteriormente con un pequeño mensaje de bienvenida y una ciertas utilidades o ideas que se usaran en un proyecto. Lo que
pequeña galería sobre los valores y calidad de Insemsa. A se pretende para esta sección es exponer la paleta de colores,
continuación, se hará la presentación de otra sección de los tipos de tipografías y tamaños de letra que se utilizaron
nuestra propuesta de sitio web: para este proyecto.
 12

A. A) Paleta de colores
3. Finalmente, se demuestra que se logró crear correctamente
una propuesta de sitio web para Insemsa cumpliendo con los
objetivos formulados en este proyecto.

REFERENCIAS

Como se puede visualizar en la imagen anterior se utilizaron [1] Summa, R. (2021, junio 28). Costa Rica alcanza un
los colores: blanco, celeste en diferentes tonalidades y el azul. crecimiento de 48% en las ventas por Internet. Revista
Para darle un aspecto novedoso, moderno y muy profesional a Summa. https://revistasumma.com/costa-rica-alcanza-un-
diferentes partes del prototipo de sitio web para Insemsa como crecimiento-de-48-en-las-ventas-por-internet/
botones, bordes y textos.
[2] P. Contreras, “Design Thinking, la fase de
prototipar”, Laboratorio de Contenidos de Marca, 16-nov-
B. B) Tipografías y Tamaño de Letra 2022. [En línea]. https://laboratoriodecontenidos.cl/design-
thinking-la-fase-de-prototipar/.

Según se observa en la imagen anterior las tipografías

utilizadas para este proyecto fueron las Gilroy Regular y
Gilroy Bold esto para dar un estilo más profesional a varias
secciones del prototipo y los tamaños utilizados van desde 36
hasta 10, que según sus tamaños de texto fueron usados en el
prototipo para escribir los títulos, textos de información y
nombres de personas o productos.

XX. RECOMENDACIONES
1. Realizar una investigación más profunda y con más
instrumentos para comprender las necesidades y requisitos
tanto de los clientes como de los empleados de Insemsa.

2. En la medida de lo posible utilizar un formato vertical en las

imágenes para que se muestren mejor en el documento IEEE.

3. Utilizar una muestra mayor en el cardsorting para evitar la

gran cantidad de empates en distintas categorías.

XXI. CONCLUSIONES
Este proyecto ha sido parte de un gran ciclo de aprendizaje,
para las personas encargadas de realizarlo. Cabe mencionar
que los resultados obtenidos son muy positivos y el
conocimiento que deja a las personas encargadas de
desarrollarlo es bastante amplio.

1. Se ha logrado utilizar diferentes técnicas y herramientas

como el cardsorting, para analizar de una mejor forma los
requerimientos y necesidades de los empleados y clientes de
Insemsa.

2. Se logró desarrollar las habilidades y capacidades para la

utilización de herramientas tecnológicas como Penpot que
ayudaron a la creación de la propuesta del sitio web para
Insemsa.