Molekule UI Development Projects

My work with the Growth team at Molekule included development of user interfaces designed to drive sales for the direct to consumer e-commerce store.

Flexible Layout Component

This componet was developed as part of the site redesign with the goal of making content creation more self-serve for the design and content teams. This component allowed teams to produce pages in hours instead of days.

I noticed during early reviews of designs that each section of the page designs were similar and could be implemented using one component featuring simple configuration options. The final component supported a variety of layouts including full-width, 50-50 and 25-75 splits with options to swap the order of the columns. Background media could be full-bleed static images or short looped videos. Copy could be vertically aligned at the top, middle or bottom of the module. The bulk of the work involved the content modeling and configurations needed in the Prismic headless CMS to support all of the options required.

Layouts featuring alternating 50-50 splits 50-50 layout with full-bleed background media 25-75 layout feature full bleed media and copy aligned to the top of the module 25-75 layout feature full bleed media and copy aligned to the bottom of the module Full-width layout with full-bleed background media and copy center aligned in the module.