UI shell template research & design
Create UI Templates as Guidelines to Enhance the Design System and Boost Team Efficiency
A project contributes to the Adapt design system by defining visual layout grids, spacing, and sections, ensuring consistent and adaptable layouts that align with the system's design principles.
Company
MY ROLE
Desgin research
Wireframe design
Created guidelines and documentation
THE TEAM
Design lead
TIMELINE
4 week start to finish
CONTEXT
ADAPT DESIGN SYSTEM
Adapt is the design system for the Linear Ad Platform’s AdVisor Traffic modules, and long term, AdVisor Ad Sales modules. Adapt will unify the old and new design direction of the AdVisor product.
As a UX/UI designer, I conducted research on UI shell layout patterns. First, identify layout categories and generate wireframes—finally, documentation the layouts with guidelines.
GOALS
The project aims to unify layouts, ensuring visual consistency and a cohesive user experience across modules.
The existing Ad Adviser system has been in use for years, but platform inconsistencies have strained the user experience. The Unified Ad Platform (UAP) will streamline Disney Ad Sales (DAS) by consolidating media planning, revenue, and operations into a single linear selling platform. The design proposes a modular UI create based on multiple existing patterns, offering guidance for designers across the platform.
PROCESS
01 Research
Understand patterns and usage
A layout is a structural UI shell or template that supports consistency across applications by defining visual layout grids, spacing, and sections.
Companies like IBM, Salesforce, Google, Apple, and Atlassian have complex and well-documented design systems that served me as both inspiration and guide.
02 Audit
Step 1:
Define category types to organize and classify our current screens.
Step 2:
Group pages from the existing Ad Sales and Traffic modules into their most relevant categories.
Step 3:
Capture screenshots of each module at a 1680x1050 laptop resolution (16:10 ratio) and categorize pages from the Ad Sales and Traffic modules into their most relevant groups.
03 Wireframe design
Extract UI pattern
I developed UI layout patterns with various variations and used wireframes to engage with design teams for feedback. Several suggestions were incorporated into subsequent design iterations.
Create in-product example to share
I also developed few in product example to collaborate with each design team, ensuring alignment on the new pattern while communicating the value of that section of the design system.
03 Documentation
Documentation & writing guidelines
Once the design team approves the pattern, it's time to create the guidelines, which will include usage scenarios along with suggestions and-suggestions. After publishing this section, it will serve as a reference for the entire team.
RESULT
The new UI layout pattern has led to a 30% decrease in design debt across various projects within the design system.
The UI system greatly assists the team in making design decisions, allowing us to most sections of the existing platform within three months—twice as fast as the estimated timeline. We have also received positive feedback from the entire design team.
REFLECTION
For an enterprise platform, scalability is essential. A design system is always centered around system thinking and teamwork.
The most challenging aspect of the project is ensuring that each team is aligned with the pattern solution. The concept UI work was extremely helpful in facilitating communication within the team.