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

Design and Testing Tools

Design and Testing Tools

  • Figma

  • Photoshop

  • Maze

  • Useberry

Management Tools

Management Tools

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

Understanding users and their needs

Understanding users and their needs

Entrepreneurs

I need visibility, technical knowledge, valuable contacts such as advisors and investors, and access to up-to-date market data.

Entrepreneurs

I need visibility, technical knowledge, valuable contacts such as advisors and investors, and access to up-to-date market data.

Entrepreneurs

I need visibility, technical knowledge, valuable contacts such as advisors and investors, and access to up-to-date market data.

Consultants

I need to connect with startups/companies committed to receiving mentorship to develop projects and promote innovation.

Consultants

I need to connect with startups/companies committed to receiving mentorship to develop projects and promote innovation.

Consultants

I need to connect with startups/companies committed to receiving mentorship to develop projects and promote innovation.

Researchers

I need financial resources for research. I am looking for research opportunities and access to regional and national paper data.

Researchers

I need financial resources for research. I am looking for research opportunities and access to regional and national paper data.

Researchers

I need financial resources for research. I am looking for research opportunities and access to regional and national paper data.

Students

I need access to information about scholarships, studies, competitions, and training pathways in technology/innovation.

Students

I need access to information about scholarships, studies, competitions, and training pathways in technology/innovation.

Students

I need access to information about scholarships, studies, competitions, and training pathways in technology/innovation.

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