What to keep in an ecommerce redesign

Keep catalog facts, urls that already bring people in, and the brand's tone. Rebuild the navigation, the product pages, and the checkout a shopper actually feels.

By
A clothing shop interior with folded shirts, hanging jackets, shelves, and pendant lights. The room is arranged so the goods stay recognizable while the display is reconsidered.
A shop arranged so the goods stay easy to recognize. Photograph via Unsplash.

An ecommerce website redesign should keep the truth of the catalog and rebuild the parts a shopper actually feels. Catalog records, urls that already bring people in, and the tone of the brand are the keep list. Navigation, product pages, and checkout are the rebuild list.

Those two lists get confused because both live in the same project. A new theme can make the shop look current while the product data, the addresses, and the voice are treated as disposable. The shop then looks newer and answers worse. The redesign worked on the surface and lost the store.

Keep the catalog honest

The catalog is a set of facts. Names, prices, variants, materials, sizes, and the photographs that show the object. A redesign can present those facts more clearly. It should not quietly rewrite them to fit a template.

Before visual work starts, export the catalog and read it as a list. Which products are live? Which are drafts, seasonal, or discontinued? Which variants share a page, and which deserve their own? If the current shop lies about stock, duplicates the same item under three names, or hides the price until a late step, fix the facts as part of the project. Do not paint over them.

Down the Cove is the public example of this kind of work. The project was an ecommerce restructure, a migration, and a redesign, including the move off WooCommerce. The useful lesson is the shape of the change. Leaving an older shop system is a chance to decide what the catalog really contains. It is a poor time to invent a new personality for products people already know how to ask for.

Agree on a single source for the truth before pages are designed. If finance, the warehouse, and the site disagree about a price, the redesign will publish someone's guess. Pick the record that wins, and make the new shop read from it.

Keep the urls that already earn the visit

Smooth overlapping waves of blue, violet, and warm orange. It accompanies an article about What to keep in an ecommerce redesign.

Some addresses on a shop already bring people in. A product page that has been linked from a journal, an email, or another site is an asset. A category page that regulars bookmark is an asset. Throwing those addresses away because the new platform likes a different pattern is a quiet loss.

Make a map. Old url, new url, and whether the new page answers the same question. If the product still exists, the new page should be that product, and the old address should send people there. If the product is gone, send them to the closest honest page, and say what happened in the merchandise, not in a generic empty state.

Titles deserve the same care. Google's title-link guidance says every page needs a title that describes that page, and it warns against boilerplate that makes every result look the same. A shop titled "Shop" on every product teaches neither Google nor a shopper which object they will land on. Keep the product name in the title. Keep it distinct.

Do the map before the theme is chosen. Platforms differ in how they build paths. If you discover the collision after the templates are approved, you will be choosing between a late redirect project and a set of broken habits. The map is a spreadsheet. It is also the memory of the shop.

Keep the tone, and let the room change

A brand shop has a voice. It might be plain, technical, warm, or spare. That voice should survive a redesign because it is how regulars recognize you in a sentence. What should change is the room they have to walk through: the menu, the product page, and the checkout.

Tone shows up in small places. The name of a material. The way a size guide speaks. The sentence under a price. Collect a handful of those sentences from the current site and mark the ones that sound like you. The new templates should have a home for them. A redesign that replaces every caption with lorem-style marketing has kept the logo and lost the brand.

Look at one collection the way a regular would. Could they tell it was yours if the logo were covered? If the answer depends entirely on a wordmark in the corner, the tone did not make the trip. Put one true sentence back on the product and test again.

Rebuild navigation, product pages, and checkout

A white wall covered with framed prints, small plants, and two floating shelves. It accompanies an article about What to keep in an ecommerce redesign.

Shoppers feel three surfaces. Navigation tells them whether the shop understands its own range. The product page tells them whether this object is the one. Checkout tells them whether the cost and the next step are safe to trust.

Navigation fails when it mirrors an internal org chart or a plugin's default departments. Group products the way a person shops. If one material, one use, or one collection is how people choose, lead with that. A mega-menu of everything is a warehouse. A brand shop can be a smaller set of doors.

The product page fails when the object, the price, and the variant choice are late or scattered. Lead with the thing. Put the facts that change the decision near it. Save the long story for after a person can tell what they are considering.

Checkout fails in ways Baymard Institute has measured across many studies. Their average of documented online cart abandonment rates is 70.22 percent, calculated from 50 studies. A large portion of abandonment, they note, is ordinary browsing by people who were not ready to buy. Reasons a redesign can change include extra costs such as shipping, tax, and fees, a requirement to create an account, a checkout that is too long or complicated, and shoppers who could not see the total cost up front. Baymard states that 17 percent of US online shoppers have abandoned an order because the checkout was too long or complicated. A rebuild of checkout that adds fields, hides the shipping cost, or forces an account has spent the project on the wrong surface.

Use the redesign to shorten the path and show the cost. Keep the payment methods you already support unless one of them is the source of real failures. A new checkout is finished when a person can see what they will pay and complete the order without learning your back office.

A keep list you can hand to a studio

Write the keep list on one page before concepts start:

  • Product names, prices, variants, and the photographs that match the object.
  • Urls that already bring people to a live product or a live category, with a redirect for each move.
  • The sentences that sound like the brand, especially on the product and in the size or care notes.
  • The payment methods and policies a regular already relies on.

Write the rebuild list under it: the menu, the product layout, and the checkout fields. If a proposed screen does not serve one of those lines, it is decoration.

The companion question is what to carry out of the old system and what to leave behind, especially when the shop is leaving WooCommerce. That is the subject of what to migrate, and what to drop.

The public shop projects, including the Down the Cove migration, sit with the rest of Hanabi's selected work.

Frequently asked questions

What should we refuse to throw away in a shop redesign?

Keep the catalog facts: names, prices, variants, and photographs that match the object. Keep urls that already bring people to a live product or category, and redirect any address you move. Keep the sentences that sound like the brand, plus the payment methods and policies regulars already rely on.

Which parts of the shop should be rebuilt?

Rebuild the surfaces shoppers feel. Navigation should group products the way a person chooses. The product page should lead with the object, the price, and the choice that changes it. Checkout should show the full cost and skip account walls and extra fields you do not need.

What does the Down the Cove project illustrate?

Down the Cove is a public Hanabi project: an ecommerce restructure, migration, and redesign, including a move off WooCommerce. It shows the shape of the work, which is deciding what the catalog really contains while the shop becomes clearer. It is not a set of sales figures. Those are not ours to invent.

Sources and further reading

  1. 50 Cart Abandonment Rate Statistics, Baymard Institute
  2. Influencing your title links in search results, Google Search Central

Written by

Hanabi

Hanabi is a product design and web development studio. The studio writes about clear websites, brand systems, and product interfaces for founders.

Keep reading

All articles
A bright office window ledge with a laptop, a closed notebook, white chairs, and a tall indoor tree. The quiet setup fits the moment after payment, when the shopper needs a clear next step.
Ecommerce

The page and the email after purchase

The confirmation page and the email after purchase should say what happens next, when the order arrives, and how to ask a question. The email repeats that in plainer words.

By Hanabi