Work

Little Lads

Little Lads is a growing fashion brand focused on boys’ apparel. I rebuilt their Shopify storefront (navigation, landing page, and a set of custom Liquid components) to lift engagement and conversion.

Role
Design and front-end
Period
2023
Stack
Figma, HTML/CSS, JavaScript, Shopify Liquid
Site
littleladseg.com
  • The rebuilt Little Lads storefront: a hero of boys in striped polos and shorts, a horizontally scrolling Best Sellers row with prices in EGP, a “Made To Last” brand statement, and a Shop by Category grid
  • The Little Lads mega menu open under Shop, listing Shop All, T-Shirts & Polos, Shirts, Pants and Shorts beside a photo tile for each category, with the rich footer behind it
  • The custom Customer Reviews marquee, a looping row of quote cards from named customers praising fit, fabric and price
The landing page, the mega menu, and the reviews marquee.
The old Little Lads homepage printed out and marked up by hand, with circles around the header, hero, product cards and footer and handwritten notes on typography, hierarchy and navigation

The Problem#

LittleLads is a growing fashion brand focused on boys’ apparel. They were facing several issues with their website:

Navigation was cluttered and not intuitive, causing users to struggle when browsing products.

The site lacked interactivity, resulting in low engagement rates.

Limited mobile optimization, negatively impacting the user experience on mobile devices.

The product pages were lacking essential features like product videos and customer testimonials, which are key drivers for conversion

I was tasked with revitalizing their Shopify website to improve brand equity, increase engagement and boost conversions.

Figma Design#

I started by analyzing the old website and annotating any problems that popped out to me. Then, I proceeded to brainstorm the possibilities for the landing page. The goal was to take the user on a journey that will elicit a specific response in the user so that they take a desired action at the end.

By social proof (testimonials, best sellers), building a narrative (behind the name), and showing the quality of the items the users will ultimately start to trust the brand.

Also, navigation is very important and it was shown in various AB tests to increase traffic by a substantial amount. Thus, I designed a mega menu and created a rich footer with links to the various categories and items.

Shopify Components#

Since certain components were either locked behind expensive themes, not available in the exact styles I was going for, or not available at all, I created custom components. I created a customer reviews marquee, autoplaying video, mega menu, and hotspots component. Shopify Liquid uses plain HTML, CSS, and JavaScript and it has an object to expose certain variables so that the Shopify admin can interface with the component without having to change the source code, making it much more maintainable.

Cover of Thinking with Type by Ellen Lupton, second edition

Books I read that were relevant to this project#

Thinking With Type By Ellen Lupton was such an interesting read and it was really instrumental in changing the way I perceive typography and its immense importance, paying attention to concepts such as modulation, line height, weight, x-height, and so much more...