DoubleDutch Website

San Francisco, CA, USA

Follow on Bēhance

DoubleDutch Website
March 2012
As the company matured and decided the path to becoming a really, really big business, it was clear that we needed a website to match. I had four weeks (amongst my other responsibilities) to plan, design, and code the site.

View the site

Primary goals
The most important aspect of the website (besides providing the necessary content), was for it to be responsive. We have limited resources, so creating separate versions (i.e. m.doubledutch.me) was not an option. It came down to building one site that adapted to many screen sizes, which is challenging from both a content and design perspective, but manageable if you have that frame of mind from the outset.

Other goals for the site were to implement lead-capturing elements for collecting information and segregating by product, showcasing the products better, and implementing new branding for each product to help them stand on their own without being confusing.

Process
- Ideating (notes in Evernote, discussions with the team)
- Sketching (dot grid notebook + pencil)
- Wireframing (Illustrator + Cage)
- High-Fidelity Mocks (Illustrator + Cage)
- Coding (Espresso + CSSEdit)
- Testing / fixes (All major browsers, Mac and PC)
- Push live (Versions)
- More testing / fixes
Discussions were constant, and I worked hand-in-hand with our marketing lead to create and modify content and graphics. During testing and final modifications were being made, I enlisted the help of one of our senior engineers.
**All screenshots are real and taken from their respective devices.
The desktop home page, doubledutch.me
The desktop contact page, doubledutch.me/contact.aspx
The desktop product page for Flock, doubledutch.me/flock.aspx
The desktop analytics page for Hive (our second product), doubledutch.me/hive/analytics.aspx
The desktop view of our Careers page (slightly down the page), doubledutch.me/hive/jobs.aspx
The tablet view of the Flock product page, doubledutch.me/flock.aspx
A little further down the Flock product page, doubledutch.me/flock.aspx
The mobile view of the Hive product page (left, doubledutch.me/hive.aspx), and the Hive Analytics page (right, doubledutch.me/hive/analytics.aspx)
The mobile view of the Flock product page (left, doubledutch.me/flock.aspx), and our Careers doubledutch.me/jobs.aspx)