Wynn Las Vegas
Design System
The commercial website receives millions of visitors every year. The design system brought a rapid design iteration and consistent experience and extension of the Wynn's brand value.
.png)
The commercial website receives millions of visitors every year. The design system brought a rapid design iteration and consistent experience and extension of the Wynn's brand value.
When I started working at the Wynn Resort in Las Vegas, the product team had to rely on marketing brand guidelines to execute website and booking engine updates. This represented a slow down in how we could deliver updates and how to work with developers.
Although they Wynn has a great design team, the CMS website is controlled by a different team and only able to update content.
The different components, fonts, interactivity was not based on atomic design neither considered responsiveness and templates. The updated Design System would have to respect the Wynn brand while making it functional and efficient for our internal teams.
As an initial phase, we concluded competitor research to utilize common hotel/resort UI/UX patterns. The guests tend to explore other sites in search for better prices or accommodations. Large images and concise copy was important.
The Wynn difference is on the details. When visiting the hotel, a guest is immersed in pleasant aesthetics and ornaments that evokes classic European luxury.
Following the Atomic Design methodology, I designed the basic elements used in web: colors, typography, spacing, shapes and shadows.
Following brand standards and based on the "molecules" created before, I started building elements that will help build content pages, from headlines for proper SEO, images, galleries and interactive elements, such as carousels and FAQ accordions.
Although magenta is our brand’s primary color, we chose a green-turquoise palette for the web. Magenta felt too bright for digital use and, being close to red, risked being mistaken for error states. The green-turquoise alternative offers better clarity and accessibility in the UI.
The Title Block component consists of two key elements: an Eyebrow and an H1 Title. Together, they grab attention and set context, helping the content stand out from other elements on the page.
Hero Blocks combine a hero image with a Title Block to create a strong visual introduction. To support better developer hand-off, I documented how the layout adapts across screen sizes. I also included character count guidelines to help the marketing team craft taglines that fit the design constraints.
Scaffolds are a core component of our website, primarily used by the marketing team to showcase features and amenities. Each scaffold includes large 16:9 images to convey a broad visual scope and ensure adaptability across different screen sizes. We opted for a ghost button style to minimize the number of primary buttons on a page and maintain visual hierarchy.
A gallery component was a valuable enhancement to our landing pages, allowing us to showcase amenities in a more immersive and visually detailed way. It effectively conveys the sense of luxury and reinforces the brand’s voice. To support SEO, we included headline and caption areas for each image, while swipe gestures were integrated to ensure a smooth and intuitive mobile experience.
The final step in our design system was the creation of structured templates, which proved highly valuable for both the design team and developers by significantly reducing design and development time. I defined a clear template format that supports the storytelling of each landing page, ensuring consistency in layout, content quality, and brand presentation. One of the first templates implemented was for the Wynn Golf Course, setting a strong foundation for future pages.
.png)
