I know I'm not the only one who does UI design this way:

• Sticky notes.
• A white board.
• A programmer.

I draw the UI bits on sticky notes, we discuss the needs and potential problems, and move the sticky notes around on a board.

Below is our existing "Toy Filter" laid out for the new mobile template for our e-commerce toy store system. It's a reskinning of existing code, with no new features (a requirement of getting the mobile site built and pushed to 200+ sites quickly). At the top is the 'Search' icon; Shopper's 'Cart' contents (number of products and dollar amount); 'Checkout' icon.

When you tap the Search icon, a search box slides out, with options to refine your search and display the results. I think it's more usable than the layout we have on the desktop sites (which I didn't design).

• Search Box
• Filter by: Category, Brand, Price
• Sort by: (Name, Price, etc)
• FIND TOYS button.

We ended up with four pages with sticky notes laid out, one each for the Homepage, category Browse Page, Product Details page, and Checkout. I asked the programmer if he wanted me to mock them up in Balsamiq, and he said, "No, I've got it all right here."

On my Bike Tinker blog, I have a Google Doc for calculating optimal tire pressure.  This is the web widget I designed to replace that. It is much easier to use, and I won't have to maintain it at all.

It gets a fair amount of traffic, and people often delete or damage the functions. Some people add features, like "trailers," or "kg/bar" conversions, which is cool, but managing the document is tedious, and usability could be better. If usability was optimal, then people wouldn't break it, right?

The next step will be a mobile app that allows for saving multiple bikes. Maybe it can talk to Cyclemeter to show performance changes at different pressures...

"Shipping" was the number-one search term in our Help System.  Our e-commerce Shipping Options had been built upon for years, with no consistent design. Valuable new features were hidden among deprecated options, their natures obscured with ad hoc names and descriptions. As part of our Shipping cleanup, we redid the setup options.

Old Shipping Module List marked up for revision

This is the graphic I gave the developers, showing exactly what gets changed, along with new names and descriptions.

• The red columns are not useful to our clients, and are slated for removal.
• The green boxes show the new ordering. The new menu layout makes it clear.
• The bubbles in the middle show the new, names and descriptions.

New Shipping Module List

Everything is simplified, and reordered for clarity. This will be wrapped in a tabbed interface that covers all shipping options (no more drop-down menus).

• Unused modules and useless columns are removed
• The “Enabled” icons become checkboxes, and the names now link directly to the configuration settings
• Modules are grouped by similarity, from most to least used.

Frankly, "Custom" should go, and "Flex" and "ShipValue" might be better with descriptive names...

Our e-commerce system was built on the Joomla CMS, and extended over several years, with added features fragmented over several menus and configuration panels. We are extending it, but can't rip it down and build from scratch, since 200 sites are using it for their businesses.

"Shipping" was by far the most-searched keyword in the Help System. First, I made the Shipping Help more findable, and then tackled the underlying problem - poor usability in the Shipping tools themselves. I consolidated the scattered, cluttered Shipping setup options into a single, self-explanatory menu.

Old Shipping Settings scattered over three menus

The "Shipping Menu" itself only had bad choices: four options, all to set up a deprecated shipping system that no one used.

Countries and Zones for shipping and selling to were under “Admin”

Some redundancies had been created during development of the International Shipping system, and never removed. The option to add countries and zones from the menu was dangerous clutter, since the pre-populated list of countries is exhaustive, and you can add a new country from the list itself, if needed.

The list of active and available Shipping Modules was under “Store”

Each module's settings (price breaks, etc) could be configured from the Shipping Module List, but they couldn't be activated. To do that, you needed to go to the "Admin > Configuration" panel!

New Consolidated Shipping Menu

All that fragmentation of function was re-presented in this short menu of four items. Everything under one roof, fewer bad options. Frankly, I'd drop "Custom Shippers" too, but I was outvoted by code-hoarders.

The Shipping Module List itself was also reorganized for clarity, with unused choices deleted and supported modules renamed.

Non-technical people may not know that their domain name is separate from their hosting. This is a little diagram for those people.

How will people find me? (You might ask)

This is the Editor window for more control over products than the Inline Editor gives you.

This Editor Window overlays the Inline Editor in a lightbox when you choose an item to edit. You can add images, HTML descriptions, fine-tune pricing and discounts, age ranges, shipping over-rides and assign related products.

The help page is organized around giving people the Least They Need to Know, supported by Advanced explanations of each element and area. That way there's one page as a reference, no one is sorted into newb/expert user, and people get the idea it's an approachable process.

I have a cleaned-up layout ready to go, but implementation is queued behind locking down the new shared images, and moving all our clients to Cloudsites. Awesome technology courtesy of Kristopher Ives and Lucas Green.

This tool presents the pre-processed product information we provide our members in a sortable, filterable way.

One click will bring a product into their site.

Newest items are at the top, which shows our clients that we've been busy on their behalf.

Columns to sort and filter by:

•     Date (sort by Date, filter by Year) - The Importer is sorted by date by default, so you see the newest added products at the top.
•     SKU (mfg prefix, + item number) - Filter by partial SKUs to get a range ("dj" in SKU and "Hotaling" in Brand shows all Djeco products).
•     Product Name - Filter by partial name to see similar items. "Smen" in Product Name shows Smencils and Smens Pens, for example.
•     Brand - Sort or Filter by manufacturer name.
•     Category - Categories can be "mapped" to local site category names with the Import Mapping tool.
•     UPC / ISBN / EAN (all in the same filter box) - UPC is the most common, ISBN is books, EAN is euro-UPC.

Kristopher Ives made this version of the Import Tool, based on his Inline Product Editor, Don Hays is the reason there's any data to import, and I made the help pages.