jQuery Mobile Graffle Stencil

Had to whip up an OmniGraffle stencil for jQuery Mobile. I submitted it to Graffletopia, but it isn’t live yet. You can download it here in the meantime. Just put in the user name > Library > Application Support > OmniGraffle > Stencils folder and unzip.

Another great resource to help in your mobile web design projects is the Glyphish icon library- free and inexpensive icons for your mockups.

UXpert Team- Cross Channel Design and Development Solutions

Happy new year! I’m excited to say our group is continuing to grow, not just with more clients and projects, but in our experience as designers. In 2011 we had the good fortune to lead the design for

One thing that was common across many of these projects was the need for a comprehensive cross channel UX solution.

So we’re offering something new this year, a complete design and development solution for classic web apps + mobile  web apps + installed apps for smartphones and tablets.

We’ve pulled together designers and developers from our little group to build the UXpert Team. Our team includes:

• a senior UX designer
• a creative lead
• 2-4 very experienced developers to code the user interface and provide integration support

So if you have a project that needs expert help, our first opening is mid-January. Email me for details.

Testing the iPad at the North Pole

Happy holidays to all of our followers, clients and friends.

Update: Apparently this is actual footage for testing at the South Pole.

Cloudera Manager’s “Fantastic Interface”

We’re proud to have worked with Cloudera’s team and our friends at Projekt202 to design Cloudera Manager, the industry’s first end-to-end management application for Apache Hadoop. Read more on Tech Crunch.

Congratulations Cloudera on the release and the great press so far. Here’s my favorite quote:

“We were treated to demos of Cloudera Enterprise 3.7 at Hadoop World, and it really blew us away with its functionality for total lifecycle management of Hadoop Clusters. That lifecycle management includes planning, creation of clusters, management of their health, control of access, logging/auditing and many other tools, all put together in a fantastic interface.”

-Bob Gurley, SYS-CON Media.

Mobile Web Option: Backbone.js

I was speaking with some of our developers last night about a mobile web options like jQTouch, jQuery Mobile, Sencha Touch. And then we started talking about Backbone.js. I first heard about Backbone last week from a prospective client who mentioned they use it with PhoneGap to create their apps. I guess I’m late to the table on this one, but in case you haven’t seen Backbone.js either, check out these great examples from their site:

Jérôme Gravel-Niquet has contributed a Todo List application that is bundled in the repository as Backbone example.

DocumentCloud

The DocumentCloud workspace is built on Backbone.js, with Documents, Projects,Notes, and Accounts all as Backbone models and collections.

LinkedIn Mobile

LinkedIn used Backbone.js to create its next-generation HTML5 mobile web app.

Flow

MetaLab used Backbone.js to create Flow, a task management app for teams.

AudioVroom

AudioVroom is a free music streaming app that allows you to listen to your Facebook friends like radio stations.

Foursquare

Foursquare is a fun little startup that helps you meet up with friends, discover new places, and save money.

Do

Do is a social productivity app that makes it easy to work on tasks, track projects, and take notes with your team.

Groupon Now!

Groupon Now! helps you find local deals that you can buy and use right now.

Basecamp Mobile

37Signals used Backbone.js to create Basecamp Mobile, the mobile version of their popular project management software.

Slavery Footprint

Slavery Footprint allows consumers to visualize how their consumption habits are connected to modern-day slavery and provides them with an opportunity
to have a deeper conversation with the companies that manufacture the goods they purchased.

Trajectory

Trajectory is an agile software planning tool used to discuss wireframes, record decisions made, relate user stories and bugs to discussions, and track your progress and plan the future.

SoundCloud Mobile

SoundCloud is the leading sound sharing platform on the internet.

Pandora

When Pandora redesigned their site in HTML5, they chose Backbone.js to help manage the user interface and interactions.

CloudApp

CloudApp is simple file and link sharing for the Mac.

SeatGeek

SeatGeek‘s stadium ticket maps were originally developed with Prototype.js. Moving to Backbone.js and jQuery helped organize
a lot of the UI code, and the increased structure has made adding features a lot easier. SeatGeek is also in the process of building a mobile
interface that will be Backbone.js from top to bottom.

Talking Points Memo: Baroque

Baroque is the editor currently powering the homepage of Talking Points Memo.

Grove.io

Grove.io provides hosted IRC for teams.

Kicksend

Kicksend is a real-time file sharing platform that helps everyday people send and receive files of any size
with their friends and family.

Shortmail

410 Labs uses Backbone.js at Shortmail.com to build a fast and responsive inbox, driven by the Router.

Battlefield Play4Free

Battlefield Play4Free is the latest free-to-play first person shooter from the same team that
created Battlefield Heroes.

Salon.io

Salon.io provides a space where photographers, artists and designers freely arrange their visual art on virtual walls.

Quote Roller

Coding Staff used Backbone.js to create Quote Roller, an application that helps to create, send, organize and track business proposals with ease.

TileMill

Our fellow Knight Foundation News Challenge winners, MapBox, created an open-source map design studio with Backbone.js: TileMill.

rround.me

rround.me uses the HTML Geolocation API to discover tweets, YouTube videos, Instagram photos, Foursquare spots, and other happenings
posted by people close to you.

Blossom

Blossom is a lightweight project management tool for lean teams.

Insta-great!

Elliott Kember and Hector Simpson built Insta-great! – a fun way to explore popular photos and interact with Instagram on the web.

Decide

Decide.com helps people decide when to buy consumer electronics.

Trello

Trello is a collaboration tool that organizes your projects into boards.

BitTorrent

BitTorrent used Backbone to completely rework an existing Win32 UI.

Fluxiom

Fluxiom uses Backbone.js and HTML5 to deliver a seamless upload experience from the desktop to the cloud, including drag and drop, live previews, partial uploads, and one-click sharing.

Chop

Chop is a little app from ZURB that lets people slice up bad code and share their feedback to help put it back together.

Blackcomb

Opzi used Backbone.js to create Blackcomb, a web-based platform for collaboration applications.

QuietWrite

James Yu used Backbone.js to create QuietWrite, an app that gives writers a clean and quiet interface to concentrate on the text itself.

Tzigla

Cristi Balan and Irina Dumitrascu created Tzigla, a collaborative drawing application where artists make tiles that connect to each other to
create surreal drawings.

New O’Reilly Book: Mobile Design Pattern Gallery

We recently had a new mobile project starting and all of our experienced mobile designers were booked. This gave me less than a week to ramp up a new designer. So I made a quick tutorial with lots and lots of screenshots, illustrating good design and not so good design. Gradually a set of patterns for mobile application design emerged.

Even as I was cataloging these patterns, I knew that the real value wasn’t only the pattern identification, but in the hundreds of examples I’d captured. So instead of a tome of abstract patterns only an author can love, this book is a showcase, or gallery, of mobile application design. This book includes 400+ current screenshots from iOS, Android, BlackBerry, WebOS, Symbian and Windows mobile applications, organized by pattern type.

Check out the:

• New website www.mobiledesignpatterngallery.com and sign up for a free copy of the book when it is released
• Preorder Mobile Design Pattern Gallery: UI Patterns for Mobile Applicationson Amazon
• New blog, and subscribe, I’ve got lots of good articles in the hopper
• Flickr photostream with over 600 screenshots organized by pattern type
• Sample Chapter UX Booth

And follow me on Twitter, @mobilepatterns, for expert mobile design tips.

BabyCenter’s My Baby Today App is Live

When my son was 4 weeks old, the product manager at BabyCenter, a Johnson & Johnson company, asked if my team could design their iPhone and Android apps for new parents. They already had a successful pregnancy app, but needed an application to support new parents. The mobile application would be called My Baby Today and provide helpful resources and checklists for new parents.

Since I had used BabyCenter’s web site and mobile app throughout my pregnancy and found it very helpful, I was excited and flattered to work on this project. This first version has the baby basics, and I hope the see more features added soon. The app is available for iOS today- Oct 12- in the App Store.

2 UX Designer Positions

Two of our clients are hiring full time UX designers: Allegiance in Austin and Cloudera in CA. If you have a product application design background, with multiple years experience designing producivity applications- these could be a great fit for you. Strong interaction design skills and data visualizations experience are important.

1. Allegiance

User Experience Designer
Location:
Austin, TX or Salt Lake City, UT

Position Summary
Are you passionate about creating user-friendly, efficient, and memorable web applications? Do you want to work in a customer driven environment? Enjoy pushing the frontiers of modern web technology for thousands of users across many enterprises? Are you also a CSS Ninja, jQuery Czar and pixel counter? If so, we have the job for you! Allegiance is looking for a User Experience Designer.
Allegiance builds a web platform that helps its users listen to their customers. We do this by helping our clients collect the voice of their customer through surveys, social media, phone applications, mobile applications, SMS, and whatever else might be next. Then we convert this data into useful information and insight through interactive online reporting, dashboards, and data visualizations.
In this position, you will be responsible for designing the UI experiences that both our business and consumer user see! We are looking for a professional who can immerse themselves in our user’s world, design workflows, wireframes, prototypes, and create great user experiences. We’re looking for a user experience designer that has a blend of artistic product design skills as well as solid skills in HTML/CSS/Javascript. You will help keep our Agile engineering process efficient, and wow our customers.
Responsibilities
Continuously learn about needs, listening initiatives, and data communication challenges from customers and prospects
Discover gaps in our product’s usability and workflow
Design the ideal user experience based on functional requirements and our persona’s needs.
Develop early wireframes and high fidelity mockups
Conduct usability tests with our customers
Create and iterate through mockups and prototypes based on feedback
Create and inspire adherence to user interface standards across the product
Ability to take designs from PSD or wireframe to product
Help the engineering team build high quality, cross browser interfaces
Be the artist for our user interface!
Skills
Experience developing SaaS/enterprise web application interfaces
Strong knowledge and experience with web applications, HTML & CSS
Experience with Javascript and jQuery
Experience with Adobe Creative Suite
Strong organization skills and ability to multi-task
Experience designing BI tools or reporting applications a plus
Experience with server-side web frameworks such as ASP.Net a plus
Education and Experience
5+ years of UX design experience and expertise in interaction design fundamentals
A degree in Interaction Design, Visual Design or equivalent experience
Application Procedure
Qualified candidates submit resume to jobs@allegiance.com and reference the User Experience Designer position.
In addition please include the following:

• Cover letter indicating why you would be the best fit
• Portfolio of your most recent application designs
• Link to your website, if you have one
• Tell us about one “I wish I had thought of that” moment you had recently

2. Cloudera

The Role

Cloudera is looking for a User Experience Designer to join its growing team. This role has a unique
opportunity not only to create some great products but also to set the standard for Cloudera’s overall
interaction design. Responsibilities include:

User research: organizing end user interviews and usability tests as input into the design process.

Interaction design: work with product management to take high level requirements or use cases and
elaborate those as process flows & wireframes.

User interfaces design: create the reference UI patterns that will create the visual signature for all of
Cloudera’s products. Evolve wireframes into high fidelity mockups.

Product design: collaborate with product management and engineering on various aspects of the
product design & development process

Qualifications

For this role, some prior experience in user and interaction design is a firm requirement. The ideal
candidate is someone who has done user or interaction design before as part of a larger team and is
ready to step up into a leadership role. More important are the candidate’s attributes. We are looking
for:

Analytical rigor – someone who understands design as a method & data driven not a “flash of brilliance”
driven process

High energy – keeps a fast pace and encourages others to keep up with them

Nosy – knows enough about product management to call out bad inputs. Knows enough about UI
development to call out bad outputs.

Persistence – can visualize what a win looks like and won’t accept less than that

Attention to detail –keeps iterating on an issue until they’re satisfied they’ve found the optimal solution
for the user

Good taste

Interested candidates should submit a resume and some screenshots of past work to me, theresaneil at gmail. No cover letter
necessary.

About Cloudera

Cloudera provides software and services for Hadoop, the leading platform for petabyte scale data
management. Founded in 2008, Cloudera has more than 50 customers including Visa, eBay, Bank of
America, Netflix and Groupon. Cloudera is backed by leading institutional and individual investors
including Accel Partners, Greylock Ventures, Diane Green and Martin Mickos.

Bad Mobile Apps- UI design gone wrong

I recently ran a post requesting bad app submissions for a chapter I’m writing on Mobile Design Anti-Patterns. So in this context “bad” refers to non-standard, or less than elegant interface designs, not “bad” like crashes a lot or doesn’t have key features. Robi, the creator of Apptentivewas selected to win a new copy of Simple & Usable.

Here are the submissions:

I’ll pick the best from these to include in the Anti-Pattern chapter and discuss the problems with the UI and possible solutions.

Please share any more you run across, just provide a link in the comments or email me a screenshot, theresaneil at gmail.

Cool Software for Kids

This is a little off topic from the normal posts on interaction design and UI design patterns. But I was really impressed by the software my son used at two camps this summer:

• Game Salad for designing games for the iPhone and iPad
• Lego Mindstorms NXT for the robotics camp we hosted for seven 10-12 year olds this week.

Game Salad

This installed application for the Mac has a slick drag and drop interface and makes it pretty simple to design a multi-level game for the iPhone or iPad. In one week my son created a 10 level game with a fire breathing dragon. The only thing that would make this tool better is if they offered image libraries for use. I would have definitely paid to license a library instead of spending an hour trying to find the “right” dragon egg for my son to use in class the next day.

Lego Mindstorms NXT

The NXT software is pretty cool because it has a simple drag and drop GUI, but you can also use Python for development. There are sample programs to download that even show best practices for commenting code. In our camp, the kids built their own robots from scratch and coded them.

Here’s a short clip of the final robot war. The goal was to be the last one in the ring (black tape triangle) after pushing the rest of the robots out.