Existing Component Template Audit
Whiteboard Strategy
Sketch Symbol Structure
14 Column Layout
Header Component
Responsive Body Copy
Responsive Content

Marriott International

Client: Marriott International / Standards Team

Role: UX Designer

Oftentimes design teams work on shared documents and though collaboration is attempted, what misses the mark is cohesiveness and workflow efficiency. This is usually a roadblock for some teams as it could be many factors where they could lack time or resources, but if you’re going to build something that requires reusability then its important to build reusable dynamic templates to make your teams workflow more efficient.

The current state of the standards team component library templates needed to be enhanced to help designers focus on organizing their component content faster and efficiently rather than rebuilding the component templates with inconsistent styling and layout design in Sketch.

What the existing template fails to address is:
• Designers needed a faster way to implement these templates into their workflow
• Designers needed to have flexible and dynamic templates that will help maximize their efficiency in building the design system component libraries
• There is a need for a consistent 3-column grid, and which artboard width/grid would work best
• Header design, symbol and body copy inconsistencies
• Designers want standardization

The redesign of the template will address this gap by:
• Reviewing the structure of the contents look and feel.
• Create a dynamic template that works to help maximize efficiency in the designers workflow

My initial focus will be:
• Use a 1440pw layout on a 14-col grid for organization
• Create a dynamic and responsive header
• Look into cleaning up symbols
• Create a dynamic and responsive content container tailored to the existing structure of the component library template

Dissecting the template components

14 Column Grid
Standard 1440pw on a 14-col grid to support up to 4 columns if necessary: 5-3-3-3 (each number represents a column in the grid)

Header
The section header is comprised of multi-editable symbols: Section Title, Component Code and the type of atomic category.

Content Level 1: Stacks (Body copy)
Stacks content is comprised of a multi-level symbols. Each section can be activated and deactivated depending on what content is required for the component.

Content Level 2: 3 Column Container
The section header is comprised of multi-editable symbols. Important to ‘Detach from Symbol’ if you plan to use this section when expanding on your component. The section title can be edited, and can enable/disable top border depending on hierarchy. The component box allows you to change its background color to 3 varying degrees: white, gray, and black. The component attributes can be edited, with a dynamic symbol ‘attribute text w/ subtext’. This symbol can enable and disable the subtext dropdown.

Usability
We live in a world of complexity. What was once a task that needed to be copied over creating inconsistent design has now been simplified down to help the user create structure and faster implementation of a template. It could be said that the whole template could be made as a symbol to fit into any 1440pw layout, but then the designer would have to work backwards in removing what he doesn’t need. The videos below show how quickly you can set up the template, and how easy you can begin editing the components to make your workflow seamless.