Select Page
Design Toolkit

Design Toolkit

Introduction

Some of the challenges in establishing a new design team within a legacy enterprise culture are the introduction of new processes and procedures to deliver with velocity to the market that shake up the established norms.

Overview

As I began to build the product design team within Wyndham Destinations it was evident that the enterprise design culture was non-existent. This was a 50+ year old company that is still using IBM AS400 mainframe computers to power its business operations. Needless to state, the introduction of modern, agile software development processes was a bit of a culture shock for many long-time associates. 

Background

Problem

 

When the company decided to spin off its hotel business and become a solely-focused timeshare company, the decision was made to adopt a more modern, agile-is approach to product delivery across the enterprise. Coming off the recent learnings of a multi-year, $150 million dollar software product that was built in-house, the senior leadership agreed that our approach to web design needed to change.

Solution

I have written about some of the core team members required for a product team here. The next step was choosing tools and initiating processes that allowed iterative, collaborative design while also engaging internal teams for feedback while also providing a window for our customers through user testing. 

After researching the multitude of options available, we settled on a few core tools: Bohemian Sketch, Abstract, and InVision App for our initial software set.

Solution

The core of the design team’s toolkit would be Sketch. Sketch is a vector-based application that has been around since September 2010 and quickly gained popularity among product design teams. It is primarily used for user interface and user experience design of websites and mobile apps provides a plugin system that enables a greater collaboration with development partners to help the handoff of designs and assets for coding.

The second package we settled on was Abstract. Abstract at its heart is version control software which allows the traditional check-in/out features for design teams working on projects at scale. However, it also allows review features that enable sponsors to review screens-in-progress tied to tickets, like I wrote about with the dashboard project, but it really shines with handing off assets to developers.

The same link a sponsor can use to review a design and provide commentary allows a developer to actively engage with the design and retrieve ID/Class names for CSS, review size and position of elements, as well as pull hexadecimal color values for code. This negates the need to red-line designs and is a significant time saver for the design team.

The last key application we chose was InVision App. InVision was initially a presentation application for reviews and approvals, but has grown into a suite of design tools as the market has matured. At first, InVision was chosen for that reviews and approvals feature-set for our sponsors but we quickly chose it as a base for our user testing efforts and transitioned all commenting to Abstract.

There are a lot of alternatives for user testing, but many of those require installation of application on a test subject’s computer or mobile device. There were definitely serious limits to what could be accomplished in a prototype within InVision App, but for the customer journey’s we were creating the software was sufficient for the task.

Our key customer is an older demographic and we wanted to ensure it was as hassle-free as possible for our owners to participate in user testing without encumbering them with installation and support of applications they would only use during the tests.

A key feature of all of these applications was that they not only worked for our design team, but also for our extended team of sponsors, partners, and test-subjects. As designs progressed through the maturation, we could easily tie them to JIRA tickets for our product owners to review progress while also develop prototypes to be readied for user testing. As comments and revisions arrived, those designs could be updated, merged back up into Abstract and the prototypes updated in InVision in a seamless process.

Conclusion

Part of the success of any team is the balance of talent on the team and codified roles and responsibilities. Another key part is providing the necessary tools and procedures to allow the design team to work on solving the business problems and not troubleshooting software. This small suite of tools has allowed the team to deliver a new application to our owners that has been tested, iterated, and delivered in less than 9 months, during a pandemic.

The fact that much of these tools operate in the cloud was not their initial value to the company, but once we transitioned to a work-from-home, distributed team the value of our due diligence in establishing clear processes and procedures delivered value for our owners, senior leadership, and our share price.

We continue to review out toolkit and have made some adjustments to the initial procedures based on experience and we expect to move our design tools into Adobe XD in the next 12 months as this single application provides much of what our current set of 3 is handling.

AppScan Monitor Enterprise Dashboard

AppScan Monitor Enterprise Dashboard

The IBM Security portfolio continued to grow through a series of mergers and acquisitions. Once we acquired new products our teams would begin working on evolving their designs to leverage the design systems and libraries we already had in place within IBM Design. This would enable the growing portfolio of applications to become a larger suite of tools working together, rather than a disparate set of applications without any visual or interactive commonality between them. 

Overview

AppScan was a an application that scanned your code to determine if there were insecurities that could be breached in an attack. These design sprints ranged from 5-days to 10-days, while this particular design sprint took the one-week to deliver updated guidance to our development partners.

Team

 Blake H., Cameron C., Allison H. Yael K.

 

Problem

Dev team needs a polished visual design of the AppScan Enterprise Monitor (ASM) dashboard. Taking into account new metrics that are being added in the current release and incorporating those updates into the design was a key requirement. 

Note: thesw new metrics being added to the dashboard have been, identified, developed, and confirmed thru multiple customer interviews.

  • Number of applications with Open Issues
  • Need a dashboard for the IT security analyst that will tell him at a glance: what’s the current state of the portfolio or a specific business unit, and how is the application security program progressing overall, or for a given business unit.
  • Dashboard should fit on one screen, so that it can easily be included in presentations/marketing collaterals.
  • Number of Open Issues
  • Ability to see dashboard at the portfolio level or the business unit level
  • Trend data for Risk Rating, Testing Status, Apps with Open Issues, Open Issues

Before

AppScan old dashboard

There are multiple issues with this current design that are affecting the viewers from accomplishing their tasks without great cognitive load. The team identified these key issues to address with an updated ASM dashboard design: 

  • No Focus
  • No primary/secondary tasks
  • Lack of visual hierarchy
  • Colors have multiple meanings
  • Navigation is not intuitive
  • Content is not scannable
  • Scale of graphs make them hard to read
  • Forced to dig for content

Solution

After

AppScan redesign monitor dashboard

The updated design shows a great sensitivity for the security professional and their need to identify and address information immediately. The key areas of opportunity the updated ASM design addressed were: 

  • Putting context to the information
  • Created visual hierarchy to information
  • Provided a task-based journey + flow
  • Focus tasks to single graphs
  • Reinforced brand positioning
  • Works the same, works together, works for me
Conclusion

Development built the air-traffic control tower and the design team provided the means to manage the traffic efficiently and effectively.

Blake H.

e.lements of magic

e.lements of magic

Introduction

I have worked for/with The Walt Disney Company for a large percentage over the course of my career. 

 I have also been a fan of the company and its vast entertainment empire; specifically the theme park business. I set out to write a travel guide that approached the Magic Kingdom Theme Park from a different angle than the multitude of books that flood the travel section of BARNES & NOBLE or Amazon. 

Overview

The Magic Kingdom Theme Park located at The Walt Disney World Resort near Orlando, FL was Walt Disney’s second major urban planning initiative. The scope of the destination was much larger than what was realized initially, but due to Walt’s untimely death in December of 1966, plans for that experimental community were shelved.

However, Roy Disney had another idea and that was to replicate the Magic Kingdom of Disneyland but on a much larger scale in their recently purchased land in the heart of Central Florida. The park would be bigger and include enough land for the park to whisk its guests away to a fantasy away from the world and without the encroachment to which the park in Anaheim had become subjected.

Background

Problem

How to take a destination as large as The Walt Disney World Resort’s 43 square miles, with 4 theme parks, 2 water parks, multiple golf course, with shopping and dining across the property and create an easy-to-use travel guide? Leverage all of the qualities of the iPad to deliver a immersive book for Apple’s iBooks.

Solution

I have actually had this idea percolating in various degrees of completion for about twenty years; dating back to the era when CD-ROMs were going to rule the entertainment world. With the ability to showcase rich imagery, videos and immersive VR views of select locations within the park, I knew this was the platform as the best way to showcase the Elements of Magic: The Interactive Guidebook for Disney’s Magic Kingdom.

Solution

My approach to breaking down The Walt Disney World Resort into an approachable and consumable travel guide was two-parts: 1.) Step away from traditional publishing and use the robust and immersive features of Apple’s iBooks, 2.) Dedicate the first book to a single park, and 3.)Develop a visual language that presents a feature-rich resort destination that makes planning a vacation easy. 

Through the use of extensive original photography, interactive timeline, immersive rich-media, and 360-degree virtual reality (VR) views I authored and independently published an interactive guidebook for Disney’s Magic Kingdom

Process

As I started out on my outline for this book, I wanted to develop a theme that was different than most other travel guides on the market. I wanted to develop a hook that helped identify the attractions within the park with ease for the reader as well as provide opportunities to market supplemental products that built off of this theme. 

Elements of Magic, land tiles

Upon my initial audit of the parks, using their way-finding guides from their park maps, I broke the park into its specific active lands: Main Street U.S.A., Adventureland, Frontierland, Liberty Square, Fantasyland, and Tomorrowland. Now the approach using active lands allowed the options to include retired lands as a means of sharing trivia and historic details about the park. This use of retired aspects of the park was also used in the approach to attractions, dining, and shopping elements across the park as well.  

Dividing the park into its respective lands then led to breaking those land into attractions, queued themed experiences, and dining that is available to the park’s guests.  

Once I had a spreadsheet of these items I began to further categorize them to include the park ID, latitude, longitude, etc. As I was reviewing the spreadsheet it sparked the idea to use the periodic table as a guide to display the items within the park. I chose the key elements that I thought were of interest to Disney fans and settled on these key items: 

Elements of Magic, key

Due to the fact that there are so many shopping options throughout the park, and some of those are pop-ups based on time of year, in-park celebration, etc. the final decision was made to only highlight attractions and fixed dining locations as tiles; this corresponds to the way the park maps highlight items as well so there was a level of context for the Disney traveler to maintain this presentation within my guide book. 

To further delineate the attractions from dining tiles in an effort to make them abundantly clear to the viewer, the styling of the tiles also differed a bit. The attractions tile has a colored background that corresponds to its appropriate land, while the dining tile uses that color as the border to its tile.  

Elements of Magic, tiles

Another benefit of the use of the tiles is in the ability to market items using this unique visual library on posters/prints, mugs, t-shirts, etc. This library is also being extended to books highlighting the other parks of The Walt Disney World Resort as well as their parks around the world.  

Conclusion

Using a simple graphic system to display a specified set of data points allows a comprehensive presentation of data in a consumable and navigable manner. The use of the periodic table chart as a means to navigate a robust destination replete with scores of attractions and dining locations reduces the cognitive load to the reader, while providing a simple, obvious, and repeatable library of tiles to draw a reader further into The Elements of Magic, The Interactive Guidebook for Disney’s Magic Kingdom.

Imagery

Elements of Magic, Main Street U.S.A.
Elements of Magic, Fantasyland
Elements of Magic, Haunted Mansion
Design System introduction

Design System introduction

Introduction

All aspects of enterprise design arepart of my role building an enterprise design team within Wyndham Destinations.

This includes instituting and formulating processes, procedures, and the best practices required by this team to observe, distill, and deliver solutions that will server our owners and members across the portfolio of clubs under Wyndham Destinations. 

Overview

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. 

Solution

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.

Conclusion

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. 

Club Wyndham owner dashboard

Club Wyndham owner dashboard

Introduction

A deeper dive into the design of Club Wyndham’s owner dashboard. A review of the problem and overview of the steps taken to deliver a solution.

Overview

Part of the rebrand of the Club Wyndham product Wyndham Destinations was also moving its content management (CMS) from TeamSite to Adobe Experience Manager (AEM). This was a massive undertaking for a 50+ year old company which still using many legacy systems that powers its business initiatives and a major focus for the internal IT team. 

Background

Problem

A CEO priority for our owners is “put our owners on vacation”. This desire by our most senior leader and his executive team has been our single-minded message we reflected on during the design of the site. His directive was not merely to increase bookings to our resorts, but more so to make it easier for our owners to activate their ownership.

Solution

We are still learning new ways to deliver value to the owners as our enterprise design team continues to grow and mature and this evolution was motivation for this move to a newer, more robust CMS. Thankfully, there is a key member on the product team who maintains much of the institutional knowledge of the customers’ behaviors, our product details, and the integrations across our back-end systems. 

Their insight has helped guide our user research on the redesign of the Club Wyndham digital experience. We have worked extensively to understand the Product Team’s goals for the rebrand through our research of our users as well as the technical constraints of our systems to deliver the new digital product experiences for the Club Wyndham owner and prospect through the website. 

The team worked through much of the acceptance criteria for every feature the team wished to bring to the release, which focused on our logged-in owner and their new dashboard. As we introduce an agile manner of delivery, we also have begun using Jira to manage our product timelines; this is not ideal since it is really a defect tracking system and not designed for project management but it allows visibility for the development of the site across all internal teams and external vendors. 

This is one view of the acceptance criteria for the owner dashboard and some of the designs created for this owner’s page. As the design team looked through the desires of the Product team, our Club Partners, and the owner research performed we relied heavily on the data on hand from the old site to inform priorities of actions for this new dashboard. 

With this desire in mind, our designs went through several iterations, each tested with a group of sponsor owners to validate some of the team’s assumptions, and through these steps we agreed to focus on a few key priorities for the page: activate, inform, and inspire. 

Activation focuses on that CEO priority and streamlining the booking process for our owners. Ensuring easy access to searching and booking their next vacation was a primary objective to the page fulfilled this directive from Mike Brown, our CEO. The search function is the primary objective on the page and allows ease of use in searching for destinations and dates to aid our owners in finding that availability across our portfolio of destinations. 

Secondarily, the page should inform the owner of a few key facts about their ownership like their contract and owner or member numbers, their VIP Status, and most importantly their upcoming vacations and any travel deals the club may be having in conjunction with their ownership level. 

Many of our owners still like the personal interaction of our associates and prefer to call to reserve their next vacations, so ensuring their contract and membership/owner numbers are readily available. This helps speed the owner through these calls without the need to shuffle through papers to find integral information to complete their reservations. 

Finally, the tertiary objective should be to inspire them to always be thinking about their next vacation, or as it has become referred to in the club as their bucket list. We included a panel that showcases the saved resorts for ease of access in researching and booking on this dashboard. 

The team then works together to develop the acceptance criteria that guides our design work. Ensuring that all of the required information is available and the priority of this items are in line with the objectives of the page. 

We include an application statement definition, or problem statement, that easily explains the purpose of this page and frames the following acceptance criteria. 

Problem Statement

As an owner/member that has logged in and navigated to the Ownership/Membership section, I would like to see my ownership/membership information so that I can see my financial information, exchanges, and contract information. 

Acceptance Criteria:

There should be a headline for ‘My Ownership/Membership’
There should be a sub headline ‘Member Number’ and associated icon
It should display the logged in user’s member number below
There should be a sub headline ‘Membership Type’ and associated icon
It should display the logged in user’s membership type below
It should display the logged in user’s membership expiration date below
If there’s an expiration date, format should be ‘Expiration Date: Mon. DD, YYYY’
If there’s no expiration date, it should be removed
There should be a sub headline ‘Status’ and associated icon
It should display the logged in user’s status below
It should display the logged in user’s status expiration date only if they’re VIP below
If there’s an expiration date, format should be ‘Expiration Date: Mon. DD, YYYY’
If it’s grandfathered, it should display ‘Grandfathered’ – API Call for this
If there’s no expiration date, it should be removed
There should be a sub headline ‘Additional Programs’
It should list any additional programs if applicable below
Financial Details: Payments, Loans, & Assessments:
Note: Design is TBD for this component
Note: Will be covered in a separate epic
There should be a headline for ‘My Contracts (#)’
The number of contract(s) should be visible in the headline
There should be a default of 2 contracts visible
There should be the ability to expand to ‘See <x> More Contracts’
The remaining number of contracts should be displayed in the expansion button
When the user clicks the expansion button, the additional contracts should be visible
There should be a headline for each contract ‘Contract <contract #> with the following information:
‘Owner/Member(s)’ sub headline
This should display the owner/member(s) listed on the specific contract below
‘Contract Type’ sub headline
This should display the contract type from the specific contract
‘Contract Details’ sub headline
This should display the contract details below
Contract Details Tool Tip that the user can click on
‘Use Year End’ sub headline
This should display the use year end date for the specific contract below
Month and Day
‘Points Owned’ sub headline
This should display the points owned on the specific contract below
‘Home Resort’ sub headline
Only display this section if applicable
Ex: Not applicable for Bonus Contract
Ex: Not applicable for Discovery Contract
This should display the home resort name CTA below that will take the user to the resort’s landing page
This should display the City, State for the home resort
Only display this if applicable
Ex: Not applicable for Club Wyndham Access contracts since it’s across all Club Wyndham Access resorts
‘Reciprocal Resort’ sub headline
Only display this section if applicable
This should display the reciprocal resort name CTA below that will take the user to the resort’s landing page
This should display the City, State for the reciprocal resort
There should be a headline for ‘Point of Contact’
There should be intro copy for ‘To make changes to your point of contact, please call (TBD)’
There should be a sub headline ‘Owner’ and associated icon
It should display the owner’s first and last name below
There should be a sub headline ‘Address’ and associated icon
It should display the point of contact’s address below
Street address, city, state, zip code, and country
There should be a sub headline ‘Email’ and associated icon
It should display the point of contact’s email address below
There should be a sub headline ‘Phone Number’ and associated icon
It should display the point of contact’s phone number including country code below

Design Note: Background should be grey not blue to match the ‘My Points’ and ‘Exchanges’ pages’ designs.

The tickets in Jira are used to work through the development, providing updates as well as links to design documents for review, comment, and acceptance. Once the feature is complete and tested, the tickets are closed and any new work would be associated with a standard defect procedure. 

 

Conclusion

As I have been training my team in design at scale, there is a lot more required to working at the enterprise level than most of them have been used to in their design careers to date. The process, procedures, and requirements that guide the entire team need to be focused on solving the business need, not just making something pretty.

The ability to solve an instance is what many good designers may be able to do but the ability to scale that solution to an enterprise level that allows the design to obvious, easy, and repeatable is one of the hallmarks of an enterprise designer. Doing the homework that defines what we will solve and communicating that clearly through every step of the journey is how we succeed at delivering success for our owners who use our digital products. 

Imagery
Club Wyndham dashboard mobile concept
Club Wyndham dashboard mobile priorities
IBM Team Roadmap

IBM Team Roadmap

Overview

As we focus the core security design team for the near and long-term planning we want to align our: strategy, ideals and goals to IBM Security division as well as the larger IBM design community.

These items are codified in our SWOT analysis, design manifesto and our goals; which primarily focus on the brand personality, a common UI framework and general education.

Strengths, Weaknesses, Opportunities, and Threats (SWOT)

Strengths

IBM’s two greatest strengths are the positive brand positioning that we maintain across the globe and, more specifically, the ability of IBM Security to cover the entire spectrum of needs for companies of any size.

The Security design team’s strengths include a deep domain expertise, exceptional design capabilities and an innate ability to reduce complex problems into simple discreet tasks.

Weaknesses

Regardless of IBM’s high brand recognition and diverse offerings in the Security market, the public is simply not aware of our products. If they have any awareness it usually revolves around our legacy in personal computers and is not relevant to our current business offerings.

Despite the design team’s understanding of the industry, there is still an significant amount of learning needed to be able to provide design solutions that work within the constraints of the archetypes and their workflows.

Opportunities

Since IBM continues to be one of the most respected global brands, we are afforded a certain level of permission to be a part of the discussion about security from enterprise-wide clients to subject matter experts.

The Security design team is part of the larger IBM Design community, and we have the ability to effect change within the company from the highest levels. As a larger corporate initiative, our team can expand on the mission to create solutions and learning opportunities that solve business problems, build brand equity and elevate the quality of our products in the marketplace at scale.

Threats

Competitors in the marketplace have more established recognition in the space and have built customer loyalty through their services.

The single biggest threat that the Security design team faces as we move forward with our charter is the collaboration with our dedicated partners. There is still a bias against design thinking across pockets of the company and an understanding of the value of design as a business practice that we need to overcome.

Our Manifesto

We believe…

  • in our customers.
  • intelligently designed experiences can solve the most complex problems.
  • in the power of collaboration to build better products.
  • in, ideas but, people more.

We want to…

  • break barriers and build bridges.
  • develop solutions, where others only see problems.
  • create new ways of thinking about design’s importance in business today.
  • challenge the status quo not to be contrary, but to be evolutionary.
  • think big, fail fast, learn and move on.

We know…

  • simple doesn’t mean easy.
  • an opposing viewpoint is a chance to iterate.
  • the strongest ideas can come from unexpected places.
  • ideas are cheap, execution is paramount. no one ever built a statue to a critic.
  • GA is only the beginning.
  • that we love our customers.

Short-Term Goals

Staffing

Continue to enhance the design team’s design capabilities and understanding of the security domain.

Work with the embedded designers (Trusteer, AppScan, X-Force, QRadar, etc.) on a regular basis to more closely align their efforts to the core team and elevate their skills and output to the level required by IBM Design.
Update the welcome kit (overview for new security team members) to include broad thinking of the security division as well as tactical elements that help new partners get productive quicker.

Core Personality

Unify the broad presentation of IBM Security from internal communications (i.e. Power Point/Keynote, guides, etc.) to product implementation(s) and begin influencing the customers’ perception of the brand through alignment of common UI framework, design patterns and editorial tone via:
User Research
Persona Development
Brand Guidelines
Style Guides & Documentation
UI Framework
Ambassador Program

Projects

Guide associated Hallmark projects through their development process with the Security core team.

Work with the legacy products that require assistance in a manner that supports our goal of elevating the quality of their offerings to the level of IBM Design. Ensure they are gaining the appropriate level of support through sprints, design consultations and direct interaction with the core design team.

Become an integral access point for our partners and team members to align our projects across the Security division.

Long-Term Goals

Staffing

Increase the core team that can manage the personality, Hallmark projects and ancillary work. Also allow for the fluctuations of workflows across those projects and be able to better manage the exceptional requests that come into the studio.

Core Personality

Expand internal branding efforts and work with the marketing and plm teams to integrate appropriate elements into the customer-facing brand. Integrate the successful internal branding elements into external components to align our brand’s inward and outward presentation. Creating one security brand for both internal and external communication.

Projects

Work with Security leadership for long-term visioning projects that support business goals of the division.

Integrate new acquisitions into our established design processes to insure there is a path for new products to align with core Security design.

Increase the number of Hallmark projects we can support to three at any given time.

3-Year Plan

Year 1 – Foundation

  • Appraise existing projects to determine standard user interface (UI) components
  • Codify design standards in an extensible, consumable format for our teams and partners
  • Normalize design standards across embedded design teams
  • Work across Marketing, PLM and Development teams to evangelize the benefits of design in product design.

Year 2 – Fortify Vision

  • Work with Security leadership to expand the reach and influence of design in our product process
  • Expand core design to include dedicated motion designers and writers into the pool of required skills for Security Design
  • Develop “ambassador” program to educate about core Security Design thinking
  • Begin to support Marketing on customer-facing brand projects

Year 3 – Scale

  • Refined career path for all disciplines within Security design
  • Ensure all Security projects have access to design resources to support their product needs.
  • Release common framework to the community to illustrate our design leadership in the Security industry

Overview

As we focus the core security design team for the near and long-term planning we want to align our: strategy, ideals and goals to IBM Security division as well as the larger IBM design community.

These items are codified in our SWOT analysis, design manifesto and our goals; which primarily focus on the brand personality, a common UI framework and general education.

Strengths, Weaknesses, Opportunities, and Threats (SWOT)

Strengths

IBM’s two greatest strengths are the positive brand positioning that we maintain across the globe and, more specifically, the ability of IBM Security to cover the entire spectrum of needs for companies of any size.

The Security design team’s strengths include a deep domain expertise, exceptional design capabilities and an innate ability to reduce complex problems into simple discreet tasks.

Weaknesses

Regardless of IBM’s high brand recognition and diverse offerings in the Security market, the public is simply not aware of our products. If they have any awareness it usually revolves around our legacy in personal computers and is not relevant to our current business offerings.

Despite the design team’s understanding of the industry, there is still an significant amount of learning needed to be able to provide design solutions that work within the constraints of the archetypes and their workflows.

Opportunities

Since IBM continues to be one of the most respected global brands, we are afforded a certain level of permission to be a part of the discussion about security from enterprise-wide clients to subject matter experts.

The Security design team is part of the larger IBM Design community, and we have the ability to effect change within the company from the highest levels. As a larger corporate initiative, our team can expand on the mission to create solutions and learning opportunities that solve business problems, build brand equity and elevate the quality of our products in the marketplace at scale.

Threats

Competitors in the marketplace have more established recognition in the space and have built customer loyalty through their services.

The single biggest threat that the Security design team faces as we move forward with our charter is the collaboration with our dedicated partners. There is still a bias against design thinking across pockets of the company and an understanding of the value of design as a business practice that we need to overcome.

Our Manifesto

We believe…

  • in our customers.
  • intelligently designed experiences can solve the most complex problems.
  • in the power of collaboration to build better products.
  • in, ideas but, people more.

We want to…

  • break barriers and build bridges.
  • develop solutions, where others only see problems.
  • create new ways of thinking about design’s importance in business today.
  • challenge the status quo not to be contrary, but to be evolutionary.
  • think big, fail fast, learn and move on.

We know…

  • simple doesn’t mean easy.
  • an opposing viewpoint is a chance to iterate.
  • the strongest ideas can come from unexpected places.
  • ideas are cheap, execution is paramount. no one ever built a statue to a critic.
  • GA is only the beginning.
  • that we love our customers.

Short-Term Goals

Staffing

Continue to enhance the design team’s design capabilities and understanding of the security domain.

Work with the embedded designers (Trusteer, AppScan, X-Force, QRadar, etc.) on a regular basis to more closely align their efforts to the core team and elevate their skills and output to the level required by IBM Design.
Update the welcome kit (overview for new security team members) to include broad thinking of the security division as well as tactical elements that help new partners get productive quicker.

Core Personality

Unify the broad presentation of IBM Security from internal communications (i.e. Power Point/Keynote, guides, etc.) to product implementation(s) and begin influencing the customers’ perception of the brand through alignment of common UI framework, design patterns and editorial tone via:
User Research
Persona Development
Brand Guidelines
Style Guides & Documentation
UI Framework
Ambassador Program

Projects

Guide associated Hallmark projects through their development process with the Security core team.

Work with the legacy products that require assistance in a manner that supports our goal of elevating the quality of their offerings to the level of IBM Design. Ensure they are gaining the appropriate level of support through sprints, design consultations and direct interaction with the core design team.

Become an integral access point for our partners and team members to align our projects across the Security division.

Long-Term Goals

Staffing

Increase the core team that can manage the personality, Hallmark projects and ancillary work. Also allow for the fluctuations of workflows across those projects and be able to better manage the exceptional requests that come into the studio.

Core Personality

Expand internal branding efforts and work with the marketing and plm teams to integrate appropriate elements into the customer-facing brand. Integrate the successful internal branding elements into external components to align our brand’s inward and outward presentation. Creating one security brand for both internal and external communication.

Projects

Work with Security leadership for long-term visioning projects that support business goals of the division.

Integrate new acquisitions into our established design processes to insure there is a path for new products to align with core Security design.

Increase the number of Hallmark projects we can support to three at any given time.

3-Year Plan

Year 1 – Foundation

  • Appraise existing projects to determine standard user interface (UI) components
  • Codify design standards in an extensible, consumable format for our teams and partners
  • Normalize design standards across embedded design teams
  • Work across Marketing, PLM and Development teams to evangelize the benefits of design in product design.

Year 2 – Fortify Vision

  • Work with Security leadership to expand the reach and influence of design in our product process
  • Expand core design to include dedicated motion designers and writers into the pool of required skills for Security Design
  • Develop “ambassador” program to educate about core Security Design thinking
  • Begin to support Marketing on customer-facing brand projects

Year 3 – Scale

  • Refined career path for all disciplines within Security design
  • Ensure all Security projects have access to design resources to support their product needs.
  • Release common framework to the community to illustrate our design leadership in the Security industry