NatureBox MobilePantry UI Update

I have updated the UI a bit.  I was a little heavy on shadows on the first pass.  I have eliminated shadows everywhere except where it separates layers from each other.  I also never liked the pantry icon so I have replaced it with the NatureBox sun.  I also added a white border to the pantry button since the contrast between the green and orange wasn't enough (without a shadow).  Finally, I added some borders around the items in the catalog view to keep the items from running together so much.  New images below:

View fullsize

View fullsize

View fullsize

App Icon

View fullsize

Watch App Icon

App Design Concept: NatureBox Mobile Pantry

A few shots of my latest side project.  Rather than redesigning or adding conceptual features to an app I use, I decided to create an app concept for a service I love that doesn't have an app.  I have been a NatureBox subscriber for a little over two years now and I have to say, I love the service.  I began the service in full-on snack roulette mode:  every item in every box was a surprise.  As my family caught on and began enjoying the service, we have begun curating what we receive every month (what NatureBox calls your "pantry").  You can manage your pantry through a responsive website, but I created this concept imagining what a native app would look like.

My design inspiration was the NatureBox bag and the sun logo.

Taking inspiration from this, I created the login screen that should look somewhat familiar:  

View fullsize

The main intention of this app is to enable a user to manage their "pantry".  After login, you are taken directly to the pantry section of the app.  As with the NatureBox website, the pantry lists the first five items (my next order) with an option to buy it now.

View fullsize

The main interactions on the pantry are to organize and/or remove items.  I envision something like a list of index cards in a stack, so the organization UX will simulate pulling a card out from one position and inserting into a new position.  To remove an item, simply swipe right (standard iOS convention. 

View fullsize

Next up is the catalog of items.  NatureBox takes some wonderful photos of their items, so that is the focus of the catalog.  Each item can also be ranked, so I have included a visual of the rank and an easy button to add to my pantry.  The catalog view will also allow you to search by name, ingredient, flavor, etc.

Tapping on an item will take you to the detail view of the item.  This would also be the screen that load if you tap on an item from the pantry.  This screen allows you to rate an item, read a richer description, and swipe to view nutrition information, ingredients, and NatureBox's "Snack Specs".

View fullsize

On the bottom toolbar of the app, I have included icons for the catalog and the pantry (green focal point).  I have also included (but not mocked up) history and account options. This should eliminate the need for a hamburger button.

I have also added a item for a blacklist.  This isn't a feature that exists with NatureBox today, but as I envision it, I would like to add either items or ingredients (e.g. peanuts), that will never be shipped to me.  NatureBox has the notion of "surprise" items.  The blacklist would allow me to receive surprise items while ensuring that I won't receive items that I'm allergic to or know that I don't like.

Features I Want: Waze "Quiet Zones"

I love Waze and use it nearly daily.  I would estimate that for 90% of my Waze trips, I know exactly where I'm going; I'm simply using it to avoid traffic, closures, etc.  Even when I am using it to or from a new destination, there's a significant portion of each drive that I already know.  I only need to know the first or last few turns.  It's needless at best and annoying at worst to get turn-by-turn directions when I'm only a few blocks from home.

To address this, I'd love to be able to use geofencing to set up a "Quiet Zone" around my house, office, etc. that would mute turn-by-turn navigation once I entered the zone.

On the rare occasion that there is an emergency event or closure, it should be a configuration option to allow those notifications through.

Redesigning the LiftMaster App Step 2.0: Geofencing

The bulk of remaining changes are simply color and theme, so I haven't created any new designs.  One feature that isn't in the app that I would like to have is geofencing.  It enables a user to close the door when they leave home and open the door when they arrive.

I would add the geofencing feature to the existing scheduling configuration; adding a location trigger to the existing time triggers (although it may require renaming "schedules" to something else like Actions).  When adding a geofence, a user can use the map circle to search, pan and zoom to the desired radius, then choose a location trigger (arrive, leave) and action (open, close).

Done and dusted.  Onto another app...

REDESIGNING THE LIFTMASTER APP STEP 1.0: THE MAIN SCREEN

For the main UI, I didn't go too drastic.  The main point of the app is to open your garage door, so I've left the garage as the main focal point of the screen.  I have never liked the grey color scheme in the app, so I have updated the screen to use the same LiftMaster crimson found elsewhere.  I also didn't like the garage image, so I have replaced it with a simpler, larger garage.

There are several configuration options in the LiftMaster app and most of them are device-specific.  This requires a lot of navigation currently.  For example, to configure an alert, you have to go through Hamburger Menu -> Alerts -> [Choose Location] -> [Choose Device].  I have attempted to make these settings (1) easier to navigate and (2) more contextual by putting them at the bottom of the main screen.  This simplifies the hamburger menu (and may allow it to be eliminated entirely in a future iteration) and allows you to immediately add/remove/configure settings for the door you are currently viewing.

The main change I would make, however, isn't visible on the render above.  I have talked to a few other people who use the LiftMaster app, and collectively we have all experienced the same problem:  It's really easy to accidentally open or close your garage door.  That's because opening or closing requires a simple tap.  Lately, LiftMaster has added an additional TouchID verification before opening the door, but that's really a hack.  Adding an additional authentication step to work around bad interaction design is both poor interaction design and poor security.

I would propose a swipe gesture to open the garage.  That's the main reason I made the garage image larger.  The second thing I did was add a "handle" to the bottom of the garage.  Now, to open the garage, a user will swipe from the handle upward.  Only when the garage door has been completely swiped up (or down) with the door be opened (or closed).  The app could also use haptic feedback to let you know when the swipe has reached 100% (or 0%).  See the GIF below for an example:

Swipe to open

I haven't done the research, but I would imagine 90% or more of LiftMaster users either have only one garage door, or if they have two, primarily use only one.  To accommodate multiple garages today, LiftMaster allows swiping through tabs of devices (gates, door, lights).  This is fine for a small number of devices, and so I left that model in place for my redesign.  However, there was initially no way of seeing all (or at least several) devices at once.  LiftMaster recently addressed this by adding a table view (grid of icons).  This works in that all the devices and their states are glanceable, but you run into the same accidental action product as the larger, single device screen.  My swipe gesture proposal probably wouldn't work well on this table view because the icons are much smaller.  So what I would propose for multiple device is a list view (a.k.a. table with only one column).  This list view would provide the same glance-ability but could use swipe left or right gestures for open/close and tapping on the device could take the user to the full view.

View fullsize

Redesigning the LiftMaster App Step 0.1: The Signup Screen

Wall.  Of.  Text boxes.

The current signup screen (on the left above) is a long list of text boxes and check boxes.  In addition, the white on grey has a certain Windows 95 vibe going on.  LiftMaster is also asking for a LOT of information.  For the life of me, I don't understand why the want my first and last name, zip code, and timezone.  Want it, yes.  Need it, no.  And why both zip code AND timezone?  Wouldn't knowing the zip give you the timezone?  As the saying goes, never ask a question when you can figure out the answer yourself.

The first thing I did was making it look, stylistically, like the login screen.  In general, the only difference between sign IN and sign UP is whether or not the app already knows you.  It makes sense cognitively for the screens to look similar.

In my opinion, the more (and more personal) information you ask for is another step closer to losing a potential user.  In the case of a garage door opener app, all you really need is email (as a username) and password.  Send a welcome email with a teaser for "Registration" with incentives for disclosing additional info; don't clutter the first time registration with requests for unnecessary info.

The password complexity description occupies a LOT of screen real estate; close to 1/5 of the total screen.  Since this app can potentially provide access to your home, a strong password is a must.  However, I would opt for a dynamically appearing/disappearing pop-up when a user taps into the password field the first time.  In the original app, there is also no realtime feedback if your password is valid or if the confirmation matches.  I have addressed with with the green check to indicate the password is both valid and confirmed.

Accepting the terms of use is an unfortunate but probably necessary step for this app.  I debated whether or not to include a defaulted-off toggle button for acceptance but instead chose to optimize for reduced number of clicks.

On to the next step - Landing Page.

Redesigning the LiftMaster App Step 0.0: The Login Screen

As a design and product management exercise, I've been thinking about taking the apps that I use on a day-to-day basis and redesigning or adding the features that I would like to have (see my post on Find my Apple TV Remote).  I really love the utility of the LiftMaster MyQ remote app for opening/closing my garage and monitoring when someone else opens it.  However, I find the app itself fairly lacking in design and there are some definite usability challenges that I am thinking through.

It all starts with the login screen.  In the image above you can see the original screen on the left, and my rework on the right.  In the original screen, the LiftMaster logo is right underneath the iOS status bar with little to no visual break between the two.  In fact, the entire UI seems to be pushed up on the screen resulting in a top-heavy look.  I have attempted to make the entire screen more balanced, with a bulk of the UI in the middle of the screen with more padding around the LiftMaster logo.

Two things really drove me nuts in the original design:  A radio button for the "Remember Login" option and that hideous black Login button done in a mid-90's Microsoft Aero style.  Radio buttons are intended to allow the user to select between multiple, mutually exclusive options.  A single radio button makes no sense.  A checkbox could suffice, but why create a new control.  I've used the standard iOS on/off toggle instead.  For the Login button, I've simply gone with an iOS 10-style flat button.

For the text boxes, I've gone with a more modern look with animating labels and lines rather than boxes.

The remaining changes were about removing clutter from the screen.  The "Forgot Password" link is the only thing I've considered adding back, but it can be made dynamic to only show once a unknown password was entered.  

I removed the "Learn more about myQ" link.  That really belongs in the app store description rather than on the first page of the app.  If you don't already know what myQ is, the app won't do you any good.

Finally for the "sign up" link.  Typical signup for MyQ is on the web when you are setting up a myQ device.  However, rather than removing this from the app, I made it an alternate tab on the login experience.  I can foresee a user wanting to set this up entirely in the garage while installing their myQ garage door opener.  The sign-up screen will be my next project.

Hiring Dashboard

Here's a quick concept I threw together for a company that develops a consultant management/billing platform.  They were looking for a dashboard view for a hiring system.  My emphasis with this concept was a single page view of the funnel and candidates what allowed managing candidates within the funnel and interactions with team or candidates without leaving the page.

Features I Want: Find my Remote

One blog post every 2.5 years even if it kills me.

Over the holidays, I must have lost my Apple TV remote a dozen times.  At least.  Sometimes I lost it in plain sight.  The all-black face of the new remotes makes them almost perfectly camouflaged on dark furniture, in shadows, on in the depths of the couch cushions.  

What I need is a "find my remote" included in the Find My iPhone app.  The latest version of the Apple TV remote uses Bluetooth (and possible BLE), so geolocation should be theoretically possible using the same technology as the many BLE tracking beacons like Tile, TrackR, etc.

However, my Apple TV remote will probably never leave my house, so geolocation is really of limited value (unless you like to travel with your Apple TV).  However, being able to trigger a sound on the remote would be extremely helpful to find the little bugger in the couch, another room, etc.  I know the current remote doesn't include a speaker, but a cheap piezo speaker would be an easy add to future versions.

Locking, wiping, etc. are also of little value for a remote.  I thought about a "disable" or "unpair" function.  But what would be more valuable is the ability to quickly launch or (install and launch) the remote app for iOS.  If you've given up on your remote, a handy way to order a replacement may also be useful.