02 / 04
Advanced Create & Edit Page Template
A reusable page template for creating and editing complex business objects.
Una plantilla reutilizable para crear y editar objetos de negocio complejos.
- CompanyEmpresa
- Oracle · Redwood Design System
- My roleMi rol
- Design lead, from initial concept through specification
- Líder de diseño, del concepto inicial a la especificación
- MethodsMétodos
- Scenario analysis, stakeholder feedback, usability review, layout exploration, interaction design, documentation
- Análisis de escenarios, feedback de stakeholders, revisión de usabilidad, exploración de layouts, diseño de interacción, documentación
- OutcomeResultado
- Reached production
- Llegó a producción
01Project overviewResumen del proyecto
I led the design of a reusable page template for creating and editing complex business objects.
Lideré el diseño de una plantilla de página reutilizable para crear y editar objetos de negocio complejos.
The project brought together information hierarchy, navigation, related tasks and error handling. I owned the work from the initial concept through specification, and the template reached production.
El proyecto reunió jerarquía de información, navegación, tareas relacionadas y manejo de errores. Fui responsable del trabajo desde el concepto inicial hasta la especificación, y la plantilla llegó a producción.
02Problem statementEl problema
Business specialists work with objects that contain many attributes and related records. They need to move between sections, add supporting information and resolve errors without losing the main task.
Los especialistas de negocio trabajan con objetos que tienen muchos atributos y registros relacionados. Necesitan moverse entre secciones, agregar información de soporte y resolver errores sin perder la tarea principal.
A single long form or a fixed sequence does not fit every workflow.
Un solo formulario largo o una secuencia fija no sirve para todos los flujos.
03Research and insightsInvestigación e insights
I reviewed existing enterprise scenarios, including Accounts Payable invoices, Supply Chain Product Hub and HR workflows. I compared how each organized essential information, sections and related records. Stakeholder feedback and usability review informed the work.
Revisé escenarios empresariales existentes, como facturas de Cuentas por Pagar, Supply Chain Product Hub y flujos de RH. Comparé cómo cada uno organizaba la información esencial, las secciones y los registros relacionados. El feedback de stakeholders y la revisión de usabilidad guiaron el trabajo.
Keep the object in context
El objeto siempre en contexto
Separating the information that defines the object from the details in each section gave the page a clear hierarchy, while letting users move through a large amount of data.
Separar la información que define al objeto de los detalles de cada sección dio a la página una jerarquía clara y permitió recorrer grandes cantidades de datos.
Match navigation to the content
La navegación según el contenido
Some tasks fit a simple form; others require navigation across grouped content or a long page. I explored these structures instead of treating every task as the same form.
Algunas tareas caben en un formulario simple; otras requieren navegar contenido agrupado o una página larga. Exploré estas estructuras en lugar de tratar todas las tareas como el mismo formulario.
Support related tasks and recovery
Tareas relacionadas y recuperación
Scenarios needed ways to create child records and locate errors outside the visible section. These became part of the template behavior, not separate screens added at the end.
Los escenarios necesitaban crear registros hijos y localizar errores fuera de la sección visible. Eso se volvió parte del comportamiento de la plantilla, no pantallas separadas agregadas al final.
04ProcessProceso
I mapped the information hierarchy and explored simple, linear and complex create-and-edit patterns. From there, I developed configurations for the page header, main information, navigation and detailed content, then reviewed the work with stakeholders.
Mapeé la jerarquía de información y exploré patrones simples, lineales y complejos de crear y editar. A partir de ahí desarrollé configuraciones para el encabezado, la información principal, la navegación y el contenido detallado, y revisé el trabajo con stakeholders.
Decision 1 · Use the right navigation
Decisión 1 · Usar la navegación correcta
The template supports tabs for related content, a Vertical Anchor Navigator for long sectioned forms, or forms and collections without navigation. A strictly sequential task belongs in a guided process instead.
La plantilla admite tabs para contenido relacionado, un Vertical Anchor Navigator para formularios largos por secciones, o formularios y colecciones sin navegación. Una tarea estrictamente secuencial pertenece a un proceso guiado.
Decision 2 · Keep related work connected
Decisión 2 · Mantener conectado el trabajo relacionado
Create-and-edit drawers support secondary tasks, such as adding a row, editing a related item or attaching a file, without requiring users to leave the main process.
Los drawers de crear y editar resuelven tareas secundarias, como agregar una fila, editar un elemento relacionado o adjuntar un archivo, sin salir del proceso principal.
Decision 3 · Define behavior beyond the desktop layout
Decisión 3 · Definir el comportamiento más allá del desktop
The specifications cover responsive and scrolling behavior. Accessibility notes define page-title reading order, heading roles and keyboard focus expectations alongside the component-level guidance.
Las especificaciones cubren el comportamiento responsive y de scroll. Las notas de accesibilidad definen el orden de lectura del título, los roles de encabezado y el foco de teclado, junto con la guía de cada componente.
05SolutionSolución
Specialized page template
Plantilla especializada
A page template for business processes that makes navigation and large amounts of information manageable when creating and editing.
Una plantilla para procesos de negocio que hace manejables la navegación y grandes cantidades de información al crear y editar.
Flexible structure
Estructura flexible
The template adapts to the structure of the information, making large amounts of data and related attributes easier to navigate. Configurable information levels support different business workflows.
La plantilla se adapta a la estructura de la información, haciendo más fácil navegar grandes cantidades de datos y atributos relacionados. Los niveles de información configurables se ajustan a distintos flujos de negocio.
Make errors findable
Errores fáciles de encontrar
The error model connects page-level feedback, field messages and indicators for sections that are not currently visible. Users understand what needs attention and where to find it before submitting.
El modelo de errores conecta el feedback de página, los mensajes por campo y los indicadores en secciones que no están a la vista. El usuario entiende qué requiere atención y dónde encontrarlo antes de enviar.
06ImpactImpacto
I delivered a reusable structure and specifications covering usage, anatomy, messages, accessibility, responsive layouts and scrolling.
Entregué una estructura reutilizable y especificaciones de uso, anatomía, mensajes, accesibilidad, layouts responsive y scroll.
My contribution
Mi aporte
I connected the structure of the data with the behavior of the page: how users navigate, handle related records and recover from errors. That work extended the template beyond its visual layout.
Conecté la estructura de los datos con el comportamiento de la página: cómo navega el usuario, cómo maneja registros relacionados y cómo se recupera de errores. Ese trabajo llevó la plantilla más allá de su layout visual.