Multi-system management for the Niles Auriel multi-room audio app. Built for simplicity, security, and automated login.
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."
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.
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.
UI realignment and battery drain icon for F1500-PRO.
Consistent Device info across all screens (Name, Device, MAC, IP, etc) Device Admin settings (sequence delays, etc).
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" micro-interaction when adding more than 3 products:
Responsive design; different layouts at different breakpoints:
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.
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.
Existing invoices were a mishmash of legacy forms.
Core 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.
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 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.
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.
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.
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.
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.
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.
Prototype on the iPhone
The interface is running and working, but the actual content isn't hooked up yet.
May 2, 2012 - Comments Off on Mobile “Toy Filter” UI Design process
I know I'm not the only one who does UI design this way:
A white board.
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).
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."
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...
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.
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.
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.
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.
*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.
"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.
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.
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 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.
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.
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?"
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.
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.