JCPenney
“When it fits. You feel it.”
JCPenney is a popular American retail company, founded in 1902, that offers a wide variety of products, including clothing, accessories, and home furnishings. They are known for providing quality merchandise at affordable prices and have collaborated with designers over the years to introduce exclusive brands, such as Liz Claiborne®, Stafford®, okie dokie™, and Worthington™.
ROLE
Senior UX Designer
DURATION
8 Months
TEAM
Associate Creative Director, Junior Designer
TOOLS
Figma, Microsoft teams, JIRA, Zeplin
JCPenney's design system is transforming from a reactive platform to a responsive one. This shift aims to keep up with the rapidly changing online consumer behavior and the latest technological advancements. The new system will enable JCPenney to adapt to the ever-evolving digital landscape and provide a seamless user experience to its customers, regardless of the device they use to access the website.
CONTEXT
Creating a modern design system for a corporate organization with a history of rebranding and incorporating past branding can be daunting and time-consuming. The design team at JCPenney was overwhelmed by this and sought the assistance of a design consultancy.
OVERVIEW
How can we create a centralized resource that allows cross-functional partners to access and edit content easily?
CHALLENGE
Partner with the JCPenney design team.
Assess Product Description Page (PDP) files.
Create responsive components.
Document component updates.
Mentor junior designers.
ROLE
Given the complexity of the design system, my focus was on improving the PDP. To make impactful changes, I identified several areas on the page that required improvement. Since even minor adjustments could have significant and far-reaching effects, it was important to evaluate the PDP page systematically. This would help in determining the feasibility of introducing a modern look and feel.
ASSESSMENT
Stacked additional image view
Click to zoom opens new window
Color swatches stack
Size options also start to stack
“True Fit” opens a modal with size information
Product brand link is non-existent
Prize reduction is not clear
Social media is placed oddly
“Add to Cart” button competes with social
Size button is too small for large numbers
After conducting a comprehensive analysis of my competitors' technical and business approaches, I identified several areas where we could improve. Specifically, we could focus on enhancing the grid and zoom functions of our responsive design system.
RESEARCH
Competitor Grids
Below are two grids often seen by competitors.
Primary image top
Secondary images below
Limited up to 2 columns
Max of 6 image rows
Responsive layout
DIOR
Primary image top
Secondary images below
Limited up to 2 columns
Max of 6 image rows
Responsive layout
H&M
Grid based image view
Limited to 2 columns
Max of 5 image rows
Responsive layout
NIKE
Grid based image view
Limited to 2 columns
Max of 5 image rows
Responsive layout
NORDSTROM RACK
While the grid patterns from competitors are similar, the zoom functionality is unique to their brand.
Competitor Grid & Custom Zoom
Grid based image view
Limited to 2 columns
Custom Zoom
Isolated Zoom to images in place
Max of 4 image rows
Responsive layout
ADIDAS
Grid based image view
Limited to 2 columns
Custom Zoom
Zoom opens full page view
Max of 4 image rows
Responsive layout
AMERICAN EAGLE
Single column image view
Limited to 1 columns
Custom Zoom
Zoom opens full page view
Max of 5 rows
Responsive layout
CLUB MONACO
Carousel image view
Custom Zoom
Zoom opens full page view
Limited to 8 images
Responsive layout
HARRODS
DESIGN SYSTEM
Atomic Design
Atomic design is a methodology that involves breaking down a user interface into its smallest components or atoms, which can be combined to create larger design elements such as molecules, organisms, templates, and pages. This approach offers numerous benefits, such as consistency, scalability, flexibility, and maintainability.
USING ATOMIC DESIGN FOR THE PDP
Using atomic design principles, I created a responsive experience for the PDP. By breaking down the PDP into smaller components like images, names, and descriptions, we can combine them to create larger components such as product cards or carousels. This makes it easier for cross-functional teams to collaborate and create websites more efficiently. The atomic design approach also streamlines the building process by enabling easy component dragging and dropping, making it faster and more effective.
Collaborating closely with an associate creative director, I utilized my expertise to develop a visually appealing and dynamic image grid that includes advanced zoom functionality. Through careful consideration of design elements and user experience, the resulting image grid offers users an intuitive and engaging viewing experience.
ITERATE
JCPenney continues to evolve and innovate, even after my departure. It's inspiring to see their commitment to providing dynamic and interactive experiences for their customers through a new zoom option.
OUTCOME
While at JCPenney, I had an invaluable learning experience. The design system was vast and complex, and even the slightest alteration of a single pixel could significantly impact the entire system. Working alongside an established design team was challenging, but incorporating fresh perspectives opened up new opportunities for future design decisions.
TAKEAWAY