Neptuno DS

El DesafíoThe Challenge

Inconsistencias que cuestan usabilidadInconsistencies that cost usability

LinkedIn acumula inconsistencias de maquetación, problemas de contraste y botones con lógicas confusas en su flujo Jobs. El proyecto deconstruyó ese flujo para desarrollar NEPTUNO DS, resolviendo fricciones y creando una interfaz coherente, escalable y accesible. LinkedIn accumulates layout inconsistencies, contrast issues, and buttons with confusing logic in its Jobs flow. The project deconstructed this flow to develop NEPTUNO DS, resolving friction and creating a coherent, scalable, and accessible interface.

Proceso de TrabajoWork Process

De la deconstrucción al sistemaFrom deconstruction to system

• Análisis e Inventariado: Captura de todos los elementos interactivos del flujo de empleo de LinkedIn para detectar inconsistencias y redundancias. Analysis & Inventory: Capture of all interactive elements of LinkedIn's jobs flow to detect inconsistencies and redundancies.
• Foundations: Paleta neón/grises para modo oscuro, tipografía consistente, retículas de alineación estrictas. Foundations: Neon/gray palette for dark mode, consistent typography, strict alignment grids.
• Biblioteca de Componentes: Botones con todos sus estados, campos de entrada, tarjetas y filtros con variantes completas. Component Library: Buttons with all states, input fields, cards, and filters with full variations.
• Patrones de Flujo: Rediseño de pantallas de búsqueda y postulación rápida con coherencia visual total. Flow Patterns: Redesign of search and quick application screens with total visual coherence.

Rediseño del FlujoFlow Redesign

Antes, después y comparativaBefore, after & comparison

Saturación de color incoherente, lógica de botones confusa ("Solicitar" vs "Postulación Sencilla"), desaprovechamiento espacial y bajo contraste en textos secundarios. Inconsistent color saturation, confusing button logic ("Apply" vs "Easy Apply"), wasted space, and low contrast in secondary texts.

Estilo visual unificado (grises oscuros + acento de alto contraste), lógica interactiva consistente con un único CTA claro y rejilla rigurosa que guía el ojo naturalmente. Unified visual style (dark grays + high-contrast accent), consistent interactive logic with a single clear CTA, and a strict grid that guides the eye naturally.

Reducción del ruido visual, claridad jerárquica y mayor eficiencia cognitiva. El usuario necesita menos tiempo para identificar la acción principal. Reduction of visual noise, hierarchical clarity, and higher cognitive efficiency. The user needs less time to identify the primary action.

Foundations

Los cimientos del sistemaThe system foundations

Colors

Gama de grises profundos para interfaz oscura con acento de alto contraste AAA como color activo. Deep gray palette for dark interface with AAA high-contrast accent as active color.

Grid

Sistemas de columnas y líneas base estrictas para estructurar layouts con coherencia espacial. Strict column systems and baselines to structure layouts with spatial coherence.

Radius

Definición de esquinas y redondeados proporcionales según el tamaño y la jerarquía de cada componente. Definition of proportional corners and radii according to the size and hierarchy of each component.

ComponentesComponents

Arquitectura FigmaFigma Architecture

Buttons

Estados definidos meticulosamente: reposo, hover, active, focus y disabled con variantes de tamaño y jerarquía. Meticulously defined states: default, hover, active, focus, and disabled with size and hierarchy variations.

Variants

Estructuración inteligente de variables en Figma para alternar estados y tamaños de forma ágil. Smart structuring of variables in Figma to toggle states and sizes agilely.

Card Info

Arquitectura interna de las tarjetas de vacantes, equilibrando legibilidad con tags de metadatos. Internal architecture of job cards, balancing readability with metadata tags.