May 7, 2013
Brilliant user registration flow at Poncho.io

My buddy @ckolderup just posted a link to Poncho.io and I wanted to document this fantastic example of a great user registration experience.

Poncho.io is a free service that delivers “personalized weather reports every weekday morning, tailored to your routine, delivered by email or text.”

image

While i havent received any updates yet, I was blown away by the User Experience of the Registration Process and a really nice Flat Visual Design.  Here are a few screenshots and the basic flow.

You either scroll down or click the bottom “Find Out How” button and the page seamlessly scrolls down to reveal the devices which you could receive the updates on.  

image

The site itself is responsive and when you view the site from a tablet, i’m assuming that it assumes it is the device you will be receiving the updates on and changes what devices are shown.

image

You enter your name and click get started and the page animates up to give you a nice little introduction and asks for your zip code.  Just look at that microcopy!!

image

After you set up your zip more animation and the site asks what time you wake up in the morning and here it get’s super slick.  It when you adjust the time of day you update the color & shade of the page from bright and sunny to dark and moody.

image

image

image

You then follow a few more steps letting the system know if you exercise outside or need to take a pet outside all of which have smooth animations and great copy.

The next really interesting interaction is when you select you commute to work which i assume will give updates or warnings about any troubles with the trains during my commute.  

When you select the Train option you are presented with all of the NYC subway lines and are allowed to select one or more option by clicking and clicking again to unselect.  Great use of hover and onstates.

image

image

You then enter your leave work time and select what delivery method you want, enter and email & password and thats it, all done!

You can go in after and adjust any of the settings you’ve selected and you also can scroll up at any point and adjust any selections made previously.

image

I dont think i’d be far off by saying that this was certainly the product of a lean team of a talented UX designer, a Visual designer and programmer sitting in a room and hammering this product.

Excellent work and I cant wait to get some updates.

September 3, 2012
‘Text is a UI’: How Journalists Can Work Usability into Online Words - 10,000 Words

Important Stuff.

1:39pm  |   URL: http://tmblr.co/Z6oLOxSiMbIC
  
Filed under: UX User Experience UI 
August 30, 2012
Dear Dustin Curtis - A response from UX lead at American Airlines

Dustin Curtis is a smart guy.  However, he foolishly assumed that redesigns in the corporate space are things that giant companies just able to roll out.  On the contrary and as pointed out in a response to his proposed refresh, the lead UX designer at AA.com does a great job pointing out the insane web of approvals, cost benefit analysis and time sinks associated with being part of a large organization.

I have some experience with this as well.  As a UX designer i’ve been at large corporations with multiple products who even thought their main focus was on digital products, still fell into the same pitfalls described above and in the article.  I’ve also been part of smaller companies and agencies where it was not as difficult to get a crazy idea heard by the product owner or manager.  In the hands of a good experience designer, a crazy idea, when backed by solid logic and a desire to push the envelope, can often inspire change and a new direction at a company of any size.  

11:12am  |   URL: http://tmblr.co/Z6oLOxSRI4Pk
Filed under: user experience UX 
March 20, 2012
KOCHA: iOS Lock Screen | Brye Kobayashi

Brye Kobayashi over at kurocha.blogspot.ca has an amazing concept for a change to the slightly awkward new implementation of the slide up for camera feature of the lock screen.  I dig this a lot.

March 8, 2012
NYU Game Center Lecture Series: Ivory Tower Defense on Vimeo

Here is a video about the creation and design of games.  Its a lecture from the NYU Game Center Lecture Series.  Worth watching if you are interested in the research and design of games.  

March 6, 2012
Nice design for ‘Actions’ in content block headers

I was reading some reviews of Lightroom 4 Beta and noticed some really nice design over at the Adobe Lightroom 4 Landing Page.  While the whole page is nicely designed, I particularly liked the way they handle ‘actions’ within the content block module headers.


It’s all in the details

The headers in the sub-content have two functions here.  The first is to identify the content its displaying and the second is to provide a secondary action contextually related to the content within.

  

Above is an example of three different actions on the same type header.  I think this works as an alternative to the typical “Read More” or “Follow us on Twitter” at the bottom of each module.

Its also nice that its contextual.  The Facebook module action is the Like button branded with facebook colors with like count while the content is facebook updates.  The Twitter module contains Tweets and the header action is follow with Twitter branding.

Nice work.

11:33am  |   URL: http://tmblr.co/Z6oLOxHZa6no
  
Filed under: ux design user experience 
March 2, 2012
Solving Responsive Navigation With Patterns

I came across 2 good articles on Responsive Navigation worth sharing.    

Brad Frost over at Bradfrostweb.com has a nice little write up with some pros / cons of the typical use cases for responsive navigation including links to examples of his approaches.

Top and left navigations are typical on large screens, but lack of screen real estate on small screens makes for an interesting challenge. As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Mobile web navigation must strike a balance between quick access to a site’s information and unobtrusiveness.

Example:

Brad Frost's Example

The other article is by the fine folks at Bleep Systems boils his analysis down to a recommendation of using an HTML Select box which I do not think is the clear winner in every case simply for the lack of style control.

Example:

 

February 29, 2012
Leonardo's Kitchen Nightmare - Boxes and Arrows: The design behind the design

Here is a nice lesson which applies to both visual and UX designers, written by the fine folks over at Boxes and Arrows. 

You should read the article, but the key points they make are:

1. Don’t be afraid to fail

I hear this one a lot. Maybe you shouldn’t be afraid of failing, but you should be afraid of not using your skills and talents to actually accomplish SOMETHING.  If you are just rehashing the same bullshit without putting thought or innovation into it, you should be afraid when the client or audience rejects it.

2. Use positive judgement to explore the value and benefit of idea.

This lends itself to my point of making sure your designs and your ideas have value and benefit.  You should always ask yourself things like, ‘is this better for the user?’ ‘does this change make it simpler, easier to use’ or ‘does this make the desired intent clearer?’

3. Do not underestimate the importance of execution

This is often over looked at times by the idea it’s self.  Sometimes a great idea is not well received by the client or something which you simplified over and over is still too complicated for them to grasp simply because you were unable to clearly communicate it in your designs due to poor execution.  You need to whittle and whittle down till you get to the core of the idea or solution and then be able to tell a story from it to the client.  Often It’s not just how the solution works which needs to be communicated, its how the solution will work for them.