Soffe E-commerce Redesign

The existing site was difficult to navigate, and the goal was to highlight Soffe’s products while improving the shopping experience. I began with a site audit analyzing user interactions, browse depth, page views per session, and demographics, to better understand the target audience, then translated those findings into wireframes and high-fidelity mockups.

For category pages, the size taxonomy was inherited. Soffe’s catalog spans infant through adult plus tall variants, and those groupings were fixed by the existing product data. What I changed was the interface around them, using collapsible filter groups so users could open only the categories they needed rather than facing the full set at once. On mobile, the main navigation collapsed into a hamburger accordion, letting users expand a single category instead of scrolling the full menu. I also designed the product cards themselves, how products appeared in the grid, how color variants surfaced with a “+ More” indicator, how sale states were flagged, and the supporting messaging, so users could evaluate options without opening each product. Below the grid, I placed the category’s descriptive copy, keeping products first for shoppers while retaining the content for search.

For product pages, I designed the layout to support a purchase decision without requiring users to leave the page. Out-of-stock sizes were greyed out rather than removed, so users could tell a size existed but was temporarily unavailable, and a note about price variation by color and size sat directly beneath the price, where the question would arise. Trust signals, secure checkout, free shipping over $60, and 30-day returns, were placed immediately below “Add to Cart” rather than in the footer. On desktop, description and care instructions ran side by side. On mobile they stacked with description first, since care information matters mainly after purchase. The vertical thumbnail strip became a swipe carousel with position indicators on mobile, replacing the pattern rather than compressing it.

For the account experience, I designed the login page to give account creation equal weight alongside returning-user login, presenting concrete benefits, faster checkout, 30-day returns, and order management, rather than a generic prompt to register. On the account dashboard, recent order activity leads the page, since order status is the most common reason customers open their account. On mobile, both pages reflow to prioritize the primary task, and the order table reduces to its essential columns.

Across desktop and mobile I worked from a 12-column and 6-column grid respectively, keeping structure consistent as page types varied. Throughout, I checked layouts against WCAG 2 contrast standards, and used clear, intuitive labeling.

All design decisions were developed iteratively with feedback from the product manager, e-commerce team, and development team.