Jennifer Lindsley, our graphic design team lead, came up with a new logo, fonts, and colors.

I was tasked with doing a re-skin of Decor Planet's website to match the new branding created by the graphic design team. My primary goal was to give the website a visual language and appearance that conveyed its high end, luxury product catalog.

My first step was to audit the website and document all its different base components so that I would have a solid understanding of the current use cases for what new components would be needed. During this process, I also discovered even more design inconsistencies between components. Another benefit of conducting this audit was that it helped push back on the requested development timeline because of the issues with inconsistencies in the global CSS. Check out the tool I used to help me document colors here.

In order to decide on how to best organize the components in the design system, I spent a lot of time studying how other design systems were organized. Polaris design system had my favorite organization system, so I used it as inspiration.

To develop the new look and feel of the site, I created rough outlines of what I wanted major pages to look like.

Before starting to wireframe the website’s layout in Figma, I first created a rough set of saved, default fonts and sizes in Figma. I based the sizes off the Polaris design system type scale, and later adjusted and removed sizes during my wireframing process.  I started with this step to try to speed up the high fidelity wireframing process and limit myself to a number of saved sizes.

I collaborated with our graphic design team to ensure the color palette for Decor Planet's new branding matched the style on the website and the new design system.

I reused a lot of icons from the previous design system for RTA that I had built, but I added some and changed the style from rounded to more edgy.

I created a new rounded button style for the website in collaboration, again, with our graphic design team to ensure it was up to brand standards.

The next step I took was to update existing components that I had previously created for the old design system. Since the timeline and development capacity for this project was restricted, the goal was to just update as many current components as possible with different color and fonts.

Most of the components currently used on Decor Planet's website did not exist in Figma because they were created so long ago and never altered much. One of the most time-consuming parts of this project was creating and structuring a lot of the website components that were going to be used for the first time.

As of 11/14/ 2022
Average order value increased: 11.74%
Revenue per visitor increased: 20.54%
Conversion rate increased: 7.88%
Bounce rate decreased: -7.53%
Pages per session increased: 9.25%
Average session duration increased: 9.83%
Site search usage increased: .69%

My primary goal was...