Beatport Pro Music Store

Beatport's Pro app for the Mac offers a shopping experience that's tailored for the way DJs shop for music. The app lets users analyze their music (tracks, sounds, and playlists) to prepare sets and add music to their playlists. Here are some of the elements of the version 2 interface related to shopping in the app.

Beatport comes close to the experience of shopping in a record store, breaking down music into genres and sub-genres. Beyond that, they provide filters to offer some of the experience you would expect in a boutique shop of having someone select tracks by mood and type of venue/set. Hand picked charts round out the experience of having the in-the-know shop owner as curator to recommend tracks.

The interface for needle-dropping on the track waveforms gives you a decent way to judge a track over the selected preview. They provide a nice small representation of this in the track details inspector and the player at the bottom of the app. The track details show all the metadata I could imagine wanting—BPM, key, duration as well as those genre/mood/venue categorizations—along with purchase buttons. It would be useful if they made the metadata in the details inspector linkable as well.

1. Filtering by mood. Includes an option for exclusions when clicking twice on a button.
2. Adding a BPM range filter.
3. A pre-defined filter based on previously followed artists or labels is provided as a link. This is further filterable by other categories.
4. Search results for an artist, showing track details inspector in the right sidebar, and player at the bottom. Clicking in the highlighted waveform in the player lets you needle-drop to that part of the track.

Car UX

Min Seung Song’s Car UX site captures elements of car interiors with photos of instrument panels, gear boxes, and wheel buttons.

Via Swiss Miss

Cloudwash: Washing machine prototype by Berg

I love Berg’s demo of their Cloudwash smart washing machine concept. The company created the prototype to demonstrate how a smart networked appliance might be better designed. The video provides an excellent walkthrough of their design process.

They simplify the face, which consisted of many controls for dedicated functions, reducing that to “high value functions” only. More functionality is accessible via a smart phone app, which also integrates the device with services such as warranty and supplies management and purchasing.

I haven’t been very interested in the current offerings of smart appliances, particularly networked refrigerators and stoves, but the value of design in this concept is communicated so well that it is compelling. The future of networked appliances is also getting interesting with Google’s acquisition of Nest, for example. The greatest concern I might have for core appliances is trust in the security and reliability of these products. Maybe I just watch too much sci-fi.

Ridley Scott Demystifies the Art of Storyboarding

Ridley Scott, director of Alien and Blade Runner, talks about the importance of fast thumbnail sketching and storyboards in helping him make movies. Scott discusses how storyboards help him capture the imagery of scenes, and how talking through storyboards prepare the creative team by establishing a direction for what they intend to create.

Read more at the article on Open Culture.

Via Ian Smile.

8 Bit Heart

Much <3. So 8bit. Need a heart card for your significant other or kid who loves games? I made a heart for you to cut out. Here you go.

UYI User Interface library

Use Your Interface (UYI) is a showcase of interface and interaction transition design curated by Josh Davey.

First Time User Experiences

First Time User Experiences is a showcase of new user experiences and onboarding flows, created by Krystal Higgins. See also Higgins’ article on First time user experiences in mobile apps.

Via Leon

Precomposed Touch Gestures

Aureus Wade’s Precomposed Touch Gestures are a set of touch-device gestures available as QuickTime animations for use in product demos or presentations. They’ll work in your video editor, and Photoshop.

Origami: Design prototyping with Quartz Composer

Origami is a free toolkit created by the Facebook Design team for Quartz Composer, the visual programming tool that’s available with the Apple XCode development environment. Origami provides patches that can be added to your Quartz Composer library, to create interactive prototypes without programming. Quartz composer’s UI allows you connect patches with wires (or tubes, if you’re familiar with that metaphor) to perform tasks or set behaviors and properties.

Jay Thrash’s video explains how to use it. Jump to 8’22” to see the demo.

Prototyping with Facebook Origami from Jay Thrash on Vimeo.

Basecamp Form Focus

This is a cute interaction for the input focus and data validation on Basecamp"s registration form. The smiling character illustration on the left points out which steps are in focus. When an invalid value is entered, the character makes a concerned face and the pointing hand stays fixed on the highlighted input.

The illustrations on the site do a great job of making you feel like this isn't "business as usual," which is the reason for switching to Basecamp. Simple things that make the customer smile probably go a long way in this case.

1. Smiling, pointing dude.
2. Dude is concerned about your invalid form value and stays pointed at that error to remind you to come back.

Geeklist Sign Up Password Strength

Geeklist's sign up form tells you how secure your password is by indicating how long it would take to crack. Sounds much more understandable and convincing than the typical weak/strong message.

1. A really strong password.
2. A dictionary word is weak.
3. Better, but still weak. The messaging may be convincing enough to get users to think about their choice.

GluePrint: Floating guides for your mockups

I like the simple idea behind GluePrint. Drop your mockup or visual design comp onto the app and it provides a semi-opaque window of the design. I can see it being useful for overlaying on top of your browser, like an onionskin, while you’re working on front end implementation. And even in other reverse scenarios, like for creating new designs based on an existing version of your product.

explainshell: Unix Manual pages explained visually

Idan Kamara’s explainshell displays Ubuntu’s manpage repository visually like a schematic, allowing you to highlight parts of a commands parts (command, arguments, options) and view a callout that describes what the part does.

Shim Browser Testing Tool

Shim is a node.js-based browser-compatibility tool that lets you synchronize several devices/browsers and surf the same pages simultaneously on all of them.

Ghostlab Browser Testing Tool

Ghostlab is a tool for synchronized browser testing. It synchronizes scrolls, clicks, reloads and form input across all connected clients so that you can test a full user experience.

YouTube Delete Timer

YouTube puts up 2 speed bumps when you try to delete a video from the video manager. This technique slows down the user about to peform a destructive action, and protects them from inadvertently deleting content.

1. Selecting Delete action shows dialog confirming action.
2. A second confirmation dialog requires confirmation, but the Delete button is disabled until the countdown timer runs out.

How might we...

We know that starting with why is important to product design, but what comes next? "How" would definitely come soon after. But there are many ways to propose how to begin exploring possibilities.

The 99u points to a number of questions to ask before starting a project, and how language matters. They refer to Warren Berger"s article in the Harvard Business Review about one of the questions top innovators ask when confronted with a design challenge. It starts with the phrase "How Might We?" (HMW). It boils down to the selectivity and power of words, and in this case particularly with the choice of the word "might" rather than "can" or "should."

Here's why the words make a difference:

When people within companies try to innovate, they often talk about the challenges they’re facing by using language that can inhibit creativity instead of encouraging it, says the business consultant Min Basadur, who has taught the How Might We (HMW) form of questioning to companies over the past four decades. “People may start out asking, ‘How can we do this,’ or ‘How should we do that?,’” Basadur explained to me. “But as soon as you start using words like can and should, you’re implying judgment: Can we really do it? And should we?” By substituting the word might, he says, “you’re able to defer judgment, which helps people to create options more freely, and opens up more possibilities.”

Tim Brown of IDEO talks about how the words carry meaning for problem solving.

[W]ithin the phrase, each of those three words plays a role in spurring creative problem solving. "The "how" part assumes there are solutions out there — it provides creative confidence," Brown said to me ""Might" says we can put ideas out there that might work or might not — either way, it’s OK. And the "we" part says we"re going to do it together and build on each other’s ideas."

Check out how IDEO are using the HMW phrasing at Open IDEO to get people thinking about and proposing how to solve challenges for social good.

I"ve been trying to do more to accentuate the positive, and keep conversations open to possibilities in my personal life and work, but it can be difficult to talk about solving problems without bias given agendas, missions, roadmaps, prior knowledge, and history.

Choosing the word "might" feels like one way to begin early problem definition and solving without the weight that comes from words like "should" or "can." It's like the freedom in the tentative and erasable nature of a pencil rather than the indelibility of a pen. "Might" leads to conversation that is open to consider different directions rather than saddling you with choices that feel cemented too early.

Min Basadur"s story about discovering the concept for Coast soap at Proctor and Gamble embodies this idea of opening up the conversation. The word "might" can lead to re-asking the question, and maybe even realizing that you"re asking the wrong one. What I love most about that story is that ultimately asking "How might we" led back to asking "Why?"

Along with the broader notions of starting with why, the HMW question seems a very powerful tool for facilitating design discussions and problem definition. I don't see very concrete, prescriptive techniques here, which is a good thing. The suggestion of asking the HMW question may be enough, but Brown warns that the size and types of design problem matter. HMW may not work for problems as big as "How do we solve homelessness?"

Read more about HMW in the Harvard Business Review.


These are some of the quotes I've collected from artists and designers that have some relevance to doing business in web and software product design.

Art and Design Movie Quotes

I've made it a habit to try and find documentaries about an art/craft to watch whenever I fly, so it made sense to take notes as I would in my journal and put them up here for inspiration. You'll find quotes from the following movies here:

Sound City (2013)

Keith Olsen, producer engineer, on the role of the producer.

"He is the vehicle to get the artist's creativity on the tape in a way that is accessible to the marketplace. What you have to do is get the listener to claim what you've done as theirs."

Trent Reznor on digital tools and starting with a message.

"Now that everyone is empowered with these great tools to create stuff has there been a lot more great shit coming up? Not really. You have to have something to do with those tools. You should really try to have something to say."

Dave Grohl / James Brown on constraints.

"One of the things that I think makes good music is some sort of restriction. ... That's where 24 track mentality comes in. You commit to what it is. With Pro Tools you can always come back to it, or you can change it, or you can add to it to try and make it work, because you're being forced to make choices--creative ones."

Dave Grohl on creativity.

"Do it. Make it simple. Make it fast. Don't overthink it. Let it come straight out of you and do it.”


Side by Side (2012)

Director Danny Boyle on the evolution of movie watching from the movie theater to computer and mobile devices.

You gotta go with it, and if you become unable to deal with it, then thats fine because it means your time is finished and it's time for othe people to take it on.

Vittorio Storaro, cinematographer on accepting change.

Unless you are participating in the revolution, we will be lost in past. We can’t count ourselves out and say, “We don’t care. It’s up to you guys.” No. So we have to be in.

Michael Ballhause, cinematographer, on creativity and medium.

Everything comes down to one thing. If you do something with your heart. If you do something you're convinced of and feel about it, it doesn't matter what you're using.


On Creativity

The Secret to creativity is knowing how to hide your sources.
–Albert Einstein

Everything you can imagine is real.
–Pablo Picasso

Experience is the name everyone gives to their mistakes.
–Oscar Wilde

“In order to be irreplaceable one must always be different.”
Coco Chanel

And just as Steve loved ideas, and loved making stuff, he treated the process of creativity with a rare and a wonderful reverence. You see, I think he better than anyone understood that while ideas ultimately can be so powerful, they begin as fragile, barely formed thoughts, so easily missed, so easily compromised, so easily just squished.
Jonathan Ive at the Steve Jobs Tribute on the Apple campus. His talk starts around 47:17 right after Tim Cook introduces him.

I'd like to talk about the one thing that's been consistent over the years—the genesis and power of creativity. ... It’s all about how you’re putting what you do together. The elements you’re using don’t matter. Purity of human expression and experience is not confined to guitars, to tubes, to turntables, to microchips. There’s no right way, no pure way of doing it—there’s just doing it.
– From Bruce Springsteen's inspiring 2012 SXSW Keynote Speech.

Rumble, young musicians, rumble. Open your ears and open your hearts. Don't take yourself too seriously, and take yourself as seriously as death itself. Don't worry. Worry your ass off. Have unclad confidence, but doubt. It keeps you awake and alert. Believe you are the baddest ass in town-and you suck! It keeps you honest. Be able to keep two completely contradictory ideals alive and well inside of your heart and head at all times. If it doesn't drive you crazy, it will make you strong. And stay hard, stay hungry and stay alive. And when you walk on stage tonight to bring the noise, treat it like it's all we have-and then remember it's only rock 'n' roll.
– From Bruce Springsteen's inspiring 2012 SXSW Keynote Speech.

On Product Design

Good design is as little design as possible.
-Dieter Rams

The simplest way to achieve simplicity is through thoughtful reduction.
John Maeda

Working on the right thing is probably more important than working hard.
–Caterina Fake

You spend so much more time to make it less conspicuous, less obvious. And if you think about it, so many of the products we're surrounded by, they want you to be very aware of just how clever the solution was.
-Jonathan Ive

Can we do the job of those 6 parts as one?
–Jonathan Ive.

A very important turning point for me was the term 'obsessive sketch' by Takama Kyoshi, the haiku master. When the poet's sentiments are overly visible, the audience may become uncomfortable. By writing simply and only about what is there, the audience is drawn into the poet's world. Their imagination is stimulated, and a silent connection is established. I believe this is where the most important aspect of the Japanese sense of beauty lies.
-Naoto Fukasawa

If I had to summarize our learnings in three words: "simple trumps complete."
Neil Hunt on Netflix A-B testing

I don’t need every customer. I’m primarily in the business of selling a product for money. How much effort do I really want to devote to satisfying people who are unable or extremely unlikely to pay for anything?…
Marco Arment, Instapaper

Some people argue software should be agnostic. They say it's arrogant for developers to limit features or ignore feature requests. They say software should always be as flexible as possible.

We think that's bullshit. The best software has a vision. The best software takes sides. When someone uses software, they're not just looking for features, they're looking for an approach. They're looking for a vision. Decide what your vision is and run with it.
Jason Fried, Getting Real

When you build an app always look out for the non-essential features. Make sure they don’t make it into your v1.0. They slow down your release, they dilute your focus, they require resources that pull you away from perfecting the core of your app, and they open the door to more bugs at launch.
Jason Fried

The best designers and the best programmers aren’t the ones with the best skills, or the nimblest fingers, or the ones who can rock and roll with photoshop or vim, they are the ones that can determine what just doesn’t matter. That’s where the real gains are made.

Most of the time you spend is wasted time on things that just don’t matter. If you can cut out the work and thinking that just doesn’t matter you’ll achieve productivity you’ve never imagined. It’s there if you just don’t pay attention to the things that don’t matter.
Jason Fried

“Minimum Viable Product”. MVP, if you aren’t familiar, is an idea from the Lean Startup scene. In a nutshell, it means to do as little as possible so you can learn if you did the right thing or not.
Jason Fried

How do you know when it's done? The question is: when is it good enough?
Good enough, for those that seek perfection, is what we call it when it's sufficient to surpass the standards we've set. Anything beyond good enough is called stalling and a waste of time.

If you don't like your definition of 'good enough', then feel free to change that, but the goal before shipping is merely that. Not perfect.
Seth Godin

"Good design, when done well, should be invisible."
Jared Spool

"So much complexity in software comes from trying to make one thing do two things."
Ryan Singer

"When the form changes, so does the underlying business model, which of course changes the function as well. … The question that gets asked about technology, the one that is almost always precisely the wrong question is, "How does this advance help our business?" The correct question is, "how does this advance undermine our business model and require us/enable us to build a new one?" … When a change in form comes to your industry, the first thing to discover is how it will change the function."
Seth Godin on how to react to change

"When discussing any product, technology, or idea, it’s easy to focus only on its value, what problem it is trying to solve for the user. This is a good start, and has historically been the only consideration. Recently however, people have started to realize that it also has to be well designed; it can’t be painful to use.

What’s most important is their relationship: as long as value is greater than pain, you’ll be ok.

Just because value > pain doesn’t mean that you’re done, it just means that it’s good enough to ship.

As pain goes down, people will use a product more often for less valuable tasks. Value is still > pain but now it takes much less value to trigger usage. … [R]educing pain, not improving the value of a product in any way, can significantly affect usage."
Scott Jenson on Mobile Apps and value versus pain

"Making something obvious has a cost. You can’t make everything obvious because you have limited resources. I’m not talking money–although that may be part of it too. I’m primarily talking screen real estate, attention span, comprehension, etc.

Making something obvious is expensive because it often means you have to make a whole bunch of other things less obvious. Obvious dominates and only one thing can truly dominate at a time. It may be worth it to make that one thing completely obvious, but it’s still expensive.

Obvious is all about always. The thing(s) people do all the time, the always stuff, should be obvious. The core, the epicenter, the essence of the product should be obvious."
Jason Fried on designing The Obvious, the Easy, and the Possible

"If we limit ourselves to what we envision at the outset, we'll miss opportunity. If we had stopped at what the Wright Brothers could envision, we wouldn't have gotten very far."

(In 1910, Wilbur Wright didn't believe planes would be able to carry large numbers of people as trains did, or would be ever able to carry freight. The first air cargo was in 1913.)
–Brock Rumor

I think there’s a benefit to being one of six people that no one knew. No VCs would return our calls and we were broke and bootstrapping it and operating under the radar so we could focus on the most important things: the product, the users, what we were building. There’s all this noise, the tech-crunch, which you have to tune out if you want to build a good product. None of that stuff is additive; it all takes away from building a product.
-Caterina Fake on developing in obscurity.

If you are not embarrassed by the first version of your product, you’ve launched too late.
-Reid Hoffman, quoted in Mark Goldenson’s 10 lessons from a failed startup, found via svn.

Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius–and a lot of courage–to move in the opposite direction.
Albert Einstein

Designers prune.

Left to its own devices, the mob will augment, accessorize, spam, degrade and noisify whatever they have access to, until it loses beauty and function and becomes something else.

The tragedy of the design commons.


It seems democratic and non-elitist to set it and forget it and let the users take over. But the tools we use (Wikipedia) and the brands we covet (Nike or Ducati) resolutely refuse to become democracies.
-Seth Godin

The easiest way to get people to do what you want them to do is to start with people who want what you want.

Identify, organize and excite people who are already predisposed to achieve what you had in mind and you're much more likely to have the outcome you seek. It's far easier (but less compelling) than turning strangers or enemies into customers/voters/supporters/colleagues. Over time, an engaged and motivated base of followers is the single best way to earn more followers.

You used to be stuck with whoever walked in the door or opened your mail. Today, you change minds indirectly, by building a tribe that influences via connections to others.

-Seth Godin

On Running a Design Business

"My model for business is The Beatles: They were four guys that kept each other's negative tendencies in check; they balanced each other. And the total was greater than the sum of the parts. Great things in business are not done by one person, they are done by a team of people."
–Steve Jobs

Insulate yourself…
from anonymous angry people
Expose yourself to art you don't yet understand
Precisely measure the results that are important to you
Stay blind to the metrics that don't matter
Fail often
Lead, don't manage so much
Seek out uncomfortable situations
Make an impact on the people who matter to you
Be better at your baseline skills than anyone else
Copyedit less, invent more
Give more speeches
Ignore unsolicited advice
Seth Godin

Two elements of successful leadership: a willingness to be wrong and an eagerness to admit it.
Seth Godin

80 percent of success is just showing up.
–Woody Allen

We are what we repeatedly do. Excellence, therefore, is not an act, but a habit.

In my walks, every man I meet is my superior in some way, and in that I learn from him.
-Ralph Waldo Emerson

UXmas 2013

Thirst Studios and UX Mastery kicked off their UXmas 2013 user experience design advent calendar. Every day throughout December in the lead-up to Christmas, a new ‘gift’ to the UX community will be revealed. It could be an article, a video, a sketch, or something else.