Philip Williamson › App Design

Blog Archives

All Posts in App Design

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.

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 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 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 Tablet Flashcard app design

Tablet Flashcard app design

This is the Kids View. The Parents View has a half-dozen extra icons.

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.

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.

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.

Prototype on the iPhone

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