herbariasoap.com
Herbaria
Natural cosmetics online store · USA
13 desktop screens · 7 mobile · 2024
Online store design · 2022
LED Outfitters
A US store of light bars, beacons and sirens for police, EMS, fire departments and tow trucks. We designed it from scratch: home page, catalog, product page, cart, checkout, customer account and mobile version. The store runs on this design.
- Client
- LED Outfitters, emergency lighting
- Task
- New design and CS-Cart upgrade
- Platform
- CS-Cart, custom design without a ready-made theme
- Mockups
- Customer journey, account, mobile version
- Year
- 2022
Task
The store had run on CS-Cart since 2005, and its design had barely changed. Buyers are police, EMS, fire departments, road services and private drivers. They need to see the warranty, return policy and shipping terms right away.
No ready-made theme fit, so we designed the store from scratch and refreshed the logo: the beacon made of simple shapes stayed, the fonts and colors are new. We also built the mockups into the store and upgraded CS-Cart.
Before and after
The first screen on a 1280-pixel display: the site before the redesign (Wayback Machine snapshot) and the new home page. Drag the divider.
Before · June 2021
Mockup
Home page
- The first screen is a banner with a police car. Below it, “Shop by Industry” lists eight segments, from firefighters to off-road.
- Banners repeat the store terms: warranty, 14-day returns and free shipping.
- Under the accessories carousel: PayPal Credit for purchases over $99 and a banner for off-road light bars.
- Further down: Daily Deals with a countdown, the “Never Miss Another Deal” signup and the company story with a YouTube video.
- After launch the client asked us to replace the segments with category tiles. On the live site they sit in two rows.
Customer journey
Hover over a screen to scroll through it, or open it full size.
Catalog
A full-width category photo, subcategory icons, brand and price filters on the left, sorting and three list views on top.
Product page
Video in the gallery, view and sales counters, a price chart with price alerts, and the rest in tabs.
Cart
Items with color and quantity, a promo code and totals, and a checkout button at the top and bottom.
Checkout and account
Sign-in before checkout
Three options: sign in, check out as a guest without an account, or register.
Checkout
A Government P.O. block with department details for public agencies. Four payment methods, including ordering by phone.
Customer account
Order lookup by number, profile, orders, wish list, comparison and recently viewed items on one page.
Mobile version
We designed the mobile version for a 375-pixel width: home, catalog, product page and a bottom bar with home, account, comparison, wish list and cart.
Catalog menu
The catalog opens over the page, each category with an icon and a short description. The account menu has orders, comparison, wish list, sign-in and registration.
First screen banners
Later we designed seasonal banners for the home page slider: Winter Sale, Spring Sale, Offroad Light Bars and Black Friday. Photos from them are in the live site slider now.
Mockup colors
- #2B3138Header, signup strip and footer
- #E01616Buttons, prices and Daily Deals
- #282944“Buy now” buttons in the grid
- #EFEFF3Promo blocks, cart, order summary
- #FFFFFFPage background and cards
More
More projects
All design projects
Previous
Next
We will find solutions for everyone!
Share your idea and we’ll offer an optimal solution
