Blog Posts tagged with: design

Aug 28 2013


Architecture and Financial Success

At our most recent internal conference, Tim Ewald gave us a passionate talk on the topic of architecture and design. He said that a successful solution must deliver features, while exhibiting certain desirable properties and meeting constraints. Features are the things it should do: send email, display cat photos, and display notifications. Properties are the less visible characteristics, sometimes called "non-functional requirements." Constraints are the boundaries that the solution cannot exceed.

In a contrived example: For structures, the force of gravity is a constraint. Standing for the next 50 years is a property. An auditorium for performances is a feature.

While features are the simplest things to identify, they are not what determines how successful a solution is.

For example, there must be thousands of ways to place a "registration form" on the Web. Custom coded in dozens of languages, countless SaaS sites, platforms like Google docs, the number of possible solutions to this problem goes on and on. You could write a CGI perl script to run on a Raspberry Pi plugged in to a covert power outlet in your neighborhood coffee shop, running on free wifi.

All of these solutions provide the necessary features. So what makes one solution a better fit than another? How do you choose among the array of possibilities? You eliminate the solutions that won't exhibit the necessary properties. Then choose among the remainder.

For instance, does your registration form need high availability? Scalability? Is it OK to miss a few people here and there? Is it OK if the entire list gets revealed? Or are there lives on the line?

Among these properties, I think the most important ones are those that affect the financial success of the system. We tend to relegate all money matters to project managers. However, I think architects are the people who have the right skills to answer the trade-offs inherent in these questions:

  • Can it be built cost-effectively?
  • Can we profit from it, or will operational costs overwhelm us?
  • Will it be available and responsive enough to win customers?
  • Can we support an economically interesting user base?
  • Is it going to be so hard to defend that we end up losing customer data or spending a fortune on security?

All of these questions sit at the intersection of time, cost, and functionality. The architecture skill set helps a team balance these concerns and guide the system to the most positive possible outcome. Viewed this way, architecture is about creating positive financial outcomes.

Jun 07 2013


The Rule of Three

Every solution comes with costs and consequences. If you get stuck on the first thing that comes to mind, you aren't necessarily choosing the solution with the most desired balance of costs and consequences.

I use something I call "The Rule of Three."

Read More »

Nov 16 2010


hooppps - A Mobile dribbble Browser

I wanted to make a dribbble browser for my phone, so I convinced some of my Relevance teammates to help me in this endeavor. The result: hooppps! hooppps is an open-source Rails 3 app hosted on Heroku. Under the covers it uses the swish gem, a Ruby wrapper for the dribbble API.

A screenshot of hooppps (from a desktop web browser): A screenshot of the regular browser layout of hooppps, seen at

(On the screenshot above, the images inside hooppps are shots on dribbble by: David Lanham and Dan Cassaro)

What is dribbble?

"Dribbble is show and tell for designers, developers and other creatives. Share sneak peeks of your work as 'shots' — small screenshots of the designs and applications you’re working on" - Quoted from the dribbble blog.

I love dribbble. People ask me, "What is dribbble?" and I always reply, "It's like Twitter, but for designers." The truth is, although there are similarities, it's very different from Twitter. dribbble is a community of some of the most talented designers and artists in the world! A dribbble user (AKA "player") is asked the question, "What are you working on?" You respond by uploading an image (AKA "shot") no larger than 400px x 300px. This community is invite-only (AKA "draft"), and you can only post a limited number of "shots" per month. "Players" can follow each other, "like" shots, and leave comments. There is a lot of feedback shared amongst players, and keeping in the spirit of the application's basketball theme, players can "rebound" shots. A "rebound" posts a shot that is inspired by another shot. If you like looking at beautiful art and design, you should definitely check out dribbble.

Why make hooppps?

While dribbble is amazing in a desktop browser, they have not yet created a mobile interface. So when dribbble came out with an API, it made me think of how cool it would be to browse dribbble on my phone via a lovingly-crafted mobile interface.

Not just for iPhones

Even though I personally use an iPhone, I didn't want to limit the functionality to just that segment. Others have released native iPhone clients for dribble that you can buy in the App Store. And they are great apps. What I wanted though, was a simple and lightweight browser that anybody could access via their smartphone browser. So, if you are on Android or iOS, you can experience dribbble on your phone in a mobile-friendly format via hooppps.

Start small and iterate

hooppps is not a complete implementation of dribbble, nor does it attempt to cover every feature of the dribbble API. It is a simple experiment meant to improve the dribbble mobile experience. So far, that initial goal has been accomplished. However, this is just the first release. We want to make hooppps better. As the API provides more functionality, we'll add that functionality to hooppps as we see fit.

Release 1

With the first release of hooppps, we hoped to get initial responses and feedback from people.

The first release features include:


  • popular shots
  • shot detail
  • player detail
  • go to player


  • comments on shots
  • pagination
  • share shot on Twitter
  • follow player on Twitter
  • iPhone home screen icon

In addition to the features in hooppps today, the dribbble API also provides access to "shots by everyone" and "debut shots." We did not implement these extra views...yet.

Coming soon!

When I created the first view on hooppps, I thought, "Let's implement the popular shots thread, because it's popular." Well, it turns out that it may be full of popular shots, but it's not the most popular view in dribbble. Since we first mentioned hooppps on Twitter, people have noted that the "everyone" thread is more interesting, and that is what people view the most. So that was our first feature request. We are implementing that, and we will include the "debut" thread as well.

What would you like to see in hooppps?

Desktop browser vs. mobile browser

I originally designed hooppps to just be experienced on a phone. But as I got to thinking about how people would be introduced to hooppps, I realized that a lot of people would end up on hooppps via their laptop or desktop computer. Simply showing them the mobile layout in their desktop browser would result in a subpar introduction to hooppps. But I didn't want to focus on a layout for desktop browsers, because dribbble already has a wonderful desktop interface. Nevertheless, I wanted people to have an awesome first impression of hooppps, which meant that hooppps needed a special layout for the desktop browser: a preview of sorts.

So then I got to thinking, "Why not make hooppps functional in its desktop preview?" I created a position:absolute div over an iPhone image with overflow: hidden. Then, using the jQuery mousewheel plugin, I enabled scrolling of the content inside of that div, simulating the mobile experience. (Thanks to Larry for solving that problem!) In short, hooppps has a fully functional mobile interface visible in a desktop browser!

Collaboration and fun

hooppps has been a really fun project for me. I have learned more about Rails and designing for the mobile experience. It has also been really fun to get other developers here at Relevance involved. (For a list of contributors, see the README.)

From the very beginning, the idea was to open this up for others to contribute or fork to make their own dribbble browser. So, all of the code is public on GitHub. I would love to help other designers get involved (or even get started with their own implementation), so @reply me on Twitter with any questions.


I want to say thanks to everyone here at Relevance for helping me get hooppps out the door. Thank also to Jeremy Weiskotten for the swish gem. Without that, I probably would have not been ramped up so quickly. I also want to say thanks to Dan Cederholm and Rich Thornett for doing such an awesome job with dribbble. And thanks to everyone out there that contributes to open-source software. It is really awesome to have so many tools and a wonderful community to work with!

Popular Tags