Kellie Kowalski


Style Concierge email design

The Gorsuch family business has been delivering high-end, high-quality apparel and ski gear for two generations. They wanted to update their brand as well as their e-commerce site and email marketing.

Our design team consisted of myself as the UX/UI lead, our Digital PA & Visual Designer, and an Art Director who created the overall brand direction.

Pain Points

The company was moving their e-commerce site to a new platform and was taking that opportunity to address some of the issues they’d experienced.

For starters, the old site wasn’t responsive and was virtually impossible to navigate on a mobile device. The process of ordering was also not very clear, so we knew we needed to focus on giving users a clear path to purchase.

The caveat, however, was that we couldn’t really edit their existing information architecture, which was a point that caused user confusion. As a result, we focused on ways to make the purchase path clear with new responsive templates for the existing user flow.

The Product Page

As the most important page of any e-commerce site, the product page was where we started and spent most of our efforts to hammer out the flow to the cart.

I reordered the content in the initial view, by moving the color, size, quantity modules up and giving the cart button a greater emphasis. The item description moved further down.

The old site was pushing Facebook and Twitter to share the product link, but our research showed that Pinterest pins vastly outnumbered the other platforms combined. After all, a style board where you can collect wardrobe ideas makes more sense than sending your network a link to a cardigan. Since they still wanted a range of share icons, we put Pinterest at the top of the list.

Mobile wireframes showing the layout of the product page.
Desktop wireframe showing the layout of the product page.
Additionally shows states for selected color and size, out of stock error messages, an example of a single color that's pre-selected, and a modal pane showing the size chart in a table.

Due to the restraints of the e-commerce system they used, we didn't have a lot of flexibility with how to display colors, sizes, and out of stock items. But we could control where things layed out in the page.

Curated wardrobe selections vs algorithmic suggestions.

The new platform could generate suggested items to go with the current product, and the client wanted to take advantage of that since it would allow some upsell opportunities to be automated.

But part of the appeal of Gorsuch is the curated ensembles, so we also designed an optional section to highlight matching items to create a single outfit.

Wireframes of the two upsell modules side by side.

Review system

The main goals for revamping the review system were instilling trust in quality, and alleviating call center inquiries.

The current site had a review system, but the form to enter one was long and a pain to get through, causing plenty of users to abandon the process. However, user-generated reviews prompt trust when buying clothes online, since users are getting an honest opinion of things like quality and fit, so we wanted to make the process of adding them easier.

One of the biggest roadblocks on the old form was that it asked for personal information, like first & last names, email, and mailing address. This isn’t something most users would offer up but it was put in place to verify a purchase.

To remove that complexity from the user, we instead decided to verify a purchase by requiring a login to add a review, since users who had made the purchase would have an account already.

Wireframes of the review user flow on mobile.
The review user flow on starts from a login modal. The next screen shows the item title, star rating selection, a checkbox for whether they would recommend the item to others, a fit selection scale that goes from too tight to too big, and a text area for any comments. The user can also give their size measurements and the size they purchased.
Desktop wireframes showing the review user flow.

I wanted to give Gorsuch shoppers a more systematic and well rounded review system instead of only having comments and a rating. There is a star rating system, a way to recommend the item (or not), and a scale for the kind of fit. The user can also give their size measurements to give an idea of how the size could relate to others.

Directory pages

The directory parent pages used to be a list of links under a hero image, which caused a dead end for most users. To update this, we turned it into a traditional product listing page and moved the old category link list into a mega menu dropdown.

This eliminated an extra step and moved users into the right place faster.

An open dropdown menu reveals a mega menu with the categories for the directory.

My initial layout involved keeping fixed collapsable filters on the size of the screen and used pagination to progress through large collections. However, one of the client’s requests on the redesign was to have larger images on the directory pages, so after some iterations, I moved the filters to a bar above the list items.

The client also didn’t think they’d have enough items in a category to justify pagination, so instead, we have an initial set and the more button reveals the rest that has lazy loaded for a “not quite infinite” scroll.

Wireframes showing the layout differences between the first and last iteration of the product directory page.

Directory quick view

They wanted to keep the quick view modal functionality from their old site, but the old version was simply a zoom module showing a larger photo with a link to go through to the product page.

Instead, we created a full height slide-out overlay that contained the product’s gallery, size & color options, and a main call to action button to add it to the cart from the directory page.

Quickview modal on desktop
A quick view modal has all the information to easily add it to the cart without going through to the detail page.

Brand Look & Feel

After the logos had been approved, we worked together on a handful of style tiles to flush out the brand design as it related to all things digital.

I always prefer to refine these in the browser. This helps the design team consider how interactivity plays into the brand standards, and makes sure our font choices render as well in the browser as well as they do in design software.

I also converted the finalized logo designs to SVG and made a few display rules based on viewport sizes.

Gorsuch logo shown horizontally, stacked, and with only the crest.

Transactional Emails

Transactional emails are an often overlooked part of the user journey. For the Gorsuch redesign, I wanted to ensure each communication with the customer had the right information in an easy to find presentation.

Transactional emails showing the order lifecycle.
The transactional email lifecycle includes the order confirmation, shipping confirmation, and returns/exchanges.

A modular email system

The team also needed to revamp the marketing emails, and the client requested a number of templates to be created. Instead, we developed a modular, mix & match system.

Thinking in systems, instead of templates, allowed our creative and digital teams to build a reusable set of contextual content blocks. This ensured no two campaigns were exactly alike while remaining on brand.

Our team’s art director created a handful of module options, which I oversaw to ensure it could be coded appropriately for a responsive email. I also flushed out the color contrast using the brand palette, to ensure no one inadvertently used an inaccessible combination.

A grid showing all the possible module types and variations that can pass AA color contrast ratios.
A grid showing a selection of campaigns using different module combinations.
The modules could be combined to create a variety of layouts.

If we needed to break out of the mold for specialty campaigns, however, we could still do so. These custom designs then stood out even more from the average email.

Specialty campaign examples
The launch email uses a new design for the headline and hero sections. The holiday email uses an animated gif of a pine tree in the forest decorated with twinkling lights.
Gorsuch Style Concierge email design
The style concierge has a completely custom designed template that doesn't use any of the pre-made modules.

We then ran A/B tests to see how well these emails performed against a control group using the old method of custom designing a single image. This resulted in an increase of average revenue per email, average open rate, and average click through rate.

In the end, this approach increased revenue for Gorsuch, and won a Las Vegas Digital Media Award for us!

A mockup of a campaign shown on both mobile and desktop.

Inspire Korea

Next Project