1

INSEMSA, INVERSIONES Y SERVICIOS

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

[email protected]
[email protected]
[email protected]

Abstract - The use of technology in recent times has evolved dedican a ofrecer y vender ciertos productos como: comida,
exponentially to the point where online product sales have tecnología, ropa, zapatos, entre otros, deben tener una
been radically transformed. Currently, companies or ventures presencia en la web.
that engage in offering and selling specific products such as Según el informe de Digital Market Outlook 2020 de Statista,
food, technology, clothing, shoes, among others, must have an con la pandemia, Costa Rica alcanzó un crecimiento del 48%
online presence. de las ventas por Internet. Según fuentes oficiales, del 2017 al
According to the Digital Market Outlook 2020 report by 2020 las ventas en línea en Costa Rica aumentaron de ¢329
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 II. JUSTIFICACIÓN

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

E l uso de la tecnología en los últimos tiempos ha

Esta investigación hace un énfasis a que debido al
crecimiento de la tecnología y de la venta de servicios y
evolucionado exponencialmente tanto que la venta de productos en línea es crucial tener presencia en la web y es por
productos en línea ha sido transformada de una manera eso que no tener una presencia en la web lleva a Insemsa a
radical. Actualmente las empresas o emprendimientos que se perder ventas de los servicios electromecánicos y de
 2

reparación de paneles eléctricos que ofrece, así como de la https://docs.google.com/document/d/1uNmQnQYBVMyJpBc

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

enfoques para abordar el problema definido. En el diseño de La mayoría de los encuestados reside en Heredia, seguido
interfaz de usuario, esto podría implicar la generación de de cerca por Alajuela y San José. Esto sugiere que el
múltiples diseños conceptuales y la exploración de diversas contenido del sitio web debe considerar las particularidades y
formas de presentar la información y las funcionalidades. 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
3. Genero
Esta última etapa de la metodología Design Thinking La muestra está equitativamente dividida entre géneros, lo
pretende evaluar la funcionalidad de los prototipos con que significa que el sitio web debe ser inclusivo y atractivo
usuarios reales y así obtener que cosas pueden mejorarse tanto para hombres como para mujeres.
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
usuario a la hora de la realización de este proyecto. indica 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
5. ¿Cuál es su preferencia en cuanto al diseño general de la
resultados mediante gráficos.
web?
La mayoría prefiere un diseño moderno y minimalista, lo
que sugiere que el sitio web debe tener un diseño limpio y
X. RESULTADOS DE LA ENCUESTA
fácil de usar. Además, algunos usuarios están interesados en
Esta sección del proyecto intenta explicar y mostrar los un diseño colorido pero no excesivamente llamativo, lo que
resultados obtenidos de forma textual y gráfica de una sugiere un interés en la estética visual.
encuesta 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 6. ¿Qué tipo de navegación prefiere en nuestro sitio web?
orientado hacia una audiencia joven y probablemente La mayoría prefiere un menú desplegable en la parte
tecnológicamente competente. 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. XI. 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

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:
 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,
Esta sección lo que pretende es darle al usuario una opción para las personas encargadas de realizarlo. Cabe mencionar
para navegar más fácil en la futura página web, que los resultados obtenidos son muy positivos y el
específicamente dando “clic” en el botón de cotizar para que conocimiento que deja a las personas encargadas de
se traslade a la sección donde el usuario podrá consultar y desarrollarlo es bastante amplio.
realizar dicho servicio.
1. Se ha logrado utilizar diferentes técnicas y herramientas
XVIII. MOODBOARD como el cardsorting, para analizar de una mejor forma los
requerimientos y necesidades de los empleados y clientes de
Un Moodboard es una herramienta que se utiliza para definir Insemsa.
ciertas utilidades o ideas que se usaran en un proyecto. Lo que
se pretende para esta sección es exponer la paleta de colores, 2. Se logró desarrollar las habilidades y capacidades para la
los tipos de tipografías y tamaños de letra que se utilizaron utilización de herramientas tecnológicas como Penpot que
para este proyecto. ayudaron a la creación de la propuesta del sitio web para
A. A) Paleta de colores 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
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
B. B) Tipografías y Tamaño de Letra prototipar”, Laboratorio de Contenidos de Marca, 16-nov-
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.