Deck of Scarlet

Deck of Scarlet is a US-made beauty brand that offers a makeup subscription service, shipping to Canada, UK/Europe, and the USA. The products are delivered every other month and include the colors needed to complete multiple full makeup looks, inspired by YouTube beauty vloggers.

The client came to us with an already polished design for both desktop and mobile. In theme development, just implementing a layout is simple – one of the major parts of the work is thinking through the logic behind each element, and how theme design and functionality should work together. Here are some of the most interesting custom elements we implemented in the Deck of Scarlet theme.

This block on the main page provides the possibility to see what was used to create these particular makeups, thus helping customers to make a purchase. On mouse hover, a photo becomes colorized and some points appear on the faces of the models, featuring a specific product. The points are clickable, and by clicking on them a small popup appears with the name of the product, its price, and the “Shop Now” button. Also, if the product is currently out of stock, the expected resupply date will be indicated.

This element, like the rest of the theme, is fully customizable from the corresponding theme setting. The store admin can change any element, from the background photos to the popup details. The points themselves can be attached to any product from the store, and moved anywhere on the photo by setting the coordinates on the X- and Y-axes.

This functionality is also accessible for people with disabilities both from the keyboard and with a screen reader.

Throughout the whole website, there are places with highlighted text. This text is not hardcoded into the theme; it can be changed on any page of the website via the theme settings. It’s possible to highlight any text and choose any color for the background. The same is true for the main banners, where each element can be set up as well: all colors, fonts, text highlights, and backgrounds can be customized to fit any photo shoot or product.

In an ordinary theme, these banner images would be static, with the need to create new banners for even minor changes. With custom development, anything can be done through the theme settings with just several clicks.

The website is compatible with popular browsers, and adjusts well to any screen size. To make this possible, we used a specific technology stack combined with manual checking. First, we created a responsive layout, then made an extensive list of browsers/screen resolutions, and tested this layout on each of them, fixing any issues that appeared.

It’s one of the biggest advantages of developing a custom theme – with full access to the source code, there is a possibility to control and test everything, so we can ensure that the final result not only meets but exceeds all client’s requirements. Ready-made themes, unfortunately, don’t provide such freedom, which can often result in compromising on some issues.

Due to this thorough testing, there are no distorted or blurred elements on the Deck of Scarlet website – it looks good on any device, from mobile to an ultra-high definition TV.

Being a US-based business, digital accessibility was another key requirement from the client’s side. Upon completing the work, the website was accessible both from the keyboard and with assistive technologies such as a screen reader. The work was carried out in bite-sized chunks, with the large tasks divided into smaller ones – this way our accessibility team ensured that each element met the accessibility requirements. The team also coordinated with the designer on the client side to provide recommendations on the accessibility of some elements. In creating the website menus, the structure for each page, headings, landmarks, forms, content carousel and other elements, we followed the W3C accessibility patterns and WCAG 2.1 Level AA guidelines to ensure the best accessibility practices.

The review block on the Product page was integrated into the theme with an app. The app provided the functionality of displaying reviews and ratings, but its default style didn’t fit the website design. We changed the app’s visual style according to the client’s layout, and placed every element on the page in the way intended.

The code of the theme was written in one style according to certain guidelines, and includes comments to clarify which elements are responsible for what purposes. This makes the theme easy to work with for the in-house developers, so the costs of additional customizations in the future would be significantly reduced.

Being a US-based business, digital accessibility was another key requirement from the client’s side. Upon completing the work, the website was accessible both from the keyboard and with assistive technologies such as a screen reader. The work was carried out in bite-sized chunks, with the large tasks divided into smaller ones – this way our accessibility team ensured that each element met the accessibility requirements. The team also coordinated with the designer on the client side to provide recommendations on the accessibility of some elements. In creating the website menus, the structure for each page, headings, landmarks, forms, content carousel and other elements, we followed the W3C accessibility patterns and WCAG 2.1 Level AA guidelines to ensure the best accessibility practices.