Vivian is a New York City-based designer who specializes in Web/UI Design, Product Design, and Art Direction. Over the past five years, she has had the pleasure of working with the talented team at J.Crew to design & art direct editorial content and new features for jcrew.com.
J.Crew Homepage Responsive Redesign
I was responsible for leading the redesign of jcrew.com’s homepage to its new responsive layout. The challenge was exposing editorial content from our top departments as well as promotions and new arrivals entry points on first land. The solution creates a flexible template that meets the need for frequent content updates, and the square modular design allows for stories to easily be swapped and rearranged on the page. Our previous homepage relied on a carousel of six editorial stories. The new user experience provides even more storytelling opportunities that are presented directly to the user on scroll.Visit the pageVisit the page
Sunglasses Digital Experience
In early 2016, J.Crew launched its first-ever line of sunglasses. The launch required a new e-commerce experience, and I was lucky enough to own the design. Our goal was to design a responsive shop that highlighted the different product personas and showcased all of the colorways on-figure. The design provides a unified experience for both the women’s and men’s shops. On desktop, the on-figure images appear on rollover as the user browses the sunglasses. On touch devices, the user can swipe through a carousel to view them. The design also features a shape comparison at the top that doubles as a jump navigation.Visit the page
Customizable Handbag Feature
I was asked to design a shopping feature for the launch of a new customizable handbag. The customization options included monogramming and attaching various accessories (bag tags, coin purses, key fobs, scarves) which were each sold separately. Since each handbag came with one key fob already included, there was potential for confusion about what needed to be purchased separately. The challenge was to explain this to users and show them how they could personalize their bag. The solution was to break down the customization options into a three-step slider: 1) the bag as-is, 2) monogramming, and 3) extra accessories. To show users the possibilities, we included a section with pre-styled combinations. Finally, the experience encourages users to create their own combination with an in-page expandable array that allows you to shop every piece in every color.Visit the page
Expandable Shopping Guide
I championed the use of expandable product drawers in several editorial features. The introduction of expandables offers users a full shopping experience without leaving the page. Previously, guides linked to separate shopping pages to prevent overwhelming the user with content. The challenge was to visually encourage users to engage with the expandables. The design solves this by presenting the first expandable open and utilizing sliding animations so that the user understands the functionality and can choose which styles to explore. The expandable design encourages increased user engagement by simultaneously presenting extensive editorial content and a wide array of product.Visit the page
Mobile-First Outerwear Guide
This outerwear guide was one of J.Crew’s first responsive experiences. Over the past few years, I helped lead the initiative to increase focus on mobile through responsive design. Working with the front-end developers to understand the technical differences, and teaching myself the principles, I was able to guide the web team on mobile-first design. Prior to responsive, teams utilized full-page image-mapping. Now, our teams rely on grid-based layouts with live text. This design here was adopted across the company as a starting point for responsive features.