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
Abstract - The use of technology in recent times has evolved
exponentially to the point where online product sales have
been radically transformed. Currently, companies or ventures
that engage in offering and selling specific products such as
food, technology, clothing, shoes, among others, must have an
online presence.
According to the Digital Market Outlook 2020 report by
Statista, Costa Rica experienced a 48% growth in Internet
sales during the pandemic. According to official sources, from
2017 to 2020, online sales in Costa Rica increased from ¢329
million to ¢19.603 million (Summa, 2021) [1].
Insemsa specializes in providing a wide range of products and
services related to electromechanics and the repair of electrical
panels, targeting both other companies and any entity
requiring their services. In this project, we will employ the
Design Thinking methodology to conceive and develop a
website that is not only functional but also attractive and
modern, meeting the requirements and needs of both the
company and its clients.
A fundamental objective of this project is to offer an
optimized user experience that facilitates internal processes
related to electricity and electromechanics. To achieve this, it
will be necessary to gather information from various sources
and use a variety of research instruments. This will ensure that
the resulting website meets the expectations and needs of both
Insemsa's clients and employees.
In summary, this research plan will play a crucial role in the
development process of Insemsa's website, ensuring that the
final product is an effective tool that boosts the company's
online presence and enhances the experience of its users.
Keywords
Web design, User Experience, Electricity, Electromechanics,
Insemsa, Design Thinking, Electric Panels, Automatization,
Electric networks, Ux, Ui, Electric solutions, Modern website,
Business services, Effective tool, Product catalogue
I. INTRODUCCIÓN
E l uso de la tecnología en los últimos tiempos ha
evolucionado exponencialmente tanto que la venta de
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,
tecnología, ropa, zapatos, entre otros, deben tener una
presencia en la web.
Según el informe de Digital Market Outlook 2020 de Statista,
con la pandemia, Costa Rica alcanzó un crecimiento del 48%
de las ventas por Internet. Según fuentes oficiales, del 2017 al
2020 las ventas en línea en Costa Rica aumentaron de ¢329
millones a ¢19.603 millones. (Summa, 2021) [1].
Insemsa se especializa en proporcionar una amplia gama de
productos y servicios relacionados con la electromecánica y la
reparación de paneles eléctricos, dirigidos tanto a otras
empresas como a cualquier entidad que requiera de sus
servicios. En este proyecto, emplearemos la metodología del
Design Thinking para concebir y desarrollar un sitio web que
sea no solo funcional, sino también atractivo y moderno, que
satisfaga los requisitos y necesidades tanto de la empresa como
de sus clientes.
Un objetivo fundamental de este proyecto es ofrecer una
experiencia de usuario optimizada que facilite los procesos
internos relacionados con la electricidad y la electromecánica.
Para lograrlo, será necesario recopilar información de diversas
fuentes y utilizar una variedad de instrumentos de
investigación. Esto nos permitirá garantizar que el sitio web
resultante cumpla con las expectativas y necesidades tanto de
los clientes como de los empleados de Insemsa.
En resumen, este plan de investigación desempeñará un papel
crucial en el proceso de desarrollo del sitio web de Insemsa,
asegurando que el producto final sea una herramienta efectiva
que impulse la presencia en línea de la empresa y mejore la
experiencia de sus usuarios.
II. JUSTIFICACIÓN
La justificación para este estudio radica en la necesidad de
Insemsa de evolucionar digitalmente para seguir siendo
competitiva y ofrecer servicios de calidad a sus clientes. Un
sitio web bien diseñado actúa como una ventana digital que
puede mejorar la eficiencia operativa y la satisfacción del
cliente.
III. ANTECEDENTES DEL PROBLEMA DE INVESTIGACIÓN
Esta investigación hace un énfasis a que debido al
crecimiento de la tecnología y de la venta de servicios y
productos en línea es crucial tener presencia en la web y es por
eso que no tener una presencia en la web lleva a Insemsa a
perder ventas de los servicios electromecánicos y de reparación

de paneles eléctricos que ofrece, así como de la venta de
productos para estos campos. Este proyecto se apoya en
estudios anteriormente realizados acerca del diseño web
centrado en el usuario y en los campos de la electricidad y
electromecánica.
IV. OBJETIVO GENERAL
Diseñar una propuesta de sitio web para Insemsa que no solo
sea funcional, sino que también optimice los procesos internos
relacionados con la electricidad y la electromecánica,
mejorando así la experiencia del usuario.
V. OBJETIVOS ESPECÍFICOS
1. Analizar la situación y requerimientos del cliente a través
de una entrevista y encuesta.
2. Examinar las herramientas tecnológicas para la creación de
una propuesta de sitio web para Insemsa.
3. Desarrollar un prototipo de sitio web para Insemsa.
VI. MARCO METODOLÓGICO
El marco metodológico busca explicar qué tipo de investigación
se está efectuando, cuáles serán las técnicas de investigación,
los instrumentos para recolectar la información y como se
analizarán los diferentes resultados obtenidos. Este proyecto
también pretende exponer el diseño, la metodología utilizada y
la población o muestra que son más compatibles con esta
investigación.
A. Tipo de Investigación
La investigación es de índole cuantitativa, ya que, se
trabajará en el desarrollo de una página web para la empresa
Insemsa. Mediante los instrumentos utilizados se realizará una
investigación de campo obteniendo de esa manera necesidades
de la empresa, opiniones de empleados y las necesidades de los
clientes.
B. Población o muestra
La población de este proyecto son los clientes que se
encuentren en un rango de edad de entre 18 y 52 años de la
empresa, así como los trabajadores de Insemsa en los campos
de electricidad y electromecánica, y el dueño o jefe de la
empresa anteriormente mencionada.
C. Descripción de los instrumentos
Los instrumentos que se utilizarán para la recolección de
información son de gran importancia para esta investigación ya
que nos permite tener un mejor panorama para nosotros como
diseñadores a la hora de crear la página web.
El primer instrumento que se utilizará será una entrevista de
forma estructurada a partir de la creación de un guion de
entrevista, la cual consideramos es de vital importancia ya que
va dirigida tanto al jefe o dueño de Insemsa como también a sus
empleados, se les consultará a través de las preguntas
planteadas en el guion sobre requerimientos y necesidades que
tiene Insemsa como empresa y sobre su proceso de
digitalización.
Si desea observar o consultar el guion de entrevista puede
acceder al mismo con el siguiente enlace:
2
https://docs.google.com/document/d/1uNmQnQYBVMyJpBc
kRVwi1QNBJPiGGM6b/edit
El segundo instrumento que se utilizará en esta investigación
será una encuesta realizada en manera de formulario y
utilizando Microsoft Forms, el formulario va dirigido
específicamente a los clientes y esto para poder conocer las
necesidades que tiene los clientes de Insemsa y que
requerimientos desean ellos en el sitio web de la empresa.
Si desea observar o consultar la encuesta lo puede realizar
mediante el siguiente enlace:
https://forms.office.com/pages/responsepage.aspx?id=j_vi3eD
YXkS4UeacGYweWUdBCFz6X-
VBkcy2egFL191UNTBLNEo5MkRaS0lPT1JURUxLT0tKMl
dGRS4u&wdLOR=cACA2A612-F4B4-4CEF-A095-
DCAE99232EA3
VII. PREGUNTAS DE INVESTIGACIÓN
Entendemos que Insemsa es una empresa dedicada
totalmente a la venta de equipos electromecánicos y reparación
de paneles eléctricos con mucha experiencia y de alta calidad.
Sin embargo, no cuentan aún con una página web para
aumentar su exposición y desarrollar sus múltiples servicios, lo
cual nos llevó a formular varias preguntas. ¿Por qué una
empresa con tanto tiempo y experiencia en el mercado aún no
ha comenzado su proceso de digitalización? ¿Cómo podemos
ayudar a Insemsa a digitalizarse? ¿Cómo debe de lucir
gráficamente una página web para Insemsa? ¿Cómo podemos
convencer al usuario que mediante una página web puede
mejorar su exposición y ganancias?
VIII. METODOLOGÍA
Se comprende utilizar para este proyecto del curso de Diseño
de Interfaz Gráfica de Usuario la metodología definida como
“Design Thinking” que consiste en la resolución de diversos y
múltiples problemas a través del diseño, haciendo un énfasis
importante en el usuario.
Debido a su eficiencia Design Thinking se ha adoptado en
numerosos campos, ya no solo enfocados a diseñadores.
Design Thinking cuenta con cinco fases o etapas
específicamente, buscando una mejor comprensión del tema a
continuación se explicarán las fases de esta metodología:
1. Empatizar
Esta etapa consiste en buscar las necesidades, maneras de
ayudar y poner al usuario como la prioridad, se trata de escuchar
abiertamente al cliente y entenderlo para poder ayudarlo con las
necesidades que este mismo presenta.
2. Definir
trabaja en conjunto con la etapa anterior sin embargo esta fase
se trata de delimitar y limpiar las ideas para así conocer cuál
es el problema en concreto al que se le buscara una solución.
3. Idear
Durante esta fase, se fomenta la creatividad y se generan una
amplia variedad de soluciones posibles. Se alienta a los equipos
a pensar fuera de la caja y a considerar diferentes enfoques para
abordar el problema definido. En el diseño de interfaz de
 3

usuario, esto podría implicar la generación de múltiples diseños sitio web debe considerar las particularidades y preferencias de
conceptuales y la exploración de diversas formas de presentar esta región específica de Costa Rica.
la información y las funcionalidades.
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 3. Genero
La muestra está equitativamente dividida entre géneros, lo
Esta última etapa de la metodología Design Thinking que significa que el sitio web debe ser inclusivo y atractivo
pretende evaluar la funcionalidad de los prototipos con usuarios tanto para hombres como para mujeres.
reales y así obtener que cosas pueden mejorarse según el
usuario. Aquí se busca que el cliente formule 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 4. ¿Cuál es tu ocupación actual?
largo del mismo para una mejor comprensión del tema y del La mayoría de los encuestados son estudiantes, lo que indica
usuario a la hora de la realización de este proyecto. que el contenido del sitio web puede ser diseñado para satisfacer
sus necesidades y deseos específicos.
IX. INTERPRETACIÓN Y ANÁLISIS DE LOS RESULTADOS
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 que
X. RESULTADOS DE LA ENCUESTA sugiere que el sitio web debe tener un diseño limpio y fácil de
usar. Además, algunos usuarios están interesados en un diseño
Esta sección del proyecto intenta explicar y mostrar los colorido pero no excesivamente llamativo, lo que sugiere un
resultados obtenidos de forma textual y gráfica de una encuesta interés en la estética visual.
que se realizó a través de un formulario a personas
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
tecnológicamente competente.
6. ¿Qué tipo de navegación prefiere en nuestro sitio web?
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?

La mayoría de los encuestados reside en Heredia, seguido de 7. ¿Qué elementos le gustaría encontrar en la página de
cerca por Alajuela y San José. Esto sugiere que el contenido del inicio?

Los usuarios están principalmente interesados en
información sobre productos o servicios destacados. Esto
sugiere que el sitio web debe presentar claramente los productos
o servicios que ofrece de manera atractiva y detallada.
8. ¿Qué elementos le gustaría encontrar en la página de
inicio?
Existe una variedad de preferencias en cuanto al tamaño de
las imágenes, lo que indica que el sitio web puede considerar
una mezcla de tamaños para satisfacer diferentes preferencias
de los usuarios.
9. ¿Le gustaría que la web tenga una sección de búsqueda
avanzada?
La mayoría de los encuestados considera importante tener
una función de búsqueda avanzada, indicando un deseo de
encontrar información específica de manera rápida y eficiente.
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
del sitio web y posiblemente establecer una conexión más
personal con la marca.
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.
Esto indica que el sitio web podría considerar una estructura
híbrida para satisfacer diferentes preferencias de los usuarios.
12. ¿Tiene alguna función o característica específica en
mente que le gustaría que se implemente en la web?
4
La mayoría de los encuestados está interesada en una función
de búsqueda avanzada, lo que confirma la importancia de esta
característica para la audiencia.
13. ¿Le gustaría que los botones y elementos interactivos en
la web tengan efectos visuales al pasar el mouse sobre
ellos?
La mayoría está de acuerdo en tener efectos visuales al pasar
el mouse sobre los botones y elementos interactivos, lo que
sugiere una preferencia por una experiencia interactiva y
dinámica en el sitio web.
14. ¿Tiene alguna preferencia en cuanto a la posición de la
barra de navegación (menú) en la web?
La mayoría prefiere la barra de navegación en la parte
superior de la página, indicando una preferencia por un diseño
estándar y fácilmente reconocible.
15. ¿Cuál es su preferencia en cuanto a la velocidad de carga
de la web?
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.
XI. DIAGRAMA DE AFINIDAD
El mapa de afinidad es un método que favorece a la
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

XII. 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.

XIII. 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

XIV. 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

XV. 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

XVI. 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

En esta siguiente imagen del prototipo de nuestro proyecto

XVII. PROTOTIPADO podemos ver el resultado de la sección explicada
El prototipado es una fase experimental del Design Thinking y su anteriormente con un pequeño mensaje de bienvenida y una
objetivo es identificar la mejor solución posible para cada uno de pequeña galería sobre los valores y calidad de Insemsa. A
los problemas identificados en las primeras tres etapas de la continuación, se hará la presentación de otra sección de
metodología. Y para lograrlo debe hacerse rápido, utilizando pocos nuestra propuesta de sitio web:
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:

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.
XVIII. MOODBOARD
Un Moodboard es una herramienta que se utiliza para definir
ciertas utilidades o ideas que se usaran en un proyecto. Lo que
se pretende para esta sección es exponer la paleta de colores,
los tipos de tipografías y tamaños de letra que se utilizaron
para este proyecto.
A. A) Paleta de colores
Como se puede visualizar en la imagen anterior se utilizaron
los colores: blanco, celeste en diferentes tonalidades y el azul.
Para darle un aspecto novedoso, moderno y muy profesional a
diferentes partes del prototipo de sitio web para Insemsa como
botones, bordes y textos.
B. B) Tipografías y Tamaño de Letra
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.
10
XIX. 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.
XX. 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.
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
[1] Summa, R. (2021, junio 28). Costa Rica alcanza un
crecimiento de 48% en las ventas por Internet. Revista
Summa. https://revistasumma.com/costa-rica-alcanza-un-
crecimiento-de-48-en-las-ventas-por-internet/
[2] P. Contreras, “Design Thinking, la fase de
prototipar”, Laboratorio de Contenidos de Marca, 16-nov-
2022. [En línea]. https://laboratoriodecontenidos.cl/design-
thinking-la-fase-de-prototipar/.