Rediseño Visual · Mobile

Rediseño
Visual
Mobile

Proyecto

Rediseño UI Mobile

Empresa

Ocity

Powered by

Pixelar.es
→para avanzar

Índice

Estructura de la presentación.

01

Sobre Ocity

Qué es, objetivos principales

02

Misión & Valores

Misión, visión y valores del proyecto

03

Branding

Colores, logos y sistema de botones

04

Situación actual

Auditoría UX y problemas identificados

05

Propuesta visual

Rediseño mobile, mockups y nueva navegación

01

Sobre
Ocity

Contexto del proyecto y la plataforma.

Ocity es un atlas digital interactivo de patrimonio cultural. Permite explorar, documentar y difundir el patrimonio tangible e intangible de ciudades y territorios de todo el mundo.

Plataforma

Atlas interactivo web con mapa mundial, rutas temáticas y contenido multimedia por ciudad.

Alcance

Presencia en 6 países europeos con 13 socios del proyecto Erasmus+. Activo desde 2019.

Tecnología

Spin-off de la UPV. Desarrollado por Ysolve Soluciones Tecnológicas SL.

02

Misión, Visión y Valores

Misión

Digitalizar y narrar el patrimonio, las tradiciones y la historia de ciudades y territorios.

Ofrecer soluciones tecnológicas que permitan a municipios y entidades culturales preservar y difundir su patrimonio tangible e intangible, promoviendo la economía creativa como motor de desarrollo territorial.

Visión

Construir el atlas digital interactivo mundial de referencia para la innovación territorial.

Democratizar la creación audiovisual y generar nuevas narrativas digitales para el patrimonio cultural, evolucionando hacia experiencias inmersivas como el metaverso cultural O-CITY META.

Valores

Innovación tecnológica Participación ciudadana Preservación del patrimonio Economía creativa Colaboración internacional Accesibilidad cultural

03

Branding

Paleta de color corporativa e identidad visual de Ocity.

Orange

#F47920

Red

#E03127

Yellow

#F5C200

Teal

#2BAAAD

Green

#8DC63F

Navy

#1A5F72

Logo Ocity

Logo total

Logo Ocity v2

Logo simplificado

Isotipo Ocity

Isotipo

Primario

Acción principal

#F47920 → #E03127

Teal

Explorar

#2BAAAD sólido

Secundario

Secundaria

bg white/6, border white/12

Icono

01

Objetivos
principales

Las metas centrales de la plataforma Ocity.

Digitalización

Digitalizar el patrimonio cultural tangible e intangible de ciudades y territorios.

Narrativa

Crear nuevas narrativas digitales y audiovisuales sobre el patrimonio local.

Participación

Fomentar la participación ciudadana en la documentación del patrimonio.

Economía

Impulsar la economía creativa y el turismo cultural a través de la tecnología.

04

Situación actual

Auditoría UX de la experiencia mobile existente.

Tooltip pegado en mapa Salida de la app sin aviso Menú lateral incoherente Soporte sin diseño CTA sin acción Navegación a replantear

04 · 01/06

Tooltip pegado
al cerrar el pin

Al tocar un pin y cerrar su popup, queda visible una tarjeta flotante sobre el mapa. En móvil no existe hover: es un estado huérfano que bloquea la UI sin salida clara para el usuario.

04 · 02/06

Salida de la app
sin aviso claro

Al pulsar Blog o Aprendizaje, aparece un diálogo genérico: "Are you sure you want to be redirected?" Si el usuario acepta, sale de la app sin posibilidad de volver fácilmente. El problema no es la confirmación en sí, sino que el usuario no debería ser expulsado de la plataforma al navegar. Si hay que salir, debería quedar claro a dónde va y por qué.

04 · 03/06

Menú lateral
sin coherencia

"Blog", "About O-CITY" y "Landing O-CITY" redirigen fuera de la app, a la misma web principal de Ocity. Tres ítems distintos, mismo destino externo. El usuario ya está dentro de la plataforma, no tiene sentido sacarlo. El menú mezcla navegación interna con enlaces que abandonan la app sin distinción visual.

04 · 04/06

Soporte
descontextualizado

"Support" abre un formulario genérico sin logo, sin colores de marca, completamente ajeno al sistema de diseño de Ocity. Rompe la consistencia visual en el momento en que el usuario necesita ayuda.

04 · 05/06

CTA "View content"
sin acción

El botón principal del popup de un pin no hace nada al pulsarlo. Un CTA roto invalida todo el flujo de descubrimiento. Destruye la confianza del usuario y hace inútil el punto de acceso al contenido más importante de la plataforma.

XIRIVELLA (XIRIVELLA)✕
View content

Xirivella, with over 31,000 residents...

Al pulsar "View content" no sucede nada. Sin ruta, sin animación, sin error visible.

Flujo del usuario

De la landing a completar una ruta

Landing

o-city.org

Mapa

Ve los pins

Tap en pin

Selecciona un lugar

City Page

Info + rutas

Elige ruta

Ruta temática

Video/Podcast

Contenido de parada

Siguiente

Avanza en la ruta

Completada

Ruta finalizada

05

Propuesta
visual

Pantallas principales del rediseño mobile.

Bottom nav con iconos + etiquetas

Mapa a pantalla completa sin sidebars

Colores de marca en toda la UI

8 pantallas rediseñadas

Pantalla principal

Mapa, búsqueda flotante y nav

01

Filtros

Bottom sheet por tipo de patrimonio

02

City Page

Hub de ciudad: foto, rutas y enlaces

03

Ruta temática

Itinerario con video/podcast

04

Nueva navegación

Sidebar + bottom nav + menú Más

05

Soporte

FAQs + formulario o chat

06

Rediseño del pin

Antes/después + variantes

07

05 · 01/09

Pantalla
principal

Mapa como protagonista, sin distracciones.

Barra de búsqueda flotante sobre el mapa

Bottom nav con 4 secciones claras

Clusters de pines con colores por categoría

Botón de filtro teal como FAB

9:41
Ocity
Mapa
428
58
11
4
Buscar patrimonio, ciudad...
Inicio
Explorar
Aprender
Más

05 · 02/09

Filtros

Selección rápida de tipos de patrimonio.

Bottom sheet que emerge desde abajo

Icono y color por categoría

CTA "Aplicar filtros" con gradiente primario

9:41
Ocity
Filtrar por tipoLimpiar
Patrimonio tangible inmóvil
Patrimonio tangible móvil
Patrimonio intangible
Lugares naturales
Flora y fauna
Aplicar filtros
Inicio
Explorar
Aprender
Más

05 · 03/09

Punto de
patrimonio

Lo que ve el usuario al tocar un pin individual de patrimonio (no una ciudad). Bottom sheet con la información del lugar.

Foto, carrousel o video del lugar

Badge de categoría con color

CTA "Ver contenido" como acción principal

Acciones: guardar, compartir, descargar

9:41
Ocity
Mapa

La historia del barbero

Intangible Valencia, España
foto

La historia del barbero diabólico de la calle Manyans es una leyenda urbana valenciana del siglo XIX.

Ver contenido completo
Guardar
Compartir
Descargar
Inicio
Explorar
Aprender
Más

05 · 03/09

City Page

El hub de cada ciudad dentro de Ocity: agrupa foto representativa, rutas temáticas disponibles y enlaces de interés. Diferente del punto de patrimonio individual.

Foto, carrousel o video como hero de la ciudad

CTA "Explorar" como acción principal visible

Rutas temáticas con chips navegables

Links de interés de la ciudad en cards limpias

9:41
Ocity

Xirivella

CITY PAGE
Valencia, España
Explorar esta ciudad
Rutas temáticas
1
Ruta de paco

Enlaces de interés

Visit Valencia
Red Ciudades Seda
Inicio
Explorar
Aprender
Más

05 · 05/09

Ruta
temática

Heritage Explorer: contenido en formato video/podcast por cada parada de la ruta.

Reproductor de video integrado

Lista de paradas con miniatura

Barra de progreso de la ruta

9:41
Ruta de paco FLASH

Navegando por Barranquilla

Episodio 1 de 3 · 4:32

Paradas de la ruta

1

Navegando por Barranquilla

Reproduciendo

2

Puerto y malecón

3:18

3

Plaza de la aduana

5:02

Inicio
Explorar
Aprender
Más

05 · 06/09

Nueva
navegación

Simplificamos el menú eliminando redundancias y salidas innecesarias a la landing.

Se elimina

Blog (redirige a la landing)
Landing O-CITY (redundante)
Support (widget genérico)

Se mantiene / añade

Inicio, Explorar, Aprender
Más (About, Soporte integrado)
Perfil accesible desde el header
Ocity
Inicio
Explorar
Aprender
Sobre Ocity
Proposal
Soporte
Sobre Ocity
Proposal
Soporte
Idioma
Inicio
Explorar
Aprender
Más

05 · 07/09

Rediseño de la experiencia de soporte

Dos propuestas para reemplazar el widget genérico actual. Ambas integradas en el sistema de diseño de Ocity.

Propuesta A

FAQs + Formulario de contacto

Soporte
Buscar en FAQ...
¿Cómo crear una ruta?
¿Cómo añadir patrimonio?
¿Qué es una City Page?

¿No encuentras lo que buscas?

Enviar mensaje

Propuesta B

FAQs + Chat en vivo

Soporte

Hola, ¿en qué puedo ayudarte?

Crear rutaMi cuentaProblema

No puedo ver el contenido de un pin

Entendido, te paso un artículo que puede ayudar.

Escribe un mensaje...

05 · 07/08

Rediseño
del pin

El pin original es un círculo rojo genérico con las letras "CC". No transmite la identidad de Ocity ni diferencia entre tipos de patrimonio. El nuevo pin usa la forma estándar de marcador, colores de marca por categoría y es visualmente escalable.

Forma de gota: reconocible como marcador

Un color por categoría de patrimonio

Logo OC dentro del pin principal

Antes

Después

Pin Ocity con marca OC

Variantes por categoría

Tangible inmóvil
Tangible móvil
Intangible
Lugares naturales
Flora y fauna