AgendaI. About Digital Bungalow

II. Mobile First Design and UX

III. Responsive Design and Development

IV. Web Engagement Management

V. Work

About Digital Bungalow

DIGITAL BUNGALOW

» At Digital Bungalow, our mission is to build the most effective websites in the world. We leverage innovative strategies, brilliant branding, extraordinary user experiences, and smart technology to deliver amazing client results—all on well-crafted, easy to use platforms.

» When we launch a website, we like to say that we’ve only crossed the starting line. Through robust digital marketing, smart enhancements, and responsive support, we enable our clients to delight their users and produce industry-leading results.

» Our strong roster of B2C clients for whom we have completed similar engagements includes Dow Jones, The Tannery, Easy Street Shoes, Hologic, Humana, National Amusements, Savannah College of Art & Design, Visnick & Caulfield

» With a team of 35 employees, we’re big enough to be full service, but small enough to be nimble. All services are provided in-house, so quality is strong and consistent. And we’re growing forty percent annually, which shows that it’s working.

| 209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

Mobile First UX & Design

| 209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

MOBILE FIRST USER EXPERIENCE DESIGN 6

Mobile Consumer10B+

MOBILE FIRST USER EXPERIENCE DESIGN

For years, most web teams have designed products and information for the desktop/laptop PC. For these teams, mobile (if it even happened) was a barebones part of the desktop version. This approach actually made sense for a while. Browsing the Web on mobile phones was painful; carriers controlled access to the Web on their devices; and mobile network speeds often made everything grind to a halt. So few people used the Web on mobiles and those that did were frequently faced with an unpleasant experience.

But things have changed so dramatically over the past few years that starting with the desktop may be an increasingly backwards way of thinking about a Web product. Designing for mobile first not only prepares you for the explosive growth and opportunities in this space, it forces you to focus and enables you to innovate.

| 209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

MOBILE FIRST USER EXPERIENCE DESIGN

GROWTH = OPPORTUNITY

100M+ 1B+Mobile Consumer10B+

cell phone desktop

Mobile Web growth has outpaced desktop Web growth 8x Global mobile data traffic should grow 26x over next 5 years

PC

1993 2002-2005 2020

| 209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

MOBILE FIRST USER EXPERIENCE DESIGN

Mobile Consumer10B+

Social» Twitter: 40% of tweets sent via mobile, 16% of new users start on mobile» Instagram: iPhone only 3 months to hit 1M users. Six weeks to 2M» Mixi (Japan): 85% of page views on mobile vs. 14% 4.5 years ago

Commerce» Amazon: over $1 billion spent via mobile devices in the past 12 months» eBay: global mobile sales ~$4 billion in 2011, $2B in 2010, $600M in 2009» Best Buy: mobile Web users doubling every year:» 30M (10), 17M (09), 6M (08)

Productivity & Media» Google: mobile searches grew 130% in Q3 2010» Pandora: 50% of total user base subscribes to the service on mobile» Email: 70% of smartphone users access email on mobile device

Responsive Design

| 209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

RESPONSIVE DESIGN

» Responsive design is a seamless approach to designing content, images, and navigation to maximize the usability of a website across this growing range of devices.

» Rather than simply having a mobile website, or adapting a full-screen website to work on smaller devices, we will instead design a native user experience for each screen size which takes into account the differences among users on different devices in goals and needs.

» The result will be a website which users will experience as completely “responsive” to their needs, regardless of their device, yet which will be managed from a single back-end CMS.  

RESPONSIVE DESIGN SHOWCASE CINEMAS

» Relevancy: Online branding, UX design, responsive design, mobile.

» Challenges: Long-time DB client National Amusements wanted to drive engagement and purchases across mobile devices, tablets, and PC’s; and to increase purchase size and frequency.

» Insight: Don’t just promote movies - promote the theaters themselves as destinations. Design a website that allows users, across various devices, to navigate to their desired content easily while always keeping purchases just one click away. Promote cross-selling and upselling opportunities.

» Solution: Launch a new website with an improved information hierarchy, enhanced branding, and responsive design, which utilizes dynamic CSS to serve consumers with appropriate content for their mobile devices, tablets, and PCs, all from a single Drupal CMS platform.

» In the Client’s words: Sue Nicholson, Internet Marketing and Content Management, National Amusements Inc. "The Digital Bungalow Team has redesigned our website with specific detail to every aspect of our business. The complex integration with our vendors, loyalty programs, social media and email marketing has exceeded our expectations. They provided a realistic timeline and maintained an organized schedule of tasks every step of the way. We look forward to their continued help in developing new strategies to improve our online presence.”

RESPONSIVE DESIGN SHOWCASE CINEMAS

» We start here with the mobile first approach. Insights tell us that users on mobile are ideally looking for what movies are playing, where, when and how can they get tickets. This is represented by 3 to 4 simple navigation items.

» As the width of the site widens, the Main Navigation expands from 3 items to 6 items. Movie filtering becomes available as the target areas improve.

» The left column now widens and the “showcase and tickets” column appears to the left where in the mobile it was a 2nd tier navigation. This is because at the tablet level the user has more real estate to interact and spend time with the site.

RESPONSIVE DESIGN SHOWCASE CINEMAS

» The tablet experience next expands to desktop where we see a larger global navigation to accommodate extras such as Businesses and About us — that are more the use case for desktop versus mobile or tablet.

» Not apparent to the user, the trailer video files have been accordingly sized up and down to ensure optimal bandwidth and playback for the device.

» The desktop also allows for promotional backdrops and takeovers.

| 209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

RESPONSIVE DESIGN EMAILS & NEWSLETTERS 15

» Responsive design emails and newsletters are relatively new to digital. Designing for mobile isn’t simply a matter of taking a crack at writing mobile-specific CSS.

See page 17 for more.

Email Open RatesIndustry Desktop MobileWebmailEducational Services 19% 64%

17%

| 209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

RESPONSIVE DESIGN EMAIL AND NEWSLETTERS

» Single-column layouts that are no wider than 500 to 600 pixels work best on mobile devices. They’re easier to read, and if they fall apart, they’ll do so more gracefully.

» Links and buttons should have a minimum target area of 44 × 44 pixels, as per Apple guidelines. Nothing is more unusable than clouds of tiny links on touchscreen devices.

» The minimum font size displayed on iPhones is 13 pixels. Keep this in mind when styling text, because anything smaller will be upscaled and could break your layout. Alternately, you can override this behavior in your style sheet (do so with care).

» More than ever, keep your message concise, and place all important design elements in the upper portion of the email, if possible. Scrolling for miles is much harder on a touchscreen than with a mouse.

» When possible, use display: none; to hide extraneous details in your mobile layout. Elements like social sharing buttons may be great in the desktop inbox, but aren’t always easy to use by the recipient on mobile devices.

| 209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

RESPONSIVE DESIGN LANDING PAGES

» Responsive design landing pages should be looked at from the desktop experience first the optimized for mobile then tablet.

» A greater library of best practices are in place for desktop whereas mobile is emerging in this space.

» Choosing a responsive theme to create on top of is the best choice for responsive landing pages.

| 209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

RESPONSIVE DESIGN LANDING PAGES

» Create one landing page per source (this can be done using responsive)

» Keep landing pages campaign specific.

» Reach every visitor with MOBILE OPTIMIZATION (this can be done using responsive)

» Use dynamic content substitution

» Keep landing pages offer-specific

» Grade your visitors

» Test, test, test, test (did I say test?)

WEM

| 209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

WEB ENGAGEMENT MANAGEMENT THE PROBLEM

» When looking at site traffic, most analytics are done in aggregate. The aggregate results show us how the “Average User” engages with the site.

» However, understanding analytics and content needs in aggregate is no more useful then utilizing the average temperature for a year in deciding what clothes to wear on a given day.

» As a result, most websites don’t feel very smart to the user.

| 209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

Example: Nordstrom.com

Homepage

Use Case:Semi-FrequentMale Shopper

(cookied)

Smart!

Not Smart!

WEB ENGAGEMENT MANAGEMENT NORDSTROM

| 209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

Example: Nordstrom

Email Marketing

Use Case:Semi-FrequentMale Shopper

Wasted Impression

= Not Smart!

WEB ENGAGEMENT MANAGEMENT NORDSTROM

Work

| 209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

Congratulations to Hologic and Digital Bungalow2012 BEST IN CLASS WEBSITEBreastTomo.com

Congratulations to Visnick & Caulfield and Digital Bungalow2012 BEST IN CLASS WEBSITEvca-arch.com

Congratulations to Showcase Cinemas and Digital Bungalow2012 OUTSTANDING ACHIEVEMENTshowcasecinemas.com

Congratulations to Humana and Digital Bungalow2012 OUTSTANDING ACHIEVEMENTmywell-being.com

Congratulations to UMass and Digital Bungalow2012 OUTSTANDING ACHIEVEMENTUmassdining.com

DIGITAL BUNGALOW AWARDS IMA

| 209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

Congratulations to Visnick & Caulfield and Digital Bungalow2013 BEST WEBSITE DESIGNvca-arch.com

Congratulations to Humana and Digital Bungalow2013 MOST INNOVATIVE ONLINE FORMATmywell-being.com

Congratulations to Humana and Digital Bungalow2013 BEST WEBSITE DESIGNmywell-being.com

Congratulations to Easy Street Shoes and Digital Bungalow2013 BEST eCommerce Websiteeasystreetshoes.com

DIGITAL BUNGALOW AWARDS NEDMA

| 209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

Congratulations to Humana and Digital Bungalow2013 OVERALL BEST IN SHOWmywell-being.com

Congratulations to Humana and Digital Bungalow2013 BEST WEB EXPERIENCE MANEGEMENT SITEmywell-being.com

DIGITAL BUNGALOW AWARDS ACQUIA

| 209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

Congratulations to National Amusements and Digital Bungalow2013 GOLD AWARDshowcasesuperlux.com

Congratulations to UMass and Digital Bungalow2013 SILVER AWARDumassdining.com

Congratulations to Visnick & Caulfield and Digital Bungalow2013 SILVER AWARDvca-arch.com

Congratulations to SCAD and Digital Bungalow2013 SILVER AWARDscad.edu

DIGITAL BUNGALOW AWARDS IMA

| 209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

Congratulations to SCAD and Digital Bungalow2013 SILVER AWARDshowcasesuperlux.com

Congratulations to UMass and Digital Bungalow2013 SILVER AWARDumassdining.com

Congratulations to Visnick & Caulfield and Digital Bungalow2013 SILVER AWARDvca-arch.com

DIGITAL BUNGALOW AWARDS DAVEY