Expanding the in-store brand experience to online shopping
The current website does not reflect the brand’s personality, and does not visually appeal to their core audience of young athletes and fashion enthusiasts. Their online shopping website should be consistent and seamless with the in-store experience.
I redesigned the website to be more aligned with their vibrant and empowering brand personality and matched its visuals to their store interior. Reorganizing content and creating a clean visual hierarchy helps users easily find products.
The focus of the redesign was to create a seamless shopping experience that includes searching, filtering, and adding products to a shopping bag.
I chose Monoton as the display typeface, as its thick geometric lines echo the brand's uniform and also create a whimsical and sporty visual identity.
For the header and body copy, I paired Poppin and Rubik for high visibility.
Also introduced an upgraded color palette that speaks to the brand’s character: young, vibrant, and empowering.
Simple patterns using repeated strokes are used in combination with photography or as a background graphic, and provide a unique and bold look.
Here are some examples of how color and patterns would be applied in the new design system.
I also developed a cohesive icon system that allows users to recognize the content easily.
Featured collections and branded programs are organized in each card with their own unique design
While keeping the basic site architecture and framework, the redesign successfully brings Foot Locker’s brand identity and brand personality to life. The new design also provides a cohesive shopping experience for customers both in-store and online.