Redesigning an “Edit Product” Page

Avatar of Chris Coyier
Chris Coyier on

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

I decided that in 2010, I was going to design more things. I didn’t do as much just straight up designing of things in 2009. So rather than wait around for opportunities to come to me, I am going to just pick random things to redesign. At the day job we just got done doing a whole ton of data entry for a client, that we do every year when they revise their catalog. We use Pinnacle Cart for this client’s store, which aside from having table-based templates, is a pretty decent eCommerce software. After spending so much time in there editing products, I decided that I would take a crack at resigning that particular screen see if I could address some issues.

The area I redesigned is just a part of the overall page, so don’t be distracted by the fact that there isn’t overall admin navigation and what-have-you.

Before



Click to see full-size

Problems:

  • White space used ineffectively
  • Tabs feel cramped
  • Ordering of fields doesn’t make sense (e.g. Why is “Meta Description” and 5 other fields in between the product title and the price, the two most important fields)
  • Page length is too long, why not break images into a separate tab
  • Promotions and discounts tabs could be combined
  • Next/Previous navigation at bottom of page is useless
  • Reset form button is useless
  • Shouldn’t have to scroll to save
  • Meta keywords are useless

After



Click to see full size

Improvements

  • Tabs replaced by larger clickable links on top row
  • Next/Previous navigation at top right corner. This way you can click-click-click and the link will always be in the same place.
  • Fields grouped more logically
  • Page length shortened by removing some things, and moving things around. At the same time the entry fields are actually much larger.
  • Two save buttons present, so you never have to scroll to save, and is named “Save all changes” which should help with confusion over what the button actually saves (it saves everything not just the top or bottom half). The button also provides a break line to separate the basics from the deeper more specific stuff.
  • Buttons for HTML tags in description area

This just feels better to me, but you don’t have to agree with me. If you have ideas for improvements or comments about where I went wrong, let me have it. I’ll also provide the PSD in case you want to shuffle things around yourself.