JackThreads - Web Redesign
2015
OBJECTIVE
Optimize the end-to-end user experience by improving usability and driving KPI increases for overall revenue growth. Additionally, incorporate new branding elements as part of a larger rebrand effort that coincides with the launch of the new JT private label.
MY ROLE
Wireframe Design, Functional Behavior Definition + Specification, Art Direction
Homepage
Global Navigation
This was my first project working directly with senior executive stakeholders at JackThreads, so I kind of pulled out all the stops when putting together presentation materials. This was the first time I needed buy-in from anyone outside of Product or Tech at the company, they did not know me at all, and I knew that establishing trust from the outset would be incredibly beneficial. So I dusted off my agency hat and approached them as if they were my longtime clients. It must have worked because not a single design change was requested and we got started on development without any delay.
1
DISCOVERY & VISION
Data analysis
Identification of UX issues
Definition of design objectives
Design inspiration
2
WIREFRAMES & PROTOTYPES
3
FINAL VISUAL DESIGNS
Homepage
THE ASK: Make the homepage less overwhelming, more aesthetically pleasing, and serve as an entryway to the core parts of the new JT site experience. Oh, and the backend tech team is swamped so don't require too much of them.
Wireframes AKA "Math"
Final Design
Hover/tap to animate scrolling
Once I determined that a 2-way fluid responsive hero (with elastic scrolling) would give us the visual impact and "sizzle" that we wanted for the rebrand using minimal backend development effort, making it work really just became a numbers game.
The responsive behavior of the hero images is one of those things that is way more complicated to design than it is to develop. Coming up with the asset size requirements with a reasonable safe zone that will work for varying types of photography (while also minimizing asset production effort) was pretty challenging.
It took some initial stabs in the dark, TONS of math, and a lot of pressure testing with real photography across our most common browser sizes to make sure that this concept would work and look great. There was definitely a point when I realized that I had taken a bit of a leap of faith by committing to this concept before knowing that it would work for sure, and not leaving much room in the timeline if we needed to pivot. But having seen a few things in the wild that were similar to what I was trying to do, I knew this was possible and that made me confident that I could figure it out.
Category Pages
OBJECTIVE: Redesign the various product list page templates to achieve the following:
-
Merchandising flexibility to support various ways of presenting product assortments (ex: category, brand, curated)
-
Operational ease
-
Improve upon the user experience
-
Elevate the visual design as part of our rebranding efforts and launch of new private label collection
DESKTOP - BEFORE
DESKTOP - AFTER
MOBILE - BEFORE
MOBILE - AFTER
CATEGORY PAGES
Page Hero
The page hero module was designed to balance consistency with variability. By supporting a fixed-height image (optimized to peek content below) and live text fields, shoppers experience a consistent visual style as they navigate through different sections of the site. And the inclusion of 2 type style settings as well as making every text field (and even the module itself) optional allowed us to support a wide variety of photography and merchandising needs. We later added support for brand logos as well as a centered safe zone option to better support some common use cases of the commerce design team.
DARK IMAGE TYPE STYLE
LIGHT IMAGE TYPE STYLE
RESPONSIVE BREAKPOINTS & FLUID BEHAVIOR
CATEGORY PAGES
Anchor Bar & Grid Heroes
The ability to break up a page into sections was something that the visual merchandising team really wanted, and also something I felt would improve the browsing experience for customers. The section links at the top of the page not only provided an overview of the product selection, they provided quick access to products of interest by linking down the page to their corresponding product section. I chose to link to anchored sections rather than separate pages in order to encourage discovery, avoid the creation of "dead ends", and to minimize operational effort for our merchandising team. Making anchored sections optional as well as having three image options for grid heroes provided the necessary flexibility to merchandise the wide variety of product listing pages that JackThreads typically curated.
GRID HERO W/ PORTRAIT IMAGE
GRID HERO W/ NO IMAGE
CATEGORY PAGES
Product Tile & Grid
When it comes to an e-commerce site, the product tile is one of the most important elements to design due to its ubiquity. Because this redesign coincided with our rebrand and private label launch, we were able to make significant operational changes to our product photography and naming. We began to shoot products off-figure on a clean white background, which allowed us to optimize the image aspect ratio and create a striking and uniform product grid for improved scanability. We also devised fluid responsive behavior that maximized the size of product images as well as the number of visible products in view for every sized viewport. Additionally (and most impressive in my mind), we worked with tech to create an improved method for lazy-loading content that fixes the usability issues that exist with the "infinite scroll" approach (and no, it's NOT pagination which has its own issues).
RESPONSIVE BREAKPOINTS & FLUID BEHAVIOR
CATEGORY PAGES
Filters
I could probably talk all day about these filters and the many decisions that went into them, but I'll stick to the highlights. I have always disliked the experience of using vertically stacked filters (on non-mobile devices) because they can be cumbersome to engage with and they reduce the real estate afforded to displaying products. This horizontal filter design aims to create a better distinction between active filtering and browsing modes by giving filters their own dedicated space for shoppers to easily view and engage with. In order to display more relevant filters first, I analyzed historical filter usage data by category and set a unique and optimal order for all evergreen categories (with a fallback order for one-off pages based on aggregate data). Additionally, multi-select support and instantaneous refreshing of filters and products mean that shoppers can never filter themselves to 0 results.
Collapsed When Scrolling
Displaying the exposed filters by default makes shoppers aware of them, but as they scroll past them this collapsed version sticks at the top of the browser below the navigation. This creates a "best of both worlds" situation between an inviting exposed filter and the minimal occupancy of a collapsed filter bar.
Accessible Always
Making the filters sticky enables them to be expanded and engaged with at any point. This means that shoppers can easily choose to filter after they have already begun browsing, or someone who has filtered the page can change their selections later on without having to scroll to the top of the page.
Slick In-Line Refreshing
Each filter selection triggers a new search query with results refreshing in real time to give shoppers faster access to products of interest. To avoid making this a jarring experience when filtering after scrolling down the page, we worked with tech to create the illusion that the user's scroll position remains static as the products refresh and display below the expanded filter menu. The reality is that this "expanded" filter menu has been replaced with the exposed filters at the top of the page, with the user being taken there seamlessly. This allows users to access the beginning of the result set without a visual page refresh or dizzying scroll animation.
