top of page

J.Jill

Redesigning site product category headers to reflect a more modern online shopping experience. 

TIMELINE: 2 weeks

​

TEAM: Just me!

​

MY ROLE: General research and design concepting

 

TOOLS: Photoshop, Canva

The Challenge

J.Jill is a women's clothing retailer offering in-store and online shopping experiences. As an in-house designer, I observed that we were investing a significant amount of time in designing product category headers with uncertain benefits from the customer's perspective.

​

Each month, there were about 30 full-width banners designed in a process involving creation of initial designs, 2-3 reviews with revisions, and release to the development team after intensive image extension work. Considering the heavy lift involved in this process, I took the initiative to investigate more deeply and determine if there was a better solution from a user experience and efficiency angle.

Competitive analysis for category headers

Overview of competitive analysis comparing J.Jill's category header with approaches from other similar brands

The Solution

After conducting best practices and competitor research, I proposed a new design approach to category headers to improve the site and optimize our internal workflow. 

noun-scissors-1069554.png
Screen Shot 2023-01-10 at 7.54.51 PM.png

Simplify and minimize space taken up by header

​

​

​

Support the user in locating desired products with subcategory links

​

​

​

Use clear & concise titles and sub-copy

JJILLCONCEPT1.gif
noun-writing-3843595.png

The Journey

I first conducted research on general best practices for category headers on e-commerce sites, which yielded the following essential points:​

​

noun-category-3535749.png

Include easily accessible subcategory links in headers for categories that encompass a wide range of products

  • Increases discoverability of subcategories

  • Facilitates easy navigation to specific product groups

  • Avoids product choice overload

noun-concise-3535751.png

Use clear, concise copy and imagery

  • Include titles and descriptions that match expectations

  • Utilize simple, generic images representing the entire category 

  • Don't let the header overpower the page

JJILLRESEARCH.jpg

To complement these ideas, I also researched how competitor brands designed and structured their category banners.

Screen Shot 2023-02-03 at 5.50.21 PM.png
Screen Shot 2023-02-03 at 5.50.13 PM.png
Screen Shot 2023-02-03 at 5.50.31 PM.png
Screen Shot 2023-02-03 at 5.50.01 PM.png
Screen Shot 2023-02-03 at 5.50.45 PM.png
Screen Shot 2023-02-03 at 5.51.02 PM.png
Screen Shot 2023-02-03 at 5.51.39 PM.png
Screen Shot 2023-02-03 at 5.51.48 PM.png
Screen Shot 2023-02-03 at 5.51.56 PM.png

The Final Product

I ultimately developed two concepts for an updated approach to category headers informed by design principles and research on other brands. Each is outlined below alongside principles that informed different aspects of the design.

Concept A

Screen Shot 2023-01-10 at 7.54.51 PM.png

Support the user in locating desired products

For larger categories like clothing and accessories, include subcategory image links so the user can easily drill down to focus on a specific set of products. 

CATBAN_CONCEPT1_LARGERCATEGORY_1A.jpg
CATBAN_CONCEPT1_LARGERCATEGORY_1B.jpg

Simplify and minimize space taken up by header

noun-scissors-1069554.png

For specialized sorts, include a brief inspirational moment so the user gets a sense of the collection and is inspired to browse products.

CATBAN_CONCEPT1_LARGERCATEGORY_2.jpg

Use clear & concise titles and sub-copy

noun-writing-3843595.png

Simplify and minimize space taken up by header

noun-scissors-1069554.png

For smaller self-explanatory product categories and sale sorts, eliminate the banner in favor of a simple title so the user knows where they are but shoppable products are the focus of the page. 

CATBAN_CONCEPT1_SMALLER CATEGORIES.jpg
CATBAN_CONCEPT1_SALE.jpg

Concept B

Screen Shot 2023-01-10 at 7.54.51 PM.png

Support the user in locating desired products

For larger categories, include one inspirational image with a clear title and subcategory links below so the user can easily drill down to focus on a specific set of products. 

CATBAN_CONCEPT2_LARGERCATEGORY_1.jpg

Use clear & concise titles and sub-copy

noun-writing-3843595.png

Simplify and minimize space taken up by header

noun-scissors-1069554.png

For specialized sorts, include a brief inspirational moment so the user gets a sense of the collection and is inspired to browse products. In this version I added a description so the user can learn more before browsing and the page will be more likely to come up in searches. 

CATBAN_CONCEPT2_LARGERCATEGORY_2.jpg

Use clear & concise titles and sub-copy

noun-writing-3843595.png

Simplify and minimize space taken up by header

noun-scissors-1069554.png

For smaller self-explanatory product categories and sale sorts, eliminate the banner in favor of a simple title so the user knows where they are but shoppable products are the focus of the page. Again, in this version I included a description to boost search and left-aligned the titles to maintain consistency. 

CATBAN_CONCEPT2_SMALLER CATEGORIES.jpg
CATBAN_CONCEPT2_SALE.jpg
bottom of page