SOCIAL
Conecta e Innova Tacna
The digital platform that boosts the entrepreneurial ecosystem of the Tacna region.
Client
Tacna Innova
Project Owner
Paulonia
Team
2 diseñadores
Timeline
4 semanas
Role
UX
UI
Testing
Design QA
Figma
Photoshop
Maze
Useberry
Jira
Slack
Loom
Methodologies
Atomic Design
Lean Kanban
Design Thinking
Test de usabilidad
Devices
Web
Mobile
About the Project
Conecta e Innova Tacna is a website created to promote innovation and collaboration, primarily in the Tacna region of Peru. The website offers resources and tools such as spaces for project exhibitions, calls for proposals, contests, consulting services, training courses, and learning paths.
Objective
The main objective of Conecta e Innova is to create a dynamic and collaborative environment that promotes innovation and entrepreneurship in various fields. The website aims to:
Facilitate the connection between entrepreneurs, advisors, researchers, and students.
Promote the development of projects.
Promote continuous learning.
Increase the visibility of projects.
Promote collaboration.
UX phase
I analyzed the client's requirements and conducted user interviews to define the functionalities.
I conducted a benchmarking of similar products to understand the market landscape.
Based on all the information from interviews and benchmarking, together with the team, we ideated the sections, user flow, and wireframes.
Throughout the design process, I participated in meetings with the client to validate the design and receive feedback.
Simultaneously, I coordinated with the development team to ensure the viability of functionalities in the design.
Website architecture
UI phase
Given that the website had multiple modules and it was necessary to ensure quality and consistency in the interfaces, I took the initiative to design components and define styles as part of a design system.
I created the style guide, color palette, typography, iconography, UI components, and graphic resources.
I designed the web interfaces with a responsive approach.
Color palette
I started by reviewing the Tacna Innova brand manual for the color palette.
Typography
Lexend
I defined the styles in Figma for each text type, headers, buttons, body, captions, etc.
Iconography
I used the Phospor library for its wide range of icons, choosing Regular for standard elements due to its clarity, and Duotone to visually enrich key components.
Components with variants
I designed variants for each component to maintain consistency throughout the design. Here are some examples:
Buttons
Avatar
Texts fields
Rich Text Editor
Components in Figma and their properties
I configured each component in Figma to facilitate its use and access. Here’s an example of its use:
Inicio
It contains an introduction and a call to action to explore all the sections of our website.
Home
Aprende
Users can follow learning paths, access courses, and earn certificates to advance in their educational development.
Learning Paths
Conecta
Users will be able to discover projects and people based on their location, thus expanding their networking and local collaboration opportunities.
Conecta Section
Business Innovation projects
Users can share their entrepreneurship, business innovation, and research projects, as well as collaborate on others.
Business innovation project
User profile
In each user's profile, their associated projects and consultations will be displayed along with contact information, allowing for direct communication.
User profile
Comunidad/Blog
Users can share on the public blog, where they will have the opportunity to interact with other community members and engage in discussions.
Blog section
User testing
Resources
Prototype, script, tasks and scenarios.
Type of tests
5-Second Test, A/B Testing, First Click Test, Preference Test and Guided Sessions.
Metrics
Efficiency, effectiveness, satisfaction survey and heatmaps.
Insights and Solutions
First insight
In the 'Conecta' section, where we showcase various entrepreneurship, business innovation, research projects, and people, most users had difficulty navigating.
Identified issues
Map Relevance: Seeing the information on a map was not relevant to the users, as location was not a limiting factor for making connections.
Interaction with Pins: Having to click on each pin on the map to see the details of a project or person reduced users' interest in continuing to browse or discover more projects.
Conecta Section - Before
Solución
Sección Conecta en la Barra de Navegación: Trasladamos el concepto de la sección "Conecta" a la barra de navegación, ahora, las personas y los proyectos se han organizado en nuevos módulos, "Comunidad" y "Repositorio", respectivamente.
Barra de navegación sección Comunidad - Después
Barra de navegación sección Repositorio - Después
Sección Comunidad: Todas las personas registradas en la plataforma han sido trasladadas a una sección específica llamada Comunidad. Esto permite a los usuarios encontrar y conectarse con otros miembros de manera más organizada.
Sección Comunidad - Después
Nueva Sección Repositorio: Creamos una nueva sección llamada Repositorio donde se agrupan todos los tipos de proyectos. Esta sección centraliza toda la información relevante de los proyectos, facilitando su búsqueda y consulta.
Sección Repositorio / Proyectos de Emprendimiento - Después
Sección Asesorías: Creamos una sección dedicada a las "Asesorías", donde se albergan todas las asesorías registradas en la plataforma. Anteriormente, estas asesorías solo se mostraban en el perfil de las personas que las ofrecían, pero las pruebas indicaron que los usuarios necesitaban ver las asesorías en una sola sección.
Barra de navegación sección Asesorías - Después
Sección Asesorías - Después
Segundo hallazgo
Información en la página principal: Algunos usuarios durante su primera visita en la página principal tenían que volver a revisar las secciones para descubrir la información, lo que tomaba tiempo extra y no quedaba del todo claro.
Página principal - Antes
Solución
Rediseño de la página principal: Rediseñamos la página principal para que sea más amigable y fácil de entender. Ahora, destacamos quiénes son los usuarios y qué funciones tienen, así como los proyectos de manera más visible. También mejoramos los textos de cada sección para que sean más claros y estén bien organizados.
Página principal - Después
