Archive for the 'Design' Category
Phenomenal response to Catalog Choice Tuesday, November 6th, 2007 by Matt
HARDLY A MONTH HAS PASSED since we announced the launch of Catalog Choice, a website that MakaluMedia was chosen to design and develop by an amazing team of funding and supporting organizations, and the response to the site has been extraordinary.
In less than 25 days, more than 100,000 users have registered, opting out of more than 800,000 catalogs. And for us, as user experience designers and product developers, one of the most exciting statistics is the near 50% conversion ratio, meaning that nearly one out of every two visitors to the site has registered.
Update November 21, 2007: We are about at the one month point now, and have over 180,000 users, opting out of nearly two million catalogs!.
Catalog Choice has also been featured on the national television networks CNN, NBC and ABC (see videos below), and has been well received in the press and blogosphere:
- The New York Times
- The Boston Herald
- The Chicago Tribune
- Guy Kawasaki
- Joel on Software
- Adam Engst at TidBITS
The success of the site has served to validate much of our beliefs regarding user experience design. Some of principles that stand out include:
- Simple is better. Less is more.
- A successful user experience derives from near obsessive attention to detail.
- Don’t outsource your user support. On the contrary, put your best people on it. People love getting a personal response from somebody that knows what they’re talking about. You’ll reap the benefits in trust, patience and tremendous value in terms of feedback to the process of continually improving the user experience.
We’ve also learned a wealth about effectively operating a high-volume Ruby on Rails application. (On one particular day, the ABC “Good Morning America” spot was the very top news article on Yahoo News, and we saw 20,000 new user registrations in a period of four hours.) Having a great hosting partner helps a lot!
Finally, this project is proof positive that talented and motivated people, supported by an effective agile process and paying a lot of attention to clear communications, can build a successful project, even if separated great distances geographically. Our Catalog Choice team includes MakaluMedia staff located in the United States, Germany, Spain and Ireland!
And with that, we bring this article to a close. Our next project milestones include one million catalog opt-outs, and hopefully down the road one millions users! And remember, if you’re located in the US, and ready to simplify your life while helping the environment, head on over to Catalog Choice and sign up for a free account:
Be sure to check out the following video clips.
- Catalog Choice on NBC
- Catalog Choice on CNN
- Catalog Choice on ABC Good Morning America
Stop those catalogs with Catalog Choice! Wednesday, October 10th, 2007 by Matt
The idea.
Growing up in the US, I remember how annoying it was to receive commercial sales calls on the telephone late in the evening, when the family was sitting around trying to enjoy some quality time together. This problem was later solved (mostly) through the introduction of the “Do Not Call,” registry — a legislated service which marketers must consult before they can call you. If your name is on the “Do Not Call” list, it’s illegal for them to call you.
A similar problem exists today with paper catalogs. American consumers are simply inundated with unsolicited, undesired paper catalogs from a multitude of merchants. While receiving these catalogs can be just as annoying as receiving the marketing phone calls, there’s a deeper, more concerning problem. The production of the 19 billion paper catalogs sent each year in the US takes a huge toll on the environment.
19 BILLION. We throw around terms daily like million, billion, trillion, without really having a feel for the magnitude of those numbers. Consider this, it takes 11 days for a million seconds to pass. It takes 32 years for a billion seconds to pass! So, 19 billion catalogs — that’s a lot of wasted paper!
Earlier this year, my company MakaluMedia was offered an opportunity to participate in a project backed by some of the US’ largest environmental and non-profit organizations to help address this project. Today represents the culmination of several months of hard work on this project, and I’m proud to announce the launch of Catalog Choice:
Catalog Choice is a free service, that allows people to find and opt-out of the undesired catalogs they receive. The concept is very simple; you sign up, search for a catalog you receive, and opt-out. We take care the rest, and in about six weeks’ time, you should no longer receive the catalog.
The application.
Given that the service targets all American consumers, including a large segment who may not be computer saavy, a major objective was making Catalog Choice simple, inviting and easy-to-use. (Well, in fact, those should be objectives of any product really.)
Making something simple is anything but simple :) It involves everything from the visual aesthetic, to the interaction workflows, to the choice of the wording on the site. (For example, we opted against using the term “Sign up”, as some people find that idea intimidating, and rather went for “Get started now”.) We hope we’ve succeeded, but we’ll be monitoring the visitor’s experiences closely to tune and adjust the application as needed.
Technically, the site was built using the Ruby on Rails application framework, which is simply fantastic.
The launch.
The big launch happened yesterday, and shortly thereafter we were mentioned on a couple of very popular websites:
That certainly got the traffic flowing, allowing the powerful Engine Yard servers to finally break a sweat. :)
And the day ended with the good news that next week we’re going to get some major national media coverage!
The team.
I almost feel guilty to be paid to do work that’s so enjoyable, and the biggest part of that satisfaction comes from being part of the tremendous team we have in MakaluMedia. In this Catalog Choice project, Mike Rohde, an “icon” in the logo design world (couldn’t help saying that ;), designed the logo, Alex Bendiken applied his wizardry to design the application’s user interface and user experience (Alex, by the way, is the guy that won the Slashdot redesign contest!), the Rails application development included Christian Kumpf (one of our crack engineers in Germany, who happened to build an ultra-stable satellite telemetry processing system last year!), Alex (yes, same one; he does Rails application development too!), Brian Cooke (maker of famous Mac OS X applications) and our latest additions, Alvaro Silva and Luke Brown, systems work by Irish legend Niall O Broin (who will never have a weblog, so don’t get your hopes up) and, finally, project management by Fausto “I dream in SQL” Roveda, and myself.
All in all the project has been a ton of fun, and hopefully it’ll be a big success.
We need your help.
This project has been especially satisfying as it represents something that could have a major positive impact on the environment. But for that to happen, it needs to be used on a very large scale. And in that respect, we could really use your help.
As a free service, and given the high costs of marketing, the team is hoping in a big way that the service will spread via word of mouth. If you’d be willing to link to the site from your own website or blog, we’ve got some hopefully nice looking badges available here:
http://www.catalogchoice.org/#about
And if you use the service, please consider using the “Invite a friend” feature. Thanks so much.
Miscellaneous updates.
- To handle all the customer service incoming emails, Catalog Choice are using a service that absolutely rocks, MailTank. It is fantastic.
ProBlogger Logo Design Monday, August 27th, 2007 by Mike
At the end of May, Darren Rowse contacted me, to redesign the ProBlogger logo.
Darren has one of the net’s most popular blogs, and is one of the founders of b5media. I was honored to have a chance at designing the new identity, so I agreed to come on board the design team with Darren’s site designer, Ben Bleikamp.
Darren’s story is interesting, not only because he turned blogging from a hobby into a full-time career and business, but because he freely shares what he’s learned from blogging. I quite like Darren’s attitude of helping others grow and succeed by sharing his knowledge.
In this post, I’ll share details and sketches on the new ProBlogger identity.
Initial Specs and Feedback
Darren answered my standard list of questions, and from his initial feedback I gathered several themes to embrace and portray with the new ProBlogger identity. He wanted ProBlogger to be:
• A welcoming community where bloggers can learn and grow
• A source of information on making income from a blog
• A site promoting professionalism in blogging
• An extensive blogging reference
• Keywords: income, professionalism, community, inspiration, credibility, encouraging
Darren wanted a clean, crisp, contemporary, professional logo, without superfical “Web 2.0″ stylings. He wanted a logo to represent himself and his blog, in a design that wouldn’t go out of style in 6 months.
Sketches v1
With all of this information in mind, I began sketching multiple concepts to get the project rolling (click the image to see the v1 sketches).
With all of my logo projects, I like to loosen up with pencil in my Miquelrius notebook, freeing my mind to explore ideas. Note the keywords on the upper right of the page, which help guide me in idea generation during this first sketch phase.
I focused on theProBlogger P, as it portrays the brand well, and would be a consistent element from the original design. I explored one other idea (8) which suggested community as a nucleus with network connections and multiple outer atoms.
In Darren’s feedback, I learned that he liked the emphasis on the P. He preferred the squarer P characters, as these leaned away from the “surf” look and feel he saw in ideas 17, 18 and 19. He also liked the community concept he saw in 8, so it was on to v2 sketches to explore those ideas a bit more.
Sketches v2
I this set, I explored the winning concepts and a few others, bringing in aspects of idea 8 and the community “atomic” ideas merged with the P character.
After review, Darren and his team of trusted advisers focused on two ideas from this v2 set: concepts 19 and 23. Next up was the black & white and color phase.
Black & White and Color Concepts
Because Darren was on a tight timeline, I changed my normal process, including both black & white and color logos on the same mockups. This way Darren could see the B&W ideas and some explorations of initial colors.
Concepts v1:
In the first set you’ll see I came up with ideas based on the v2 sketches (2, 3, 4 and 5), along with a new idea (1) which came out I worked with the logos. Sometimes this happens, and I’ve learned to go with the flow and include these as options:
Darren’s feedback from round 1 aimed us at the P within a nucleus circle with orbiting atoms around this central icon to embed the concept of comminity into the mark. While the more graphical representations of this community were interesting (1, 2 and 3), the clearer P emerged as Darren’s top choice.
Concepts v2:
Based on feedback from v1, I narrowed to the single P with orbiting atoms, exploring different ways the atoms could be positioned, the connection between atoms and the outer ring, a font option and variations on the provided color pallette:
Concepts v3:
Darren really liked the color combo in ideas 7 and 8 in this set, leaning toward 7 a bit more. He wanted to keep the “P” and “BLOGGER” in orange and do one final exploration on atom position and separation between the atom and the outer ring. So I did a final v3 to help Darren see the 3 final options:
In the final version, I felt the leading atom suggested forward movement, and the separation of the atoms from the circle provided focus to the 3 atoms. 7.1 was chosen as the final winner:
Conclusion
Darren was pleased with the final logo, which was subsequently included in Ben’s redesign of the site. It was great fun to see the logo announced on Darren’s blog, followed by the release of the new site design.
As one might expect, with a major change on a popular site, there were a few who liked the old design better. However, after reading comments on the site related to the new logo and design, a majority of Darren’s readers really loved the new site design and logo. Most importantly, Darren was pleased with the results.
Thanks Darren for choosing to work with me and MakaluMedia on the logo design. It was an honor and a pleasure working with Darren and Ben on this project.
Mike Rohde’s Podcast Interview on The Micro ISV Show Friday, June 22nd, 2007 by Mike
A few weeks ago, I was invited by author, micro-business owner and new MakaluMedia logo design client Bob Walsh, to be interviewed on Microsoft’s The MicroISV Show (a podcast for software developers) with co-host Michael Lehman:
It’s a brave new world for MicroISVs in which it’s no longer enough to drag some controls onto a form and simply make sure they’re lined up and the tab order is right. The mantra “form follows function” is becoming more and more important for developers as advent of Windows Vista, WPF and Silverlight once again change the expectations of how customers perceive software. You’ve got to “put your best face forward” and think about design of the user experience right from the beginning.
In this episode, Michael Lehman and Bob Walsh talk to Mike Rohde, designer and art director for MakaluMedia, about the changing role of design in software development and how and why MicroISVs must incorporate design thinking into their development process.
Listen to The Micro ISV Show #22 podcast:
• Putting your best face forward - The growing importance of design for MicroISVs
• Direct Podcast MP3 Link (Size: 36MB, Runtime: 40:13)
We had a great time! I had an opportunity to talk a bit about my views on design being more than window-dressing on applications, the importance of starting early with a designer, how to choose a designer, vector-based development tools and how they may effect developers and designers, and more.
Bob worked in questions about my creative process, asked how I generate so many sketch ideas, and even slipped in a mention of my Moleskine Planner Hack project.
Paul Stamatiou’s Logo Design Project Tuesday, June 5th, 2007 by Mike
I’ve just completed a logo design project with tech guru, and fellow 9rules blogger, Paul Stamatiou.
Paul writes commentary and reviews on varied topics with a focus on technology, and has very high visibility on the web. So as you can imagine, I found it a fun challenge to work with Paul.
Below are links to the set of mockups and final art at Paul’s Flickr account:
Paul Stamatiou Logo Design Set
Paul Stamatiou Final Logo Design Spec Sheet
It was fun, and different working with Paul, since he put all of the sketches, black and white and color mockups I did for him on Flickr — as they were delivered — and opened them up for public comments. I’ve not had that kind of in-progress, public critique done with my work before. Paul and the commenters liked the work and through the normal process, Paul selected a final winner.
One advantage to having your client post in-progress to final work posted on Flickr is, prospective clients can see the process, how it works and looks — which hopefully sends them to me and MakaluMedia for their identity design.
All in all, it was a blast working with Paul. I think we’ve found a clean, crisp and memorable mark for Paul to use as personal branding, on the blog and for other things, which makes me very happy.
Thanks for choosing to work with me Paul! :-)
Panoramio (and logo) are acquired by Google Friday, June 1st, 2007 by Mike
Congratulations to my friends Eduardo, Joaquín and José of Panoramio, in the recent Google acquisition of their startup!
From the Panoramio blog post on May 31st:
The integration of photos from Panoramio in Google Earth has been so successful since John Hanke suggested it that we see the acquisition of Panoramio as a natural consequence. We have tightened our relationship with Google Earth more and more in recent months, and at the end we decided to walk one step further. After so much work together, honestly, we couldn’t imagine a better scenario than selling Panoramio to Google.
I was honored to work with “the boyz” back in October 2005, when we created the Panoramio identity (along with two other identities after it, including Cursoo).
I’m very excited for the Panoramio team, and just as excited that the identity work for the project had a small part in helping the team get to the next level.
Congratulations guys! :-)
Red 66 Logo Design Thursday, February 8th, 2007 by Mike
In mid-2006, Carlos Granier-Phelps contacted me at MakaluMedia, about designing a new logo for Red 66, his consulting business focusing on Web 2.0, usability, Internet video technologies, digital security, ratings analysis software for TV stations, and web/tech consulting for movies & TV.
I worked with Carlos to gather my standard information package his company structure and outward image goals, his likes, dislikes in color and design and other tidbits that would give me insight in the sketch stage of the project.
Carlos wanted the logo to embody many different aspects of his personality and his business, including: hip, clean, dynamic, safe, fun, global, innovative, and high-tech. Quite a challenge, but I felt confident that by working with Carlos through the normal sketch to final process, we would find the right solution.
Sketches
First, I brought out the trusty Miquelrius sketchbook and pencil, and began capturing ideas as they came to mind, after reading Carlos’ notes. Below I’ve posted thumbnails of complete sketches and artwork: click each image to see a full version:
Here you can see I explored a wide variety of ideas, playing with the interesting shapes created by dual 6s. I felt drawn to circular shapes enclosing or working with “66″, as 6s are organic and round.
Carlos quite liked idea 27, since it seemed to capture Route 66, which was a positive thing in his mind, yet had a clean, simple look he was aiming for. He also liked 16 and 18, and oddly enough, liked the 2 Route 66-style ideas below 5 and 6, which I hadn’t even highlighted on the page!
So, after some discussion, I prepared a second set of sketches, focusing on the narrowed field of ideas.
Here you can see the Route 66 approach expanded greatly, along with square idea 18 and the circular idea 27 from the first round of sketches.
After review of the second set, and my suggestions to lean toward 9, 10 and 7, Carlos settled on these ideas to prepare black and white concepts to narrow to a finalized design.
Black & White Concepts
This is a very critical phase, where my rough concept sketches are turned into production quality art. It is here, where a mark is proven to work, or not work in the simplest form possible — black and white. Often, this is the moment where an idea tends to shine and separate itself as the right solution, or fade as an also-ran. The Red 66 logo project was no exception, as the circular concept 9a immediately and clearly step out front as the winning black and white mark.
Color: Round 1
Outside of coming up with ideas, color can often be a tough stage. Colors are often emotional, which is why I like to have a solid black and white logo selected before moving to the color application phase. 
On set 1, I explored a variety of color combinations, taking into account Carlos’ location in Miami as one aspect of color influence.
Color: Round 2
Based on this round we wanted to refine the color selections a bit more, to include brighter colors and explore reds and burgundy colors with similar tones and contrasting choices, like blue-green, orange and teal.
At this point, both Carlos and I honed in on idea 8.3 as our color winner. It had the nice light/dark red tones to reinforce the “red” theme, with a secondary Miami-influenced, cool retro blue-green outer ring for contrast. It had a muted, yet strong overall feel that we both liked.
Conclusion
Since creating the new mark, Carlos has applied it to his blog, and other materials. I’m very pleased with the simplicity and cleanliness of the Red 66 logo — it’s organic and smooth, yet has a hint of hip retro Miami.
Thanks Carlos for working MakaluMedia and I on your new Red 66 logo!
Business Opportunities Weblog Network Logo Design Wednesday, January 17th, 2007 by Mike
In late 2006, Dane Carlson of the Business Opportunities Weblog Network contracted me
to design an identity for his weblog network.
The Business Opportunities Weblog Network (BOWN) is described as a “moderated list of legitimate business opportunities for entrepreneurs”, which features lists of business ideas, and tips.
Dane has been blogging since 2001, and wanted a new corporate identity that was fresh and clean, to help realign his blog.
So, Dane and I started through our normal process of getting information from goals, the business, his color and style likes and dislikes, and other useful information to help me develop good design ideas.
Dane liked the general idea of a lightbulb, so I included this idea, along with several other ideas, to make sure we explored all options.
Challenges
While “Business Opportunities Weblog Network” was descriptive, it’s a really long name to deal with when creating a logo design. It would be challenging to be find a way to list the full name and not let the words dominate the identity.
Another challenge, related to the long name, was keeping the identity simple and easily recognizable. How do you show a business network in a single symbol?
Sketches
Once Dane’s information was read and digested, I brought out the sketchbook and pencil to get ideas on paper. In 2 rounds of sketches I produced several interesting ideas, incorporating the lightbulb and other ideas for representations of a network. Here are a few selected sketches:
1. This idea featured “Business Opportunities” larger, and a briefcase fashioned from triangular shapes, woth “Weblog Network” tucked under the larger type.
2. On this concept, I’ve replaced the briefcase symbol with an interconnected triangular grid symbol, to emphasize the network nature of the name.
3. Here I’m indicating a stylized lightbulb to the left, Business with most emphasis and “Opportunities” and “Weblog Network” descending in size and importance.
4. The winning idea shows a lightbulb within a circular symbol on the left, and an alternate dark version on the right. The idea was to show the lightbulb as a node on a network, incorporating both a bulb and network in the logo.
Black & White Art
Once the winning concept of a lightbulb on a network, inside of a circle containing the type was selected, I moved to produce the black and white version of the logo for Dane. The black and white phase went pretty quickly, and we both liked how the concept translated from sketch into black and white art. The next challenge was color.Color Art
In the color phase, I wanted to show Dane some color varieties, but didn’t want to do too many at one time, so I selected 3 color themes with both flat and gradated options, and presented them:
Our eyes were pretty immediately drawn to blue, orange and green. I also liked the blue/green option, though the orange center circle of the first idea (B&C) really seemed to convey a warmth to balance the cool crispness of the green and blue.
After a little deliberation, Dane chose the blue/orange/green option as the winner.
Conclusion
Just last week, Dane completed his redesign of the Business Opportunities Weblog Network weblog, and used the new logo design to shape his redesign. I really like how the colors feel warm, yet crisp and clean, and after not seeing the logo between delivery and appearance, I’m very pleased with how it turned out.
My thanks go to Dane Carlson for choosing to work with me and MakaluMedia on his new identity. We both had a great time collaborating and I think we came up with a fun, attractive logo design.
Word Count Journal Launch & Design Notes Thursday, January 4th, 2007 by Mike
On January 1st, 2007, Word Count Journal, a new project our MakaluMedia crew has been working on, launched for public consumption.
The Word Count Journal idea is simple — sign up and then write a little bit each day for 365 days. If you write the minimum every day for a whole year, you’ll have written at least 66,795 words. Word Count Journal is especially well-suited to anyone who wants some encouragement to keep their words flowing every day.
I wasn’t sure if the idea would interest me as a blogger, but it’s actually pretty fun. You aren’t penalized for missing a few days, since you can always log in and quickly catch up on your posts.
I’ve even found it fun to write more than the day requires — you only need to meet the minimum, but it’s sometimes easier to keep on rolling.
And now, a few words on the design of the Word Count Journal site.
Word Count Journal Identity Design
Our team had a great time working through the design of the site. 
I had the pleasure of designing the Word Count Journal logo, as well as assisting my colleague Alex Bendiken in establishing a site design based on the new identity.
I had long wanted to use the font American Typewriter for a logo, and this project seemed the perfect opportunity to use this font.
While Word Count Journal is an online journaling application, I wanted to bring in the ideas of analog journaling — the pencil icon and typewriter fonts — as these recognizable elements help convey the idea quickly.
You’ll note that the letters have been pretty tightly kerned, especially ‘Journal’ which I snugged so tightly that the ‘u’ and ‘r’ have merged into a ligature, and the ‘n’ and ‘l’ have been customized to allow for a close fit.
The pencil icon was kept intentionally simple, and also snugged into the space above the curl of the ‘J’ in Journal, keeping in the style of the overall “cozy” theme of the type treatment. Placement of the ‘Word Count’ text was a tough call — I wanted it centered in the space above ‘Journal’ initially, but decided to align the ‘t’ of ‘Count’ on the right edge of the ‘a’ in Journal.
You wouldn’t think so much goes into kerning of a few words, but I feel this little extra effort pays off in a more flowing identity.
Word Count Journal Site Design
Based on the logo, I assisted Alex in developing the initial direction of the site design, which he and the team completely fleshed out and built. I really like the cooler aqua blue and grays, combined with warm orange and bright yellow, and the use of American Typewriter throughout the site. Alex and the team did a great job keeping the structure simple, yet super-functional and beautiful.
If you’d like a space where you write a little each day, check out Word Count Journal!
Makalu Christmas Card Design Process Tuesday, December 12th, 2006 by Mike
Last Friday my batch of MakaluMedia Christmas cards for 2006 arrived from PrintingForLess.com and I couldn’t be more pleased. The quality of the paper and printing are excellent, and I think the design turned out quite well.
Here’s a photo of the cover of the card:
You may recall mention of my inspiration for the snowflake design in late November, this is how it was used on the cover of the card design. In this article, I’ll explain details of the design and printing process, implementing the snowflake design.
I chose the smaller card size of 4.25″ x 5.5″ folded — it’s not too large and not too small. It’s quite reasonable to print a smaller quantity in 4 color, since the size is not too large, and since envelopes are a standard size in the US.
Cover Design Notes
On the cover design, the high-res background was created in Photoshop from the same snowflake design, applying a glow of lighter blue over the darker blue background. The dark texture provides a canvas for the card’s cover, while at the same time being subtle enough to not fight with the white snowflake overlay.
In Adobe Illustrator, I created the card document, then placed the Photoshop-generated background on the base layer, followed by the light blue glow and sandwiched on top by the white snowflake emblem and “Merry Christmas” text. The back cover also featured the company logo and locations.
Here’s the card cover design (click for larger version):
Interior Design Notes
I wanted to carry the theme to the inside of the card, but also leave room for writing personal notes to clients and colleagues. On the left you can see the large, light gray “ghosted” snowflake design, which crosses the fold onto the right inner panel. It’s dark enough to see yet light enough to write over.
On the right, the snowflake appears once again, smaller and in the same bright blue color as the glow and Makalu logo on the cover. Below the snowflake, a simple greeting in dark blue.
Here’s the card interior design (click for larger version):
Printing Notes
Because the file was created in Adobe Illustrator as vector artwork, with a placed Photoshop background, my prep for printing was relatively painless. I checked all of my colors, and made sure the page sizes and bleeds for the art were correct.
Next, I converted the text on the cover and interior to outlines with Illustrator. Converting text to outlines is a feature that converts fonts into vector artwork on your document. This ensures your fonts, sizing, positioning are maintained, while eliminating the need to make sure the printer has the same fonts on hand.
Finally, I uploaded the file with my order specifications at PrintingForLess.com and let them handle the rest. A day later I had a PDF proof of the art, then approved the production and shipping. With this project I chose a medium weight card stock, and added an aqueous coating over the entire cover to help protect the heavy ink coverage and add a nice shine.
PrintingForLess handled printing, cutting and folding, then shrink wrapped the cards and paired them with matching white envelopes. PFL even split the order and shipped a portion directly to our main Makalu office in Darmstadt, Germany and the remainder to me in my Milwaukee office.
Conclusion
Overall, the design was a fun one, from concept to completion. I’m very pleased with the final product, due in large part to the quality work by PrintingForLess.com, and their wonderful customer service.
I hope I’ve provided some insight into the process of designing and creating a 4-color card for printing, especially for those readers who may not have direct contact with design and printing processes.