Loading

Benzeen Auto Parts

UI and interaction engineering for a custom automotive e-commerce site, built alongside an evolving design

Benzeen Auto Parts was an automotive e-commerce project for a business in Los Angeles, delivered through TCO in 2019. Designers kept preparing and updating pages while development was underway.

I implemented the UI across the website - interactive behaviour, animations and selected JavaScript logic - and integrated Google AMP. It was my first e-commerce project outside a traditional CMS.

Role:
UI DeveloperThrough TCO
Scope:
Every page’s UIInteractions and animationsJavaScript logicGoogle AMP
Stack:
AngularSass/SCSSBEMJavaScriptGoogle AMP

What the work involved

A custom e-commerce build, not a CMS theme. New page designs kept arriving while the site was being built.

  1. Context

    A custom, non-CMS e-commerce build in Angular. Design updates and new page concepts arrived while development was already underway.

  2. Structure and shared styling

    Page structure and shared styling first, written in Sass/SCSS with BEM.

  3. Alongside the designers

    Pages implemented and updated as the designs changed, in step with the design team.

  4. The storefront

    The UI across the whole store: browsing by make, recent arrivals, stock and part pages, quotes and the customer account.

  5. Interaction and AMP

    Animations and JavaScript behaviour across the site, and Google AMP integrated for supported mobile content.

  6. What changed

    • The UI implemented across the site
    • Interactive behaviour and animations
    • Google AMP integrated

  7. What this shows

    • Full UI implementation for custom e-commerce
    • Close collaboration with designers while the design moved
    • Animation work, and experience with non-CMS Angular projects

Principles

How the build kept up with a moving design.

  • Stay aligned

    Design and implementation kept in step as requirements changed.

  • Structured styling

    BEM and SCSS, so new pages fit the existing ones.

  • Deliberate details

    Interaction details built with intention, not left to chance.

  • One storefront

    A large product surface kept consistent throughout.

In detail

Two parts of the work, and how each was approached.

1. A design that kept changing

New pages were still being designed while the site was built.

Iterative implementation, on structured Sass/BEM patterns, let new and updated pages slot into what already existed.

2. Google AMP

I integrated Google AMP into the project for the mobile content it supported, alongside the main Angular build.

Have something similar in mind?

Tell me what you’re building. I reply within 2 business days.

Start a project

A new website, a product interface, a design system, or improving what’s already live.

Start a project