DD.com | 2011

DD.com | 2011

This redesign was a long time coming. When I first arrived at Studiocom, I was told that rebuilding the Dunkin’ website would be my first big project. Two years later, we were still trying to secure funding for a total revamp of the older stop-gap design that had become the de facto website (for more on this, see DD.com 2007).

The problem, as I saw it, was that Studiocom was trying to sell in something too large to a company that ultimately didn’t see the value in having a robust website. I can’t blame them; I’m not personally of the opinion that every brand needs a tremendously Flashy website (literally, nor figuratively). Most people are interested in transactions first, and experiences second, when it comes to interactions with brands like those in the QSR arena.

Studiocom did eventually sell in the concept of a redesign in 2010 by abandoning the Flash-based experiential pitches and approaching things from a different angle. Thomas Spicer (managing director at Studiocom Boston), Joe Ayotte (our UX Director), and myself sat down and devised a strategy utilizing agile development practices and remaining focused on delivering a basic, solid, platform which could be modularly expanded upon over time, for a fraction of our previous bids.

The process we submitted to Dunkin’ was one that involved Joint Application Development sessions (JADs) in lieu of non-collaborative creative reviews, and development in a platform called Day, which is a very robust CMS and MVC environment using open-source languages.

We began with Discovery, naturally enough, which primarily involved a thorough competitive analysis and stakeholder interviews. The result was the Digital Strategy poster, which you can see here. We agreed on six pillars upon which we would build DD.com: Agility, Relevancy, Portability, Visibility, Usability, and Branding.

The next step was to bring the stakeholders in for a series of six focused all-day sessions in which we tackled specific areas of the site, which could be anything from “The Homepage” to “Acquisition.” We would begin before the sessions by doing some homework – looking at sites or analogies that we thought were handling a problem effectively, or producing elegant solutions to problems we shared. At the beginning of each sessions, we would go around the room and share what we’d found during our homework sessions, calling up websites on a big TV so we could all discuss and comment as we went. This could take hours, obviously, but more often than not, by the time we finished, our DD.com solution was already taking shape. We would then take to the whiteboards and start sketching.

Photos of the whiteboard from our JAD sessions for DD.com - left: Homepage sketch, right: Store Finder sketch.

As you can see, the sketches were very organic, with lots of erasing and notations. Everyone had a hand in designing, for example, the Homepage, the DD Perks user experience, our acquisition strategy, et al.

From there, we began to rapidly prototype our new website. Joe Ayotte worked in Axure to create clickable wireframes for every page of the site that we would require to show flow, and I worked out the high-fidelity prototypes for certain high-importance areas of the site in JQuery and HTML5/CSS3 in order to demonstrate design, interaction, and experience.

Check out the homepage prototype here. I highly recommend that you use Firefox 3.6+; as this was just a prototype, the CSS that I used was optimized for FF with the task of making it more universal falling to a development team at a later stage.

Of course, no matter how well you plan a project like this, things go askance. In our case, we eventually realized that we needed to radically rethink the primary display area of the homepage some two months in to design. Because we were working in a small, dedicated, agile team, we were able to do this very quickly. The new homepage looked like this. Again, please use Firefox or the page will blow up.

Additionally, we did prototypes for the menu and store finder areas of the website, as we know that they are easily the most heavily trafficked services. The store finder prototype can be seen here. (Firefox only).

As you can see, the new .com is all about relevancy. It is geo-targeted, day-parted, and in general reflects to the user whatever we know about that user. If they are a Perks member, we might know quite a bit about them – their favorite foods, drinks, etc – in which case the site experience is quite personalized. If they are a guest, we at least know their IP and what time of day it is wherever they are, and so we respond to that.

And while DunkinDonuts.com represents relevancy to its users, to the client and their agency, it represents is a marriage between business and marketing interests, content management, and smart design which is beautiful, extensible and flexible. By understanding exactly what our clients need to do with their site, we created intelligent layouts and services that can dynamically format content and present it in style, as well as collect meaningful data about its users and shape personalized marketing strategies automagically with the insights. That is the very essence of what an agency should be doing for its clients.