Check it out. Transforming del.icio.us into delicious.com launch video (1:14mins)
People and tags are the essential ingredients of delicious. Graphically defining these two elements was foundational to the new design system that transformed the site.
Delicious was not a series of static web pages so it was impossible to draw a site map. Every page was dynamically generated via queries to a database. Created this system diagram to show the complexity of all the key concepts and their relationship to each other.
Delicious was not a series of static web pages so it was impossible to draw a site map. Every page was dynamically generated via queries to a database. Created this system diagram to show the complexity of all the key concepts and their relationship to each other.
The delicious Megadeck ended up as a 439 page specification for the entire site. It was a living document and was generated in part with Illustrator scripting to bring in real bookmark data from the live site into the new design language without the need for engineering help.
Our launch poster captured the hilarious feedback responses from the re-design, such as “It’s nice to see an old friend dressed for the future.” and “It’s beautiful. I just had a nerdgasm.” [click the image to see all the comments]
Del.icio.us - social bookmarking
A complete redesign from the ground up of del.icio.us, the ingenious social bookmarking invention.
Bookmarking revolution
In 2003, Joshua Schachter invented social bookmarking and del.icio.us became a poster child of the Web 2.0 era. This new way to save and share bookmarks was revolutionary because, for the first time, bookmarks were saved on the web, accessible from any computer, publicly shared, and organized with tags (del.icio.us coined the term "tag”). Del.icio.us was also used for discovery because tagging allowed bookmarks to be searched and aggregated to show the most popular or recent bookmarks around any tag. Its url was one of the best known domain hacks at the time and, after the redesign, its popularity rose to one of the top 200 websites in the world.
Design transformation
After being was acquired by Yahoo! in 2005, del.icio.us was struggling under the weight of its popularity and was in desperate need of upgrades of both front and back ends. The challenge was to create a new design that kept the old del.icio.us flavor while simplifying, clarifying and enhancing the user experience. The brains’ trust for del.icio.us was made up of the founder, a PM, lead engineers and myself.
As sole designer, I was responsible for the complete overhaul from the ground up which involved establishing the information architecture along with a new distinctive graphical and interactive language. Work involved concept creation, communication and execution at all levels of the product. The complex process included executive presentations, specs, user testing, graphic design, asset delivery and QA.
Illustrator scripting
Early on, unconventional Illustrator techniques were used to sketch out the design. Illustrator scripting pulled existing RSS feeds from the live site and rendered pages of the new design entirely with code. The new design could then be seen with real user data before an engineer ever lifted a finger. By generating pages from code, the complete 600 page spec was easily maintained daily as new features or components were added or refined.
Animation via PDF
As part of the design process, we accumulated a presentation deck that showed how each of the old components were to be changed in the new design. This became so informative that we turned the deck into a video that was posted at the launch of the new site to show our users how things had changed.
Awards
50 Best Websites of 2009, Time Magazine, 2009
ID Magazine Design Review, ID Magazine, 2009. Honorable mention, Interactive section, Delicious Redesign