All Posts in Interactive

August 18, 2016 - Comments Off on Auriel Multi-System Home Control

Auriel Multi-System Home Control

Multi-system management for the Niles Auriel multi-room audio app.
Built for simplicity, security, and automated login.
auriel-secure1

This feature simplifies the ability to connect to multiple systems. Instead of forcing the user to navigate to a "remote" or "local" system, the app simply finds all saved systems. We added a passcode feature, enabled per system. Fully responsive, all elements lay out correctly on phones, tablets, and in the desktop viewer.

Tapping the gear icons slides out "Security" and "Add" buttons out, and activates "Edit."

August 18, 2016 - Comments Off on ELAN Intercom Icons

ELAN Intercom Icons

Icons for Intercom feature.
Devices. Small and large touchpanels, groups, iPad, iPhone, Android, Mac, and PC.

intercom_icons-labels_03

Functions. Video chat; Audio chat; Broadcast to all stations; Monitor.

elan-intercom-functions

August 17, 2016 - Comments Off on BlueBOLT remote power management

BlueBOLT remote power management

bluebolt-mobile1

Panamax and Furman power conditioners can be controlled remotely, and programmed to reboot routers, report power conditions, and power-cycle racks of connected equipment. "Contractor" units can control a chain of multiple sequencers.

contractor-2

Any new UI had to fit into the existing visual framework, but I did introduce multi-line outlet names, cute powered outlet faces, and meters to replace the dials used for older products. The meters echo the ID of the hardware, and are easier to draw.

New devices have new features and configurations, needing new UI and UX solutions. One switch controls three outlets, one of which is on the front of the unit. We devised a new way of grouping outlets visually, and labeled the location.

m4000pro-banks1

UI realignment and battery drain icon for F1500-PRO. 

f1500-redesign1

Consistent Device info across all screens (Name, Device, MAC, IP, etc)
Device Admin settings (sequence delays, etc).

bluebolt-vt4315pro-admin3

August 16, 2016 - Comments Off on Core Brands B2B Portal

Core Brands B2B Portal

$100M company becomes an e-commerce company.

store-cart-open

Until my team launched the B2B Portal last year, Core Brands customers and reps would email, phone, or fax their orders in. Now, well over half the targeted customer segment orders through the Portal.

Designed and mocked up the initial high fidelity design.

  • Walk-throughs were used to refine the microinteractions.
  • Mockups illustrated each feature in the spec document.

I designed new features, which were developed in sprints by the remote team.
- Customer Account - See terms, brands, accrued rebates, etc.
- Compare - you can directly compare up to three products.
- Quick Pad - you can paste an order right into the Cart.
- Customer Types - Each sales channel sees a customized homepage.
- Employee Purchase Program - 9,500 Nortek employees can now shop on the Portal.

"Compare" feature shows all features and specs for chosen products:
compare-dropdown_search-maybe

"Compare" micro-interaction when adding more than 3 products:
compare-remove-02

Responsive design; different layouts at different breakpoints:
store-employee-top-mobile

August 14, 2016 - Comments Off on Pricelist Redesign

Pricelist Redesign

The new price lists are automated and accurate, saving hours of time for Core Brands staff and for our customers. Automating the lists gave the Marketing Director 60% more time to spend on marketing, instead of price lists.

New Pricelists

The old price lists were hand-rolled Excel files, often six months or more out of date. The lists showed product by SKU, with an arbitrary "Level" pricing.

The new price lists are customer-first. Each customer sees their exact price, not an approximation, and only items they can buy. New price lists include customer info and date, reinforcing the custom nature of the list.

Customers can generate a new price list any time they like. Each type of list has appropriate info and layout: PDF, CSV, International, MSRP, Price Policy.

August 13, 2016 - Comments Off on Invoice Redesign

Invoice Redesign

Existing invoices were a mishmash of legacy forms.

invoice-xxxCore Brands' forms and invoices had come from different systems, and were legacies of the original several companies. The invoices were hard to read, and were missing key pieces of information, which led to costs - customer calls, hand-filing bad forms.

The new forms can be read by humans. Branding is now consistent, and the layout is consistent. All forms have the important elements in the top right corner. Each field in the template pulls data automatically from the order field in Netsuite.

A new design for all transaction forms.

This project covered all outgoing forms: Invoices, Pro Forma Invoices for international customers, Sales Order Acknowledgements, Shipping Confirmations, Credit Memos, Cash Sales, Return Authorizations.

August 11, 2013 - Comments Off on Bike Tire Pressure App

Bike Tire Pressure App

The app is on Google Play

My compatriots at Edison Gauss and I updated the flow and visuals for our Tire Pressure App.

It tells you the optimum pressure for road  bike tires, based on your weight, tire width, and bicycle geometry.

This overlay shows the list of bikes. The free version lets you make two bikes, the paid version as many as you want (we know you have seven). In the future, this screen may show pressures, as a quick reference.

If you Add a New Bike, it will clone your selected one. Most people have slight variations of the same bike, just like they do jackets, so it's a convenience.

This is the Quickbeam, showing pressure, with me weighing 245.

In the app, you input the width, choose the style of bike (different bike geometries have different fore/aft weight distributions), and tell the app how wide your tires are. It does the math for you, with an equation that fits against measured tire drop.

If you're pumping 25mm tires up to the sidewall recommended pressure of 120/120, you're over inflating the front, and under inflating the rear.

You're unlikely to over-inflate 60mm tires!

June 28, 2012 - Comments Off on A good UI designer is lazy and stupid

A good UI designer is lazy and stupid

A headhunter asked me "why do you think you're a good UI designer?"

Instead of saying, "because I've spent a dozen years constantly figuring out how to make complicated software accessible to normal people," I said what I really thought: "I'm a good UI designer because I'm lazy and stupid, and will rage-quit anything that isn't easier than cracking open a beer."

Hmm. Discretion might well be the better part of valor.

June 28, 2012 - Comments Off on Bike Tire Pressue Android App

Bike Tire Pressue Android App

My friends and I are made an Android app for tire pressure. It gives you the best tire pressure for your bike, based on your weight and tire width (hint, fatter tires and skinnier you are both better options). I didn't do any coding, or UI design - I just insisted on it happening, and made the icon and bike silhouettes.

May 14, 2012 - Comments Off on Mobile Shopping Template

Mobile Shopping Template

We are designing and building a mobile template for our ~200 toy store clients. There are some constraints to making it fit in an existing system, but also advantages.

This is the gray version, but the front-end developer built the system with the "less" CSS preprocessor, so he can control the color palette and button corner radius by changing a couple numbers. This will let us offer optional customizing for the members that want the mobile site to complement their main site better.

Home Page

Important info for mobile visitors: location, phone and hours. Content displays in a "drawer" below that level of icons. This is all HTML and CSS, but styled to look like an app.

20120514-092502.jpg

Browse Page

The shopping pages have smaller store info buttons (hours, location, phone). The logo pane shrinks to allow room for the 'cart checkout' button and cart summary at the top of the screen.

20120514-092523.jpg

Product Details

Multiple thumbnails display, and can be tapped or dragged to change. When you hit "Add To Cart," the button changes to "Checkout Now," and the drawer opens so you can change quantity. (This is the state shown) The cart summary updates in real time when you change the quantity.

20120514-092536.jpg

Prototype on the iPhone

The interface is running and working, but the actual content isn't hooked up yet.

20120514-092552.jpg

May 2, 2012 - Comments Off on Mobile “Toy Filter” UI Design process

Mobile “Toy Filter” UI Design process

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.

something's added to the cart!

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.

drop-down filter for mobile e-com toy search

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."

 

April 28, 2012 - Comments Off on Tire Pressure Widget

Tire Pressure Widget

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.

Tire Pressure widget is so much more manageable than the Google Doc

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...

April 27, 2012 - Comments Off on Smithsonian Coins Website

Smithsonian Coins Website

I designed this Legendary Coins and Currency site for Mediatrope in the Fall of 2005. It was very cool to work with the people at the Smithsonian - any time I wasn't certain of how something would work, and did the design equivalent of hand waving, they'd ask about exactly that. Smart clients are almost as good as smart co-workers.

There was a lot going on on this (mostly Flash) design - home page, collections page, coin page, coin INSPECTION page, and a game educational activity. Plus the HTML and printable pages. The timeframe was insane, and was the second time I'd worked 24 hours straight for someone. I also designed the stylized logo/site name.

I did get disc after disc (remember getting stuff on discs?) of high-res coin art which was pretty cool. Beautiful stuff, and interesting stories. That shell on "Legends of the Human Spirit" was scrip issued by a motel owner in 1933 whose name was Charles Williamson. Possibly a long-lost great uncle? I like to think so.

coin page

This is the overview page. If I were to redo this site, I would change the  layout of this page to differentiate it from the coin pages.

And... you can look at the coins (or shell) up close.

See? Charles V. Williamson.

April 19, 2012 - Comments Off on pufferbellies

pufferbellies

I love it when you give a client a design and they make it NICER. Erin at Pufferbellies Toy Store is a great photographer, and makes her own slides for the homepage. I like checking in on her site, because the homepage looks GOOD.

April 13, 2012 - Comments Off on MFG DB Status List

MFG DB Status List

The company I work for provides a SAAS e-commerce web system to the toy industry.

This is my initial mock-up of the "thick" view of a tool to show our members and manufacturing partners the status of every toy brand in our Import Database*. There will be a "thin" view, with one row per manufacturer, and an "Open" view as well, that shows all manufacturer-provided info.

The "Request" button helps us prioritize the processing, there are hooks for direct marketing from manufacturers to retailers, and a link to the relationship-building product we have in development.

Upload date, most recent year of release, request button

 

*We pre-process toy data so our members can Import the products into their sites with a click. We are building a tool to clearly show which lines are up-to-date, and allow our subscribers to "Request" an update to a line. With the number of manufacturers, and the volume of data we get, we prioritize on what our members need. The lines with the most requests go into the processing queue first.

March 2, 2012 - Comments Off on Shipping Options setup

Shipping Options setup

"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...

February 2, 2012 - Comments Off on Shipping Menu Cleanup

Shipping Menu Cleanup

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.

December 31, 2011 - Comments Off on Registrars and host servers

Registrars and host servers

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)

 

October 6, 2011 - Comments Off on medium poly 3D model

medium poly 3D model

This woman was modeled from scratch, starting with a single triangle. I followed a semi-famous tutorial, using my own drawings as the basis. She was roughly rigged for animation as a test for a branded pinball game for the PSP.

July 18, 2011 - Comments Off on Toy Data Editor Window

Toy Data Editor Window

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.

Basic Editor functions - large image

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.

June 18, 2011 - Comments Off on Database import tool

Database import tool

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.

Toy data Import Tool - larger image

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.

 

December 19, 2010 - Comments Off on Toy store site designs – 4th Quarter 2010

Toy store site designs – 4th Quarter 2010

A Child's Delight in Marin and San Francisco; Anklebiters, Inc. in Marietta, GA; The Toy Center; Toy Station at School Crossing; Frog Pond Toys in Lake Oswego, OR; G. Whillikers; Imagination Toys and Shoes; Kaleidoscope Toys in Round Rock, TX; Over The Rainbow Toys in Anchorage, AK; The Learning Tree in Kansas; and Toy Town of Cadillac.

December 17, 2010 - Comments Off on toy industry web sites

toy industry web sites

Web site designs for independent toy manufacturers and service providers. Uncle Skunkle Toys (unique games), the Good Toy Group catalog, Wedgits (building toys), and Wild Creations (the frog in a box people).

November 2, 2010 - Comments Off on PlayStation2 demo disc interface design- “Louvers”

PlayStation2 demo disc interface design- “Louvers”

playstation2 kiosk "louvers" interfaceThis interface got used on a LOT of Sony products, with different background color and transition effects. Jampacks, Kiosks, WalMart-only Jampacks, Official PlayStation Magazine demo discs.

The programmer, Avery Lodato, built it so that the production artist could choose the center point of the cropped-in vertical slice, so they always looked good. As the Art Director, I was happy, and the Sony Product Managers were happy with the way their property was presented. Genius.

October 20, 2010 - Comments Off on advergame for the PS2

advergame for the PS2

PlayStation2 demo disc loading screen game.

Destroy the MTV logo before it crushes you... or the demo loads.

September 20, 2010 - 1 comment.

Character design and story boards

Maya pinup with a giant slide rule sword

At LifeLike, we put together a demo of an interactive comic book for the PlayStation2. I designed the characters and the plot, and drew the storyboards. The scenes were built in 3D to match my layouts.

 

 

 

September 15, 2010 - Comments Off on Toy store web sites

Toy store web sites

August 27, 2010 - Comments Off on Toy Store websites

Toy Store websites

August 21, 2010 - Comments Off on Demo Disc interfaces

Demo Disc interfaces

kiosk 2.6

August 18, 2010 - Comments Off on Over-the top toy store designs

Over-the top toy store designs

Over the top. I work with a very talented programmer who, all too often, says "you can really get away with things for toy store websites you can't really do for anyone else..." Partly he means "Dang, dude, you can do crazy bad things!" and partly he means "Comic Sans? Really?"

Boing! JP's Toy Shop;  BeBeep a Toy Shop; Franklin's Toys; Kid's Center; Kidoodle's

August 15, 2010 - Comments Off on PlayStation Kiosk 2.6

PlayStation Kiosk 2.6

Motion comp for one of the last PlayStation2 game demo Kiosks. You may have seen it, or a variant, on a PS2 kiosk. I designed it to feel like you were flying over towers, and they would reach up toward you. When you stopped flying, the demo on top of the chosen tower would fill the screen.

3DS Max, Photoshop, AfterEffects, PlayStation2 dev gear, proprietary 3D export plugins.

February 26, 2010 - Comments Off on PlayStation Pack-In 7

PlayStation Pack-In 7

This was the first demo disc I ever designed, and I see it was the first PlayStation disc a lot of people ever got. Someone else captured it and put it on Youtube, and for all its crude chunkiness, it makes me happy to see.