Pattern libray for Hem

With the task of launching a new brand and its requisite digital properties in four months ahead of us, I set out to begin the design process with a comprehensive and "living" pattern library for Hem's fully responsive ecommerce site.

Though the brand's look and feel were still in a formative stage, we had to build all aspects of the site in parallel to meet our launch timeline. To further the challenge, we had a development team accustomed to building from pixel-perfect mock-ups rather than schematics or wireframes and a brand design team with little experience with interactive digital products. It was a perfect opportunity to define a new process for designing the user experience of Hem.com.

I collaborated with Engineering leadership to pair a UI designer from my team and a front-end developer as partners in establishing a live-code pattern library of all navigation and page frameworks, responsive content-logic, interactive elements, and style guide. Temporarily decoupling the functional and visual design of the site permitted our teams to work in simultaneously in separate tracks. It also allowed UX designers to serve more effectively as bridges — not just intermediaries — between the creative director for the new brand and engineering teams to deliver on schedule.

 [Design director, 2014]