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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
