Design System introduction

A design system is one of the key items most enterprise teams utilize in order to maintain a sense of order to the chaos that can come with design at scale. I am sharing some of the initial chapters to the Club Wyndham Design System as an example of some of the thinking required to deliver enterprise solutions at scale. 

It’s a great big world out there and a lifetime of adventure awaits. Your journey may take you to the busy streets of the Big Apple or the calming shores of Hawaii.

With Club Wyndham, the choice is yours. Unlock new cities, new experiences and new destinations.

Whether you’re stepping in or stepping out, Club Wyndham gives you the chance to try something new. And at the end of a long day, our resorts are your safe place to land.

No matter where you go or what you do once you are there, our front door will be open and a friendly face will be waiting, ready to welcome you.

Club Wyndham. Your front door to the world.

Definition

A design system is merely a codified set of decisions on the basic look, feel, and interaction of a digital product. 

Documenting these basic building blocks that will span our digital product line, then allows the product teams the freedom to design the experiences that focus on our customers’ digital experience and interactions with Wyndham Destinations. 

Our system is broken into two key areas: Guidelines and Resources. 

Within our Guidelines area we have documentation to support Branding initiatives, which is at the heart of the visual representation of our design implementations. There is also the User Interface Guidelines, which details the pattern library of HTML elements like buttons, form fields, etc. While the Editorial Guidelines provides direction for writing content for our digital Propucts.

The Resources section provides more detailed examples of the modules and other interactive elements that can be used to create content to support the brand. There are design examples of the modules currently in use within our site and the future iterations of this guide will also include code snippets to enable quicker prototyping and aiding in speed-to-market for future product development. 

A design system’s key value comes from allowing design implementation to scale for the enterprise. Affording design that can support consistency across product lines that serve both our customers and fellow associates while being tailored to their current knowledge and experience. 

This approach will ensure interactions with Wyndham Destinations are always dependable, delightful, and productive. 

What our design system is:

• A basis of consistent digital interactions
• A living system of patterns
• A customer experience structure
• A faster way to deliver assets
• A modern way to interact with user needs
• A scalable set of design choices

What our design system is not:

• NOT a limit to creativity
• NOT a static library of assets
• NOT a visual rule book
• NOT a substitute for great design
• NOT a way to skip knowing your users
• NOT fixed forever

Our design system is comprised of:

Branding Guidelines

User Interface Guidelines

Editorial Guidelines

Designer Toolkit

Developer Toolkit

No matter what brand or resort you choose, the choices made to support the customer experience carry across every digital product interaction. We will keep those patterns consistent across our digital assets regardless of the different colors, fonts, images we choose to represent our brands. Patterns like columnar layout, grid, buttons, link handling, Accessibility standards, and forms, will all be treated consistently across brands to deliver our experience principles: Easy, Empowering, Flexible, and Accessible.

Design Principles

Easy

We believe in seamless, efficient experiences. Simple and thoughtful interface designs will guide our customers through our digital experiences. 

Empowering

We encourage exploration. Relevant and personalized content helps our customers explore their benefits and plan their next vacation.

Flexible

We work with you. Our digital experiences meet our owners on their terms; placing them in control of their relationship with Wyndham Destinations. 

Accessible

When in doubt. Accessibility wins. We must always favor accessibility when making choices about colors, font styles, or button actions. We must be compliant with our AA standards across all our digital properties to inspire our owners and potential owners to go on vacation.

Our brand expression embodies the duality of the vacation experience: the journey (getting there) and the destination (being there). 

Mobile First

In 2016 mobile usage surpassed desktop by customers browsing the web. Along with that data point, people are also spending more time on the content sites while they are browsing through their mobile devices.

In order to present the best experience for our customers we are dedicated to design experiences that focus on the mobile interaction first and then provide progressively more immersive and appropriate content as the viewport of the device increases. 

This ensures that our digital products are engaging, informative, and accessible regardless of the device our customers choose to interact with our brand.

Touch Devices

Touch user interface enables not only the sense of touch to activate computer-based functions, it also allows the user, particularly those with visual impairments, an added level of interaction based upon tactile input.

People often touch with more than one finger and don’t even realize it. That’s why touch interactions shouldn’t change radically based on the number of fingers touching the screen. Just like the real world, sliding something with one or three fingers shouldn’t make a difference.

Designing for touch is a complex balance between size, spacing, and visuals. Achieving this balance reduces what is known as the “index of difficulty in target acquisition,” or, in other words, it makes controls easier to press.

• Touchscreens sense the geometric center of a users contact point
• Touch is imprecise. Precise movements are hard
• Touch targets are not visible and can be larger than the related visual element
• Frequently touched UI should have larger touch targets
• UI elements should be 60-100% of the touch target
• UI elements too close to the edge of the screen are more difficult to hit
• Sequential tasks require additional space for precision (multi delete)
• Use the grid to help provide adequate space between TUI elements

A mouse and pen are precise, while fingers aren’t, and small targets require precision. Use large targets that support direct manipulation and provide rich touch interaction data. Swiping down on a large item is quick and easy because the entire item is a target for selection.

There’s no perfect size for touch targets. Different sizes work for different situations. Actions with severe consequences (such as delete and close) or frequently used actions should use large touch targets with enough padding to avoid accidental taps.

• People often blame themselves for having “Fat” fingers but even baby fingers are wider then most touch targets”
• 7×7 mm is a good size if touching the wrong target can be corrected in one or two gestures.
  • At 135 DPI, 40 px = 7mm or 10 px = 2mm padding
• When accuracy matters, actions like close, delete or other severe consequences, you cant afford accidental taps
  • At 135 DPI 5 px = 1mm

People often touch with more than one finger and don’t even realize it. That’s why touch

When accuracy matters, actions like close, delete or other severe consequences, you cant afford accidental taps interactions shouldn’t change radically based on the number of fingers touching the screen. Just like the real world, sliding something with one or three fingers shouldn’t make a difference

Gestures

Interactions that require compound gestures such as double tap or press and hold need to be performed within a certain amount of time.

Avoid timed interactions like these because they are often triggered accidentally and are difficult to time correctly

Interaction Feedback

Increase user confidence by providing immediate visual feedback whenever the screen is touched. All interactive elements should react by changing color, changing size, or by moving.

Buttons and other elements that do not move should return to their default state when the user slides or lifts their finger off the element.

Device Posture

Designing for touch is more than designing what’s displayed on the screen. It requires designing for how the device will be held (single hand, both hands). Immediate environment and physical comfort also affect how long a grip is used and how often it’s changed.

Typically, different people have a few favorite grips when holding a tablet. Your designs should consider the different holding position and interactions required. Think about common “On the Go” scenarios where people tend to read, browse, and do a little light typing the most. Remember the environment matters as well. Mobile devices tend to be used on the bus, in coffee shops, in front of the tv where distractions are higher.

Because slates are most often held along the side, the bottom corners and sides are ideal locations for interactive elements. In addition, Most people hold a slate with their left hand and touch it with their right. In general, elements placed on the right side are easier to touch. Phone interactions are mainly thumb based and placing interactive elements within reach of the thumb’s reach are ideal.

Content in the top half of the screen is easier to see than content on the bottom half which is often blocked by the hands or just plain ignored.

Brand Positioning

Tagline​:​ Live Your Bucket List

It’s a wild, wonderful life out there and adventure awaits. Your bucket list is your chance to explore it.

From the busy streets of the Big Apple to the calming shores of Hawaii, Club Wyndham will unlock your next destination. Wherever your imagination takes you, we welcome you in with an open door, a warm smile, and exciting new possibilities at every turn.

Dream big. Dive in. Live wide. Explore far. Your vacations, your way.

At times, we need to modulate our brand voice for audience-specific needs. This page demonstrates our brand voice in messages for both prospects and owners.

How to use this messaging:

• In full or in part in communications with prospects and owners.
• To connect the dots between the Club Wyndham brand positioning and specific prospect and owner collateral.
• To provide guidance to those creating communications on behalf of Club Wyndham.

Prospects – Dive into a new adventure

Discover vacation ownership with a world of destinations. With so many Club Wyndham resorts around the world, the next adventure is yours to own. Explore a new place, relax in a favorite space or reconnect with what matters—the choice is yours, and we’ll always be there to welcome you in. No matter where you vacation with Club Wyndham, your journey will be extraordinary.

Escape your day-to-day and explore somewhere new. We open the door to adventure.

Owners – Experience the best of your bucket list

Explore a world of destinations ready for your next adventure. With so many Club Wyndham resorts around the world, you can make your bucket list happen: New places to go. A choice of who to bring. More reasons than ever to keep coming back. No matter the adventure you’re dreaming of, it’s easier than ever to make it a reality. We can’t wait to see where your dreams take you.

Escape your day-to-day and explore somewhere new. We open the door to adventure.

This was merely meant as an introduction to some of the research and work put into standing up a design team inside an enterprise. I have been intimately involved in all of the steps required to build a team in small and large organizations. The design system has become more commonplace when design is attached to product lines and following the best practices from the industry and my experience as a design leader helped guide the creation of this document for the Club Wyndham product, as well as specific design systems for each brand in our portfolio of timeshare products.