The Problem

Marriott's Learning and Development experience design team was extremely lean and agile working on multiple projects at one time. Often, the speed at which products were designed was so fast that there would be design elements and work overlapping based on the problems trying to be solved. There was a major gap being that there was no design library where we could all design products more efficiently and speak a similar visual language. Additionally, when designing products for brands, there was a major lack of consistency and flow with both UX and UI.

Design Process

As the creator and librarian of the design library, it was necessary to understand what components were already existing on our internal sites to do a cross-analysis of what works best for our learning products and what we could retire as old elements. In the initial design system phase, I worked to uncover some of the design overlaps in current products as well as help team members ideate on what new elements could be created. Parallel to the analysis, the library build process had begun and started to evolve into something usable and scalable for variety of internal projects. The challenge was making sure how to create components and elements that are easily changeable for all 30 brands with different fonts and colors. Along with designers feedback, I also worked heavily with developers to understand what would work best for them when it came to producing the work that was designed. Through numerous conversations and open discussions, we agreed on using the design library as a way to speed up the development process.

Solution & Success Measure

This design system was started from scratch using Sketch and was created in less than 6 months. It consists of all font styles and color specifications of 30 Marriott brands with all the components and design elements for web, tablet, and mobile views. All design library components and UI elements were used to create Marriott International's first central learning platform, the Digital Learning Zone, which significantly decreased the turnaround time for developers when adding new features. It's also currently home to 4 major projects on Marriott L&D sites. It is consistently being chosen as the new design standard elements for new projects and used by the development team for all product implementation.