Blain’s Home & Landing Page System
Blain’s Farm & Fleet
The Problem: Blain’s e-commerce site was lacking a cohesive design system and online content strategy, leading to disjointed graphics, dated site components, and an overwhelming shopping experience for users. Homepage updates and changes to pages for events, holidays, or special sales needed custom development every time, making for unnecessary dev spend.
The Solution: A suite of new, customizable widgets that anyone at Blain’s can design and update without help from the dev team, a cohesive and repeatable design library, and new emphasis on seasonal topics and trending categories over brand-exclusive placements.
Role: UI Design, Content Strategy
Starting Point
Home
Hero slider: Low engagement; sliders are poor choices for accessibility, and graphics used within were wordy, busy, and difficult to parse.
Image cards: Too much text baked into small images–almost unusable on mobile devices.
Product Carousel: Usable, but dated UI.
Content strategy: Almost entirely centered around brand advertisements with a few sale items and trending product carousels sprinkled in between. Very, very shallow scroll depth on the page and little engagement with most components.
Category Pages
Functional, but not very pretty. Facets are already visible in the lefthand sidebar despite the product list being hidden. Recommended and trending item carousels populate the lower half of the page, but few users scroll deep enough to see them.
New Design System
A new design library featuring simple, flexible components and a pared down color palette focused around the existing Blain’s Blue and Blain’s Red colors.
Some existing components got a facelift (e.g. trending item carousel, subcategory cards) and several brand new ones have been introduced. Carousels and tile grid widgets allow for getting far more content above the fold and result in increased engagement
All widgets are responsive and screen-reader/keyboard-navigation friendly.
Flexibility
One-off pages for seasonal events, holidays, contests, etc., have room to introduce custom colors and imagery to suit their needs.
Sitewide Applications
This new suite of widgets can be added to flesh out any page across the site. Category and subcategory pages are now more engaging experiences, and product list pages can now feature current offers, top brands, or crosslink to other relevant pages.
Content Strategy
Page layouts are designed to entice users with seasonally appropriate themes and an emphasis on current deals and offers. Data drives decision-making–highlighted offers, products, and collections are chosen based on revenue and engagement metrics.