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.
Sean Iams
on 22 Oct 08Proposals, 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
on 22 Oct 08Excellent 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
on 22 Oct 08Brad, 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
on 22 Oct 08I 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
on 22 Oct 08Jamie, 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
on 22 Oct 08Be kind to the color blind
http://particletree.com/features/interfaces-and-color-blindness/
Luciano
on 22 Oct 08Totally agree with Evan: Deal for me is a hand-shake; but the currency icons are good too.
Great work!
kimblim
on 22 Oct 08Life would be so much easier if everybody knew the universal currency sign: http://en.wikipedia.org/wiki/Currency_(typography)
JD
on 22 Oct 08kimblim, 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
on 22 Oct 08Love these – both the end result and the star versions!
Anonymous Coward
on 23 Oct 08your site has been crashing IE7 all day.
Chad
on 23 Oct 08I assume that there was already functionality for determining the different currencies so that this change didn’t increase scope?
JD
on 23 Oct 08Chad, that is correct. You can select the currency type in a drop down.
Anonymous Coward
on 23 Oct 08No sterling? how far we’ve fallen…..... ;)
Brad Maier
on 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
on 23 Oct 08this icon is too big.
Dante
on 24 Oct 08If 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
on 26 Oct 08Great 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
on 27 Oct 08Scribilus, 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.
This discussion is closed.