Electra • Redesigning B2B E-commerce
Designing a custom Shopify storefront for one of Canada's largest electrical supply distributors. The challenge: balance the complex needs of industrial buyers with the simplicity B2C customers expect, all while migrating from a legacy platform that couldn't scale.
*Brand name and visuals modified for confidentiality. UX and product work are real.
Timeline
4 months
Role
Principal Designer
Industry
Enterprise E-commerce
Team
Cross-functional
Product Design
UX Research
UX Design
Design Systems
Four users,
one platform
Electra serves contractors, procurement managers, business owners, and retail buyers, each with different workflows and needs. Through research with 60 customers, I mapped their pain points: unreliable inventory data, search that only recognized product codes (not field terminology), and buried B2B features no one could find.
"I don't have time for this. I'll just call Giovanni to get a better deal and make sure delivery happens today."
- Robert, owner/contractor
Search that speaks their language
Finding products was painful. Contractors search using trade slang, not technical names, and 36.8% rated the experience as "moderate" to "challenging." I redesigned search to recognize real-world terminology and reorganized categories to match how people actually shop, including a "Shop by Job" flow for project-based ordering.
Product pages
built for pros
Industrial buyers need stock levels, pricing, and specs immediately, not buried three clicks deep. I redesigned product listing and detail pages to surface critical B2B information above the fold while maintaining scannability across thousands of SKUs. Standardized product cards support all four user types without visual clutter.
B2B tools people actually use
Job Lists and Quick Order were essential features—but only 36% of users knew they existed. I completely reimagined both tools with better visibility, intuitive editing, and clearer onboarding. The redesigned cart now supports bulk orders, multi-job management, and complex delivery needs.
Bringing the brand to life, built for scale
Electra had recently developed a new marketing brand direction but wasn't sure how to translate it digitally. I bridged that gap by applying their visual language to the website, using rounded corners from the logo for interactive elements (better usability) while bringing their bold, angular energy to imagery and layouts with dynamic cuts and lines.
I also created a mini design system to ensure consistency and scalability once the site launched, giving the client the tools to maintain a cohesive experience as they grew. Working within Shopify's constraints, using Polaris for account and checkout flows, I pushed to create a B2B e-commerce experience that felt modern and intentional. The client was so impressed with how the brand came to life digitally, they reached out about having us design their marketing assets as well.
The impact
First project in agency history to receive mockup sign-off in 24 hours. The client's trust in my work led to ongoing consultation during implementation and generate several new projects from the parent company.
Launching Q1 2026 with projected improvements
