Behind the scenes: Highrise Deals icons Oct 22 2008
19 comments Latest by JF
I had the opportunity to design an icon for the newly launched Deals feature in Highrise. Jason approached me one morning to think of some icon ideas to depict “Deals”. The development site used a stack of gold coins icon that Ryan had created, so I used that as a jumping off point. I started sketching variations of stacked coins. After a few minutes I decided to think about it in a different way. The word “Deal” kept bringing me back to the concept of card dealing. Card dealing is in no way related to the Deals feature however. I just couldn’t shake card dealing from my head, so I started sketching stacks of cards. I really dug the form that the stacked cards were making. The missing piece was: How is this related to “Deals”? I decided to take some inspiration from Super Mario Bros. and add a star to the top card. I finally had an idea to kick around with Jason and Ryan.
Jason and Ryan were not sold on the star idea. I assured them that it needed more development, so I started producing the idea in Illustrator. I usually start icon work in grayscale. It is way too hard for me to lock down colors right away. The nice thing is that I can concentrate on getting the form just right. Color can always be added later. Once I completed the form I realized that I had the perfect icon. In the Deals tab of Highrise you can set your proposals/bids as Pending, Won, or Lost. The black and white icon would be the Pending state. I would add green for the Won state and red for the Lost state. It was all coming together. There was a problem though. Jamis and Ryan were already deep into development, and this dynamic icon concept would add scope. I shelved that idea and went back to Ryan’s original gold coins icon. Let’s use gold for the Deals icon.
Jason and Ryan were still not digging the star. We went back and forth for about 10 minutes when Ryan had a great idea. Let’s ditch the star for the currency symbol. When you’re dealing with USD proposals then use a dollar sign. When you’re dealing with Yen then use that symbol. I loved that idea and started producing the rest of the icons to map to the currencies that we currently support in Highrise Deals. It is refreshing to work on a little project like this. Jason and Ryan were able to make quick decisions about my icon design direction. As a result the project took less than a day to finish with a majority of my time spent learning about the feature. Side note for those that have kids: WebKinz KinzCash uses the same symbol as the South Korean Won. Feel free to track Deals in Highrise with your WebKinz Krazy kids by using the Won hack. You heard it here first.
Got a web design project in mind? Find a web designer on Sortfolio. Browse by visual style, portfolio, budget, and geographic location.
Over 1 million people use 37signals' simple web-based software to collaborate on projects, track contacts, and organize their business with an intranet.
19 comments so far
Sean Iams 22 Oct 08
Proposals, bids, RFPs, and project sales usually involve stacks or decks of documents, and the deck of cards icon visually maps to that concept very well.
The gold color and the currency logo complete the cognitive transition of a “deal” from concept (paper and idea) to cash (da kwan, baby!). Nicely done :)
Brad Maier 22 Oct 08
Excellent decision on the use of different symbols on each icon to indicate state. From a user standpoint, using the same symbol on every icon and indicating state based on the color of the icon ( black, red, green, yellow) would have been hell on a portion of colorblind users…
Scott deVries 22 Oct 08
Brad, I think you’ve misread. The icons don’t change when a deal is won/lost. Just the icon changes when different currencies are in play.
Evan 22 Oct 08
I like the solution of using the currency symbol, but the first thing that popped into my head for “Deals” was a handshake. Is that too culturally-specific?
Helgi Þór Jónsson 22 Oct 08
Jamie, I love your stories of development – it feels like being in the same room, they way you describe J&R’s reaction, how things developed throughout the day. I’m a big fan of “Getting Real” and stories like these really add to the book and principles of 37signals. Keep’m up, please!
Anon 22 Oct 08
Be kind to the color blind
http://particletree.com/features/interfaces-and-color-blindness/
Luciano 22 Oct 08
Totally agree with Evan: Deal for me is a hand-shake; but the currency icons are good too.
Great work!
kimblim 22 Oct 08
Life would be so much easier if everybody knew the universal currency sign: http://en.wikipedia.org/wiki/Currency_(typography)
JD 22 Oct 08
kimblim, actually that universal currency sign is an option as well believe it or not. We wrote about it on the blog a while back.
Grant 22 Oct 08
Love these – both the end result and the star versions!
Anonymous Coward 23 Oct 08
your site has been crashing IE7 all day.
Chad 23 Oct 08
I assume that there was already functionality for determining the different currencies so that this change didn’t increase scope?
JD 23 Oct 08
Chad, that is correct. You can select the currency type in a drop down.
Anonymous Coward 23 Oct 08
No sterling? how far we’ve fallen…..... ;)
Brad Maier 23 Oct 08
@Scott
“Once I completed the form I realized that I had the perfect icon. In the Deals tab of Highrise you can set your proposals/bids as Pending, Won, or Lost. The black and white icon would be the Pending state. I would add green for the Won state and red for the Lost state.”
I assumed this meant all the icons would have had a star on them and the color would have changed based on the state…
If true, really rough on part of the colorblind population
ruben 23 Oct 08
this icon is too big.
Dante 24 Oct 08
If your currency is South Korean Won, is it an oxymoron to say you’ve lost a deal? I want to make deals in Won…I can never lose!
Sorry, couldn’t help myself. It is Friday, after all.
Scribilus 26 Oct 08
Great icon, but… doesn’t using the currency symbol increase the scope more than the colors for deal state? You’ll now need to create new icons whenever a new currency is added. From a functionality standpoint, isn’t knowing the deal state at a glance also more important than knowing the currency it is in?
JF 27 Oct 08
Scribilus, the deal pages (the list and the actual deal page) tells you what status the deal is in at a glance using obvious red/green/yellow indicators.
Comments are closed