Apps and Mobile Web UX

New features and derivative apps for the Smart Connected Home. The apps worked on iOS, Android, in-wall touch panels, and a web viewer. Side projects include UI for native Android tablet educational apps and a bicycle tire pressure app. 

ELAN Multi-System Chooser

The old ELAN g!Mobile 6 app only allowed for one system connection at a time. Our dealer/installers to be able to switch between their customers' systems quickly. We also needed to be able to use the same app for two different brands, Niles and ELAN. 

Old login screen design

As the sole UX and UI designer, I reworked the lead programmer's functional prototype to flatten the navigation and create the illusion of only two screens: launcher and setup.

The list grows from the center of the bottom half of the screen, in order to be easily reachable with one hand on a phone. A long list may go off the screen, but we were careful to make the longer list partially visible, to indicate. The "settings" icon is out of the way, but visible.

To meet the rebranding need, and allow for it to apply to SpeakerCraft as well, I brought in different visual elements that dropped into the same layout. 

New Niles branded login screen

New ELAN branded login

Creating a Passcode and Editing Systems

With the ability to connect remotely to any system, there were new concerns about security. Not everyone secures their phone, and the app could potentially be used to unlock doors and turn on cameras. I borrowed from the Apple lock screen, since that's a familiar design pattern. 

The Gear Icon enables editing or deleting systems, and pressing it slides Plus and Lock icons out. Plus adds systems, and Lock lets you set a passcode. These controls are used less often, so putting them at the top of the screen keeps them out of the way. You won't hit them by accident, and you need both hands to input any of the new fields behind the buttons. 

Smart Home Audio Apps

ELAN's Smart Connected Home app lets you control your home's lighting, climate, security, audio, etc. from anywhere in the world, and there was an opportunity to leverage that software and expertise, and apply it to Core Brands' audio offerings.

We defeatured the ELAN app, restricting it to audio playback to focus on whole-home audio applications. I handled the visual re-branding for Niles and SpeakerCraft, designing the color scheme, and making the changes directly in the software "configurator" application. 

Bicycle Tire Pressure App

For a number of years, I hosted on my blog a spreadsheet to calculate optimum bicycle tire pressure. This had grown out of a graphic I had made, extending Frank Berto's graph to include wider tires and heavier riders.

In order to make the information more usable, and to get some hands-on app development experience, I teamed up with a couple of bike-riding Android developers to make an app as a side project. 

I created the screen layout, designed the icons, and illustrated the bicycle graphics. I learned to make multi-size app icons on this project, simplifying the tiniest ones, and exporting them all together. 

The app had good uptake in online bike nerd circles, and people still use it today. 

Tire Pressure App UPDATE

Paper redesign of the tire pressure app. 

• Simpler. Multiple weight inputs condensed into a single slider. 
• Clean. Native iOS, then port the new design to Android. 
• MVP Release. Start with a calculator, defer saved bikes.

First pass kept the current app's two pages, with a list of bikes, and a bike creation screen. 

Simplified the inputs on the setup page, with sliders instead of numerical entries.

Moved slider numbers above the fingertip, removed naming input.

Bike name and rider inputs moved to a "save" dialog, to simplify the process.

Number readout moved to the top of the screen so you can see it as you change the inputs. 

Most-used inputs moved closest to the thumb. Tapping the icons changes the units (lbs/kg).