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.

November 8, 2012
Scriptkiddie Chronicles: The better ui choice is actually worse

Looking better does not equal better functioning. 

scriptkiddie-chronicles:

Just a minute ago I did not have blog, but just now I read an article featured on Hacker News, written by Chris Norström and titled: “Invention: Multiple-Choice “Windowed Slider” UI” . I wanted to reply in a comment because I do not agree with Chris. While typing my comment, I realised it…

Great analysis of what seems on the surface to be a clever UI design.  In truth the idea is too vague to be applied to such different set of control elements and doesn’t hold up.  

11:14am  |   URL: http://tmblr.co/Z6oLOxWsY8NF
  
Filed under: UX Design 
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:

 

March 1, 2012
Why are logos getting simpler? | Forty

1:45pm  |   URL: http://tmblr.co/Z6oLOxHIDWEE
Filed under: ux design brands 
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.