LER Web Services wordmark
ENES
Start a project

CED Marine · Case study

A wholesale storefront built around how dealers buy.

A chartplotter fish finder on its mount, the kind of marine electronics CED Marine supplies, in clear 3D
Project overview
A new front end for CED Marine's WooCommerce store: dealer prices and stock on every product, search that suggests as you type, quotes and a dealer account, plus a CMS and dashboard the team runs themselves.
Services
  • Custom theme
  • Dealer storefront
  • Quotes and dealer account
  • CMS and dashboard
Date
September 2023
Client
CED Marine
Location
Melbourne, FL

Process snapshot

Some of the steps along the way: the old site and its category menu, early drafts of the new menu, wireframes, and the screens and CMS as they took shape.

  • The old cedmarine.com homepage, where the project started
  • The old site's category menu: one long list
  • An early draft of the category menu in two columns
  • A draft of the category menu with each department's types beside it
  • The new homepage as a wireframe
  • A category page as a wireframe
  • The new homepage
  • The finished category mega menu (department count blurred)
  • A product page as a wireframe
  • Search suggesting products for a model number
  • The new homepage on a phone
  • The homepage open in the CMS editor (prices blurred)
  • Starting a new page from a template
  • The quote requests inbox (names, prices and figures blurred)
  • The header and footer settings in the CMS
  • The CED Dashboard (all figures blurred)

Project objectives

CED Marine's store ran on a page-builder theme, with search, filters, menus, popups and forms each coming from a different plugin. The objective was one new front end on the same WooCommerce store: show every dealer their own price and stock, make every product easy to find by name or model number, turn quote requests into a real workflow for dealers and for CED's team, and give the team a CMS for pages, menus and promotions. Products, dealer accounts, pricing and order history had to carry over exactly as they are.

The CED Marine homepage arriving and scrolling from the first screen to the footer, recorded from the new cedmarine.com build, catalog counts blurred

What the website had to do.

CED Marine is a wholesale distributor of marine electronics in Melbourne, Florida. Its dealers use the website to check their price and stock, follow orders and quote their own customers, so the site works more like a trade counter than a brochure.

The new front end replaces the theme and the plugins around it with one design system and its own templates, so every page is built from the same header, cards and type.

  • 3Ways out of a quote: PDF, email or checkout
  • 4Shortcuts in the phone bar: Shop, Quote, Brands, Account
  • 3Editor views: desktop, iPad and phone
  • 35Ready-made page templates
Sections of the CED Marine website laid out at an angle, catalog counts blurred

What had to change.

  1. Dealers needed their own price, margin and stock on every product, while guests see neither.

  2. A large parts catalog needed search that finds a model number as it is typed.

  3. Quotes had to be quick for dealers to build and easy for CED to answer and follow up.

  4. CED's team needed to change pages, menus and promotions themselves, without touching code.

  • The homepage arriving, recorded from the new cedmarine.com build
  • The main menu, recorded from the new cedmarine.com build, catalog counts blurred

Screens

Every page, one system.

Home, categories, products, brands and the dealer pages share one header, one card and one type scale, so a dealer always knows where the price, the stock and the next step are.

  • The Navigation category page scrolling, recorded from the new cedmarine.com build, product counts blurred
  • The product page scrolling, recorded from the new cedmarine.com build
  • The Brands page scrolling, recorded from the new cedmarine.com build, brand count blurred

For dealers

Built around how dealers buy.

Search suggests products and model numbers as you type. Any product goes into a quote with one click, priced at retail for the dealer’s own customer, then out as a PDF, an email or an order. The dealer account keeps orders, invoices, tracking and quotes together.

  • Search suggesting LiveScope products as the name is typed, recorded from the new cedmarine.com build
  • A dealer adding a Garmin pole mount to a quote and typing a note for the PDF on the Build a Quote page (prices blurred), recorded from the new cedmarine.com build
  • The dealer account: totals, recent orders and tools (order details blurred), recorded from the new cedmarine.com build

For CED’s team

A CMS the team runs themselves.

Pages are built in a drag-and-drop editor with ready-made templates, saved versions and separate desktop, iPad and phone views. Quote requests arrive in an inbox with status, replies and reports, and the dashboard shows orders, searches and shipments and checks every connection. Recorded with sample data, with prices, figures and customer details blurred.

  • The CMS editor: the homepage on desktop, iPad and phone, a section's toolbar, the page structure and the template library (prices blurred), recorded from the new cedmarine.com build
  • The Quote Requests inbox, then one request with its items, reply and history (names, prices and figures blurred), recorded from the new cedmarine.com build
  • The CED Dashboard: orders, sales, searches, shipments and the system checks (all figures blurred), recorded from the new cedmarine.com build

The whole store on a phone.

On a phone the departments fold into a sheet, a bar at the bottom keeps Shop, Quote, Brands and Account in reach, and search, prices and quotes work the same way.

The phone menu opening, recorded from the new cedmarine.com build on a phone, catalog counts blurred
The homepage on a phone, recorded from the new cedmarine.com build on a phone
The Navigation category page on a phone, recorded from the new cedmarine.com build on a phone, product counts blurred

In their words

“Edson was incredibly responsive and attentive to my requests. The quality of work exceeded expectations and was completed in impressive time. I highly recommend this company for their outstanding service, efficiency, and commitment to excellence.”

Ronald Esperant CED Marine · 5/5 · Google reviewRead original on Google

More screens

Brand pages, contact and the dealer application.

  • The Garmin brand page scrolling, recorded from the new cedmarine.com build, product counts blurred
  • The Contact page scrolling, recorded from the new cedmarine.com build
  • The Become a Dealer page scrolling, recorded from the new cedmarine.com build, brand counts blurred

Wireframes

The structure underneath.

The same pages with the styling stripped away: one grid, one type scale, and the same set of components on every route.

CED Marine pages drawn as wireframes, laid out at an angle: outlined cards, buttons and fields, grey bars for text, and line drawings of the photos

Visual system.

The site's own palette over the LER paper, and real recordings of the new build instead of stock scenes.

  • #071927
  • #007C89
  • #19A7B3
  • #456E75
  • #E6F4F5

Outcome.

CED's dealers get one place to find, price, quote and track what they order.

CED's team gets a site they can change themselves, on the same store, accounts and order history they already rely on.

How this one came together.

The four steps behind this build, and what each one had to settle.

Start a project

  1. Custom theme

    I replaced the old page-builder theme with a custom WordPress theme on the same WooCommerce store, so products, accounts, pricing and order history carry over.

  2. Dealer storefront

    Mega menus for every department, a brand directory, search that suggests as you type, and dealer prices and stock on every card.

  3. Quotes and dealer account

    Add to Quote on every product, a quote page with PDF, email and checkout, and an account area with orders, invoices and tracking.

  4. CMS and dashboard

    A page editor with templates and saved versions, editable menus and popups, a quote inbox with reports, and a dashboard that checks every connection.

Next projectPrime PharmaResponsive product presentation for a modern pharmaceutical brand.