Possible, Beautiful, Fast
In the book Beautiful Code (read for free here) a chapter titled “Correct, Beautiful, Fast (in That Order)” explains a process to write fast and beautiful algorithms. This same framework, except replace correct with possible, is the key to success when designing and building products.
Possible
Since there is no “correct” answer for a product, possible is simply a better word. The goal is to make a live working prototype of your product regardless of how ugly or slow it is. Why? Something magical happens when a product is real. It’s exciting when things actually start working. You’ll immediately see what works, what doesn’t, and discover things that are invisible in a wireframe. Lastly, do not underestimate the energy it provides. It’s going to be a long arduous road, but when something is “real” the path suddenly becomes straight and clear.
How do you accomplish this? Grab a bold sharpie and starting drawing. The boldness will force you to make broad strokes and not get bogged down in tiny details. Trash and start over as often as needed.
When you have a decent sharpie mock, start writing code. That’s right, start coding. Do not make pixel perfect mocks. Remind yourself that the goal is to make the product possible first. Live in a web browser, live on an iPhone, something usable that does X and then Y and finally Z.
As for dev, a quick prototyping language is a must. Use the framework’s scaffolding where ever possible (Rails scaffolding, bootstrap, UIKit, etc). Avoid refactoring, avoid over thinking the code, and definitely do not optimize. A small feature you thought was awesome in the design phase but will take hours to code? Put it on the back burner for now.
Remember, your goal is to simply make it possible.
Beautiful
Now that you have a working product, it’s time to polish. I love this part because a beautiful product can be the difference between a sign up, a download, or a user walking away. Beautiful means much more than shiny buttons (or flat now a days). It means filling in all the gaps of your product. Work on things like the right sign up flow, the fringe things that will make your product more intuitive and more approachable.
Play with color palettes, animations, polish, polish, and polish some more. Smooth out the rough edges until it’s something you can be proud to launch. If you have a designer, consider yourself lucky! Work closely with them to make sure everything is pixel perfect, including all those 1px adjustments.
Fast
Now that you have a beautiful live product, it’s time to make it fast. It’s been proven, speed matters. Refactor your code, follow the page speed rules, make things take 1/10th of the time they used to. Reduce the sign up flow from four steps to one.
The goal of framework is to get your product launched without wasting time and effort. If you have a task ahead, first classify it as possible, beautiful, or fast. Don’t do it if it’s not helping you to reach one of those three goals. Your products will be better products and they will be built faster.