SiteMinder Design System
Project Type
Design System
Date
2019–Present
The SiteMinder Design System (SUI) is both a library of interconnected design patterns as well as a collection of shared practices and principles that help consistently shape our suite of SiteMinder products.
SUI helps Designers and Engineers work collaboratively, uniting both design and engineering across the company, to help build amazing experiences for our Hoteliers. It features a fully functional Figma library with components that have in-built properties that enable our designers to build product that have parity to the component library our engineers use.
SUI is proven to increase engineer efficiency by 71%.
Background
SiteMinder provides hoteliers with the world’s largest open hotel commerce platform and gives them unbeatable revenue results. They aim to open up commerce to accommodation providers, bringing every hotel into a new era of hotel commerce.
SiteMinder’s main goal is to give hoteliers the power to market, sell, manage and grow their business from one place. In order to deliver on this they are building an open, smart, unified platform to drive demand, engage with guests and improve profitability.
One important pillar in achieving this goal is SUI.
Why build a design system?
Prior to 2019, SiteMinder had been using an open source component library, built in Vue, called Element UI. This library was poorly maintained with many issues not being addressed. Because SiteMinder had built their entire suite of products in this library they started to struggle how many minor and major issues were causing issues in their app.
SiteMinder decided that owning their own design system and component library, which would be maintained in-house, was the best solution to tackle this. Also the bespoke nature of the Hotel Channel Management industry also requires that some niche patterns and components be used that may not necessarily be used in a Design System or component library that is for more general use.
Another solution that a Design System would solve within the suite of SiteMinder’s products is to have every product within one Framework (Vue) instead of multiple (Angular, etc).
Goals
Increase efficiency
We want to enable Product staff at SiteMinder to design and build from a centralised location, quickly and confidently.
Align and unify
We want SiteMinder products to be in alignment, offering users are familiar and unified visual language across our entire suite.
Enable theming
We want to enable Product staff at SiteMinder to design and build from a centralised location, quickly and confidently.
Research
It’s important to note that conducting tests on a design system can be quite challenging. We have two types of users: paying customers, and our designers and engineers who use the system to build their products.
We have to understand how both user types are using SUI.
Quantitative research
Google analytics / Heap Analytics
In order to inform crucial design decisions early on, I combed through our Google Analytics stats to understand how our users are accessing our products. I focused on the following:
Screen resolution: What screen should our design team be designing for?
Devices: What is the % split between desktop, tablet and mobile?
Operating systems and browsers: What should we be testing on?
Survey: efficiency of SUI
Engineers were surveyed to estimate their time to build a specific page using SUI vs. not using SUI.
5 engineers were surveyed
SUI is estimated to reduce build time by 71.6%
Qualitative research
Navigation: Moderated usability testing
Usability testing was conducted on our header and navigation structure, using the new SUI components and designs. The primary goal of the testing was more about usability and less about how the product looked, but it was still insightful to understand if there were any challenges for our users on our new UI.
We tested face-to-face with 4 hoteliers/customers
Testing was considered successful
Navigation: Unmoderated usability testing
There was some concern on the discoverability over a proposed change to our navigation. Unmoderated testing was conducted via usertesting.com to understand the issue.
We tested with 7 users who have experience in the hotel industry
Testing was considered successful
SUI: SiteMinder UI
Initial challenges
When I was hired to start working on the Design System, SiteMinder was undergoing a rebrand alongside re-building their Products into one Platform. This was an extremely challenging time as there were so many conflicting priorities and unanswered questions, so it was hard to design the absolute best solution with so many gaps in our knowledge.
To help smooth out some of the challenges during this time, I regularly met up with the head of the Marketing design team who was heading up the rebrand, to ensure we were as aligned as possible on all things branding. The product design leads also helped contribute a few key components into SUI as they were best placed to do that since they were re-imagining SiteMinder’s Platform UX.
Lacking resources
By the time we had finished designing and building most of SUI’s component library, we were rapidly expanding and a lot of new designers were being onboarded onto the team. At that time we had a lack of proper documentation so I had to be available to answer the design teams questions at all times, which meant I was stretched quite thin. Resources were finally allocated to SUI and we hired a designer to help with documentation and some smaller component design work.
Design and code parity
It took an immense amount of planning and time but our library now has over 50 fully documented components. We’ve also documented SUI’s foundations, we have a design pattern library and various design and accessibility guides.
To achieve this not only did we have two designers, we also hired a PM, a Tech Lead and a Front-end Engineer.