Black & Decker’s Highly Customized Mobile App

R2i created a highly social Black & Decker site, specifically branded “Recharge Your Yard,” which aggregates conversations about electric outdoor tools happening in real time, promotes widespread interactive features, and makes use of a range of user-generated content.

As a large brand, r2i recognized the B&D app needed to be scalable and assessable from an end-user experience, and the best way to do this in a high-value manner is through an web mobile optimized app. The app was designed to leverage the web site and content management system (CMS) including social media, conversation and user generated content while creating a mobile user experience tailored for all smartphone and tablet devices.

The site, built using an open source CMS, had many community portal content types such as Twitter & Facebook, videos, ratings, surveys, videos, discussions, detailed product specifications and a store locator map. Calls to action were created to engage the users deciding what products to purchase and to encourage switching from gas powered to electric powered equipment.  This includes the “Should You Go Electric” wizard, which helps the consumer determine whether or not they would benefit from their outdoor tool. Widgets were also created that presented a real time Twitter conversation stream with integrated geographic tagging displayed on a Google map. R2i also created a B&D story submission section to showcase specific user experiences with the products.

View the B&D case study here.

Mobile Optimized Design & Development Best Practices

When developing a mobile optimized app there are a number of design and development best practices organizations should follow. First, design for the optimal mobile experience (UI/Design/Functionality) then, content decisions will fall easily into place. Here are a few key details to remember:

• Create re-usable business logic and data layer methods

• Use mobi/m.dot – with automated redirection

• Don’t just re-purposed your website- it needs to feel personalized & interactive, be populated with high value content, render quickly and have analytics/behavior tracking in place / SEO.

• Coordinate Your Resources- U/I Designer (for usability), developer/QA (for functionality), information Manager for content)

Template Considerations:

• Keep file size small – Consider the end-user’s bandwidth and data rates

• Keep server requests to a minimum – Keep files to a minimum: combine CSS files for skin, combine images into sprites, and combine JavaScript (JS) files

• Resist heavy script usage – Utilize CSS 3 transitions and animations for a smoother look

• Use a server side detection and redirection – This approach keeps device from loading the desktop version until it hits a JavaScript or meta redirection

Business Considerations:

• Information Architecture & Content  – Filtered to what is most needed

• Functionality First – keep the end-user experience in mind at all times; K.I.S.S. (Keep It Simple Silly)

• Differentiate – if the market is crowded with identical concepts, do something different

• But Learn from Others – check out similar/competitors apps, use what features and design elements works, change what doesn’t

• UI Design is Critical – clear and accessible to all potential users; screen size, resolution, “touch-ability” are critical; test wireframes and mock-ups with potential users

• Don’t Forget the Icon – your app and brand needs to stand out in both graphic and name

R2i understands that a mobile app is an extension of your brand, a platform connecting your target audience through a seamless online experience. We help with the vision, creation, and tracking of your mobile apps to achieve your marketing goals and functional objectives. Working together, r2i can help you leverage your brand by providing cross platform mobile apps. Learn more about Black & Decker’s “Recharge Your Yard” today or contact us at info@r2integrated.com for more information.

.Net is a programming model for building web applications. A content management system is a web application that allows organizations to easily manage all of their website’s content (think video, images, documents, links, brand messaging, etc.). Open source means the platform’s creator, Shaun Walker, released the platform including its source code to the community (community = IT geeks who like to tinker with new technologies in their free time). He did this hoping they would use it and improve upon his foundation which they did. In the fall of 2006 DNN Corporation was established as the steward of the DNN platform by its creator Shaun Walker and 3 others.

I only outline the history of DNN because for this blog post to make sense to those not familiar with DNN I need to go back in time and set the stage before I start my cautionary tale.

So from 2007 – 2011, I have slowly gotten to know the community of DNN users and the DNN Corp team. Since I am in Business Development, I don’t intimately use the platform, but I do encourage people to adopt the platform and have recently begun selling DNN’s Professional & Enterprise Edition (more on this in the next paragraph).

While at DNN World I saw many familiar faces including clients, other DNN partners and the DNN Corp team. It was great to see everyone. The conference kicked-off with Shaun Walker’s keynote. I was very impressed. Shaun was polished, the music was upbeat, the lighting was dramatic and the stage’s backdrop was ideal – clean, crisp and bright. Shaun spoke about the conference’s focus on Cloud, Mobile and Social (CMS – get it?) but he also spoke about DNN’s identity, DNN’s essence. He described it as Yin and Yang; both opposing forces yet both needing one another to be complete. The Yin and the Yang he was referring to are the two sides of DNN, the FREE community edition and the PAID professional edition. The community edition is free and supported by the community. The professional edition is sold as a paid license model. It offers some additional functionality and is supported by DNN Corp but also benefits from the community’s support. Shaun argued that while both are different models and seemingly opposing forces the Yin and the Yang of DNN’s model will, in fact, be the key to its success.

I think this went over well with attendees. For newbies it just made sense but for those old timers who have been around for 3-4 years it was the message they had been hearing from DNN’s founders for many years. Community is important and we will always support the community. This level of community commitment has been demonstrated over the years, as Shaun has rejected ideas that did not maintain the community model.

After the first 4 hours at the conference it occurred to me, DNN is growing up. They were organized, they were polished; the conference ran like a well-oiled machine I felt like a proud parent watching my child enter the business world. The only problem was something didn’t feel right. I couldn’t put my finger on it until I walked into lunch on the last day of the conference with Shaun and a handful of the DNN Corp team. I looked at the group of them and commented that they looked like a bunch of parochial school boys in their conference uniforms of khaki pants and white oxford DNN Corp shirts. And then it struck me, DNN was trying to grow-up too fast and they had lost some of their essence, their identity, their personality.

Shaun Walker has been the face of DNN since the beginning and Shaun is a badass (at least he dresses like one)! For those who have never met Shaun, he spikes his hair, wears a puka shell necklace and his daily uniform consists of a black t-shirt and camouflage shorts.

DNN Corp recognizes Shaun’s appeal and leveraged his look in the limited edition Shaun Walker Bobble Head which was given away to 50 lucky folks at the conference. (Malik Kahn from PointClick even jumped into the pool at night with his clothes on to win a Shaun Walker Bobble Head!) But, I’m worried that the badass Shaun will be reserved for the community, the Yin. From what I saw, the Yang, the enterprise Shaun and the rest of DNN Corp lacked some of that badass flair. Hey, I get it. You’re selling to the big dawgs now. You need to grow-up. But as you start to find your way, remember where you came from. I would argue that even the enterprise could use an injection of badass every now and then. DNN Corp stay true to your roots, DNN was built by a rebel with a cause. He is the face of the platform. Maybe next year at DNNWorld the team can wear khaki pants, white oxford DNN Corp shirts AND a puka shell necklace. Add a little Yin to your Yang – remember what Shaun said, the Yin AND the Yang will be the key to DNN’s success.

To view video, pictures, blogs, tweets, the Shaun Walker Bobble Head and the DNN conference uniform check-out http://www.dnnworld.r2ismash.com.

These diagrams and meta dictionary will help other organizations understand the DNN architecture and save development time. Given that DNN Community Edition (CE) has several versions we reverse engineered the latest 5.42 (and for reference 4.95) versions to create the ERD and meta data dictionary. In addition there is additional reference defining the database differences between the versions.

DNN Community Edition 5.12 to 5.42

• CE 5.42 ERD Data Model (pdf)
• CE 5.42 Meta Data Dictionary (xls)
• CE 5.12 – 5.14 ERD Data Model (pdf)
• CE 5.12 – 5.14 Meta Data Dictionary (xls)

DNN Community Edition 4.95

• DNN495_ERD (pdf)
• CE 4.95 Meta Data Dictionary (xls)

These diagrams and meta dictionary will help other organizations understand the DNN architecture and save development time.  Given that DNN Community Edition (CE) has several versions we reverse engineered the latest 4.9x and 5.1x versions to create the ERD and meta data dictionary.  In addition there is additional reference defining the database differences between the versions.

DNN Community Edition 4.95

• DNN495_ERD (pdf)
• CE 4.95 Meta Data Dictionary (xls)

DNN Community Edition 5.12 to 5.14

• CE 5.12 – 5.14 ERD Data Model (pdf)
• CE 5.12 – 5.14 Meta Data Dictionary (xls)

Google Chrome O/S has a simple UI and a low footprint that fires up quickly – plus, it manages multiple sessions in a secure manner. It will be distributed as an open-source O/S, focused entirely on serving Web-based applications in a browser. This is a different architecture than Windows and Linux where the browser runs “on top” of the O/S and is at the mercy of how the O/S manages such things as the resource pool, memory, and other process-based calls. Why is this groundbreaking?

Because it’s breaking the barriers of Operating System, Browsers, mobile and your desktop.

Dynamic Web applications and user interaction require the browser and O/S to be as efficient as possible for speedy page-load times. This is a huge issue, especially if you consider a browser on a mobile device with less bandwidth. Google Chrome O/S is built to support and optimize a browser environment with a goal to load Web apps and pages fast. Processing power is relying on distributed server-based cloud computing.


In the past two years, phones have started to become mini-computers with applications ranging from games and personal finance management to corporate file access, word processing, email, and more. The introduction of the iPhone along with Apple’s notion that there is an application for everything has created a new consumer mindset. From a trend and forecasting perspective, the Chrome O/S will extend its provide power and simplicity from the phone to the workstation.

Does Google want to compete with Microsoft head to head? Probably not. However, considering that Google makes money from search and selling advertising, it’s in their interest to have more people spending time on the Web, preferably using their own platform. The Chrome O/S rollout is more than a year away, so there’s a lot of time for Microsoft to react. Given Microsoft’s 90-percent market share in the desktop market, Google has its work cut out. It looks like Google wants to initially attack the low-hanging fruit market of notebooks and PDA-type devices at the consumer level. I doubt corporations will adopt quickly, especially when you consider that the official release is more than a year away. They’ve succeeded in getting attention in Seattle, as Microsoft executives ponder the meaning and potential effect. Google Chrome may not deliver to all the hype, but the innovation, the momentum of cloud computing, distributed Web application access, and serving of digital information are certainly here to stay.

Related Video:

• Cloud Computing: http://www.youtube.com/watch?v=hplXnFUlPmg

Wikipedia -

• Chrome Browser: http://en.wikipedia.org/wiki/Google_Chrome
• Chrome Operating System: http://en.wikipedia.org/wiki/Google_Chrome_OS
• Chrome Blogspot – http://chrome.blogspot.com/

HTML 5 continues to break technical barriers by bringing desktop/client-side-based power and functionality to the browser. To showcase HTML 5, Google went beyond the “Hello World” sample with what they consider a true platform.  In the simplest terms, Google Wave is a next-generation email application. It’s the traditional email client functionality with an insanely intuitive and collaborative social media twist, plus an extendable API, and a bunch more.

Google has a knack for identifying and supporting the people who are ahead of their time with a cool and strategic technology.  Two rock stars in the Google world are the Rasmussen brothers, Lars and Jens. You may remember them from such applications as Google Maps. The story goes that a couple years back they were brainstorming about the next big thing, and as Lars eloquently put it, “We set out to answer the question: What would email look like if we set out to invent it today?”

For more than two years in a secret lab located in Sydney, Lars and Jens approached email behavior like an innocent child absorbing the outside world for the first time. With their imagination, curiosity, and a clean-slate perspective, they made incredible observations and conclusions, some of which embarrass you with their common sense. Ultimately, the Google Wave team reinvented email, messaging, and media in a collaborative message vehicle they call a “Wave.”

The Wave is a conversation that has attributes of messaging, social functionality, media, categorizing, interactivity, and sharing. So how does it work? First you create your own Wave (as in email or messaging) and send it to one or more of your contacts. That’s when the fun starts. The message becomes part wiki and part Facebook wall, where you can collaborate on all or part of the Wave. In a hypertext manner, the Wave departs from the traditional linear messaging thread to an evolving conversation element in a social cloud.

You have to play with it to really understand. Google Wave is one of those technologies that gives you an “ah ha” moment, when your current email experience becomes instantly and hopelessly obsolete. You’re going to want to jump on this ASAP and bring your world of contacts with you.

Google Wave Dashboard

As Tim O’Reilly states, “A key point here is that Google’s relentless focus on reducing the latency of online actions is bringing the online experience closer and closer to our real world experience of face-to-face communication.”

What is a Wave according to Google?:

• A Wave is equal parts conversation and document. People can communicate and work together with richly formatted text, photos, videos, maps, and more.
• A Wave is shared. Any participant can reply anywhere in the message, edit the content and add participants at any point in the process. Then playback lets anyone rewind the Wave to see who said what and when.
• A Wave is live. With live transmission as you type, participants on a Wave can have faster conversations, see edits, and interact with extensions in real time.  

Google Wave Sample

Technically Google Wave is more than an end product. As Lars states, “The Google Wave product (available as a developer preview) is the Web application people will use to access and edit Waves. It’s an HTML 5 app, built on Google Web Toolkit. It includes a rich-text editor and other functions like desktop drag-and-drop (which, for example, lets you drag a set of photos right into a Wave).”

A Wave has very non-tradition ways to actually perform work and communicate. For instance, say recipients are now participating in the Wave. If people are active at the same time, a Wave behaves like an instant message, except that you see each character as it is typed. You have the ability to enter a Wave at any point in the document/conversation. There is even a playback feature that allows you to go back in time and see the Wave from any point in its history.

Google Wave is really a platform with the ability to extend functionality via a set of open APIs that enable developers to embed waves in other Web services and build extensions. Of course, true to Google’s philosophy, they intend to open-source the Google Wave code. This is always a win/win for Google and community of developers adopting their platforms.

Some API Extensions: 

• Polly: an embedded poll/survey. In the wave shown below, participants are asked whether they can make it to a party. Responses appear immediately in the wave.
• Bloggy: A blog client, lets you make a blog post as a Wave. When people comment, they join the conversation.
• Spelly: A spell-checker that uses the entire Web as its dictionary.
• Linky: A link-recognition engine that is clever enough to recognize the link you just entered (e.g. a YouTube video or a link to a photo) and give you the option to embed the target of the link into the Wave.
• Buggy: A bug-reporting tool that can also be a participant in a Wave.
• Interactive Games: Here’s a real-time interactive chess game in Google Wave:

Google Wave Extended API - Polly

Useful References:

• wave.google.com: Current home for Google Wave.
• code.google.com/apis/wave: API extensions, documentation and sample code.
• waveprotocol.org: home for the protocol specs (draft), whitepapers and a discussion forum about the open Google wave protocol
• http://en.wikipedia.org/wiki/HTML_5: HTML 5 wikipedia resource

Often, however, navigating though social websites can be confusing while determining which version of “you” to display.  No, I’m not alluding to multiple personalities!  Online, lines typically blur when business social networking or hobby social networking becomes a part of your daily web interactions.  It especially becomes difficult in determining how to fit the other versions of “you” into your personal social profiles.  Most people have many interests and versions of themselves aimed at various audiences.  However, most social websites only allow one account per email address.

How do you identity which foot to put forward and where?  If all of this confuses you, try mapping it out based on how you interact with others online.  This can be as lo-tech as a pencil and paper.

1.    First, you should identify the personas that you would like to share.
2.    Then list the things you would like to share and associate them with their respective audiences.
3.    The next step would be to include the accounts that you already have and/or the ones that you would like to have.

Let’s examine the following different personas for the same fictional person, Jane Doughnut.  Jane shares personal items of general interest with her friends and family as well as photos and information about her kids.   She shares cooking demonstrations with strangers, friends and family and information about her employment history and endeavors with colleagues, former colleagues and strangers.  In addition, she shares company (a zoo) information with anyone interested in her company’s work.

Personal Jane (janedoughnut555_5555@gmail.com)

1.    Jane’s Profiles:
a.    www.facebook.com – Since Jane wants to be connected to her high school friends, closer co-workers and people whom she’s known throughout her life, she signed up for a Facebook account with her own name and personal email address.
b.    www.myspace.com – Jane also has a MySpace account from a few years ago that she rarely uses but loves that when her friends visit the page, they can hear her favorite song so she keeps it live.
2.    Jane’s Kids:
a.    www.flickr.com, www.blurb.com, www.facebook.com – Jane is very proud of her kids and wants to update everyone in her circle about what her kids are doing.  However, only a handful of her family members have a Facebook account to read her updates.  Furthermore, a lot of her family only want to see photos of the kids and not all of Jane’s personal status updates.  As a result, Jane got a Flickr account so that she can upload pictures and videos of her kids and share them in a variety of ways including email.  For her grandmother who does not own a computer, she imports her Flickr photos into a photo album that she creates through www.blurb.com

and mails the book to her Grandmother.
b.    www.facebook.com – For those who are on Facebook, Jane imports the Flickr photos into her photos to share with her friends in the newsfeed.
c.    www.friendfeed.com – To keep abreast of her extended family, Jane has a private room on Friendfeed where she aggregates family blog posts, photostreams, status updates and tweets.

Hobby Jane (Healthy_Cooking_with_Jane@gmail.com)

1.    Healthy Cooking with Jane:
a.    www.facebook.com Since Jane loves cooking, she wanted to connect with others who share the same passion so with her existing Facebook account, she started a Facebook group.  This group allows her to post items about cooking that she can share with her members for discussion.  Jane is listed as an admin for this group so her name displays in the sidebar.  The group name is “Healthy Cooking with Jane.”  Since she does not know all of her members personally, she lists her contact in the group as her other gmail address, Healthy_Cooking_With_Jane@gmail.com.

b.    www.wordpress.com or www.wordpress.org – Jane also blogs about cooking in a blog called “Healthy Cooking with Jane” on Wordpress.  Jane can link to her blog from her Facebook group to share posts with her members. However, there is no automatic import so she manually posts links to her and others’ blog posts and articles to keep the group very active.
c.    www.twitter.com – To update everyone she cooks with frequently, Jane tweets on her personal Twitter account.  To keep things consistent with this version of Jane, she tweets under the name Healthy_Cooking_with_Jane (no spaces) so that she can be searched by people who may be interested in the same subject, healthy cooking.  Jane had the option of naming her Twitter account JaneyD as her friends used to call her but no one would search it and it would be limited to those who were already familiar with her.  In Twitter, she occasionally links to her blog posts but she mostly tweets links about cooking in general to truly be informative and not obviously self-promoting.
d.    www.meetup.com, www.facebook.com, www.wordpress.com – Jane also occasionally gets offline to demonstrate her cooking expertise.  She used Meetup.com to create a Meetup group that meets once a month at Jane’s house where she cooks her latest recipes.  In the Meetup group, Jane frequently lets everyone know that they can find her on Wordpress, Facebook and Twitter by telling them to search “Healthy Cooking with Jane.”
e.    www.youtube.com While Jane demonstrates her cooking prowess in her Meetup group, her friend records her demonstrations on video.  This video is uploaded to YouTube so that those who couldn’t make it to the Meetup group get to see her demonstrations on her YouTube channel.
f.    www.friendfeed.com Jane also has a Friendfeed account, mentioned in Personal Jane, under her personal email address where she can set up different rooms.  She set up a room for Healthy Cooking with Jane where she can aggregate everything else that she’s doing online.  On Jane’s blog (where she gets the most traffic out of all of her endeavors), she embedded image/link code (works best with Wordpress) that displays the aggregated feeds from Twitter, YouTube and her other favorite blogs about cooking.  She often gets information on healthy cooking from her Google Alerts (set up with her secondary personal email, Healthy_Cooking_With_Jane@gmail.com) so information to post comes to her email inbox.

Professional Jane (Jane@janeszoo.com)

1.    Personal Professional (zookeeper):
a.    www.linkedin.com – Since Jane likes to network professionally, she has her experience as a zookeeper on LinkedIn.  If she ever wanted to switch to a different zoo, LinkedIn will give her the ability to meet others in the zoo that she may want to work for.  She is connected to a large number of current and former colleagues and has several recommendations.  This account is linked to her personal email address so she is always able to access it.
2.    Company Information:
a.    www.blogger.com – Since Jane is tech savvy, she is responsible for the company blog on Blogger.  She blogs about zookeeping on a daily basis.  Although her name displays as the author of the post, the contact email that she chose to display is her work email.
b.    www.facebook.com – With her personal email account, she started a Facebook page for the zoo.  She is not listed as an administrator on the page itself.  The page looks as if it is only a representation of the zoo.  This page gives her flexibility to RSS the blog posts that she creates about the zoo.  She also posts polls and quizzes about animals as well as videos created at the zoo for the fans.
c.    www.twitter.com – To draw attention to articles on zoo keeping as well as her zoo blog posts, Jane tweets with the zoo’s Twitter page.  She frequently posts links on the micro-blogging site.  Tweets appear to come from the zoo and not from Jane.  This account was opened with Jane’s work email address.

In conclusion, Jane has properly linked her various accounts to their respective audiences and shares information of interest with each audience.  She understands the importance of targeting her different audiences so that she can provide only content that appeals to that audience and not content that they would find irrelevant. Jane also needs to get outside more often and drink less coffee as her proficiency with and affinity for social networks has left her with a severe vitamin D deficiency, carpal tunnel, eye strain and skin pigment loss.  It could be worse, however, as she could become interested in online gaming.

R2i Live (see http://live.r2integrated.com and http://oflive.r2integrated.com) is a real-time media portal that empowers users to experience an event through a blend of pictures, videos, audio, text, and Twitter messaging from your colleagues at the event. Several months ago, our engineers were brainstorming for an innovative, yet simple way to use technology to engage not only attendees of a particular event, but also those who cannot attend. The product of that creative session is R2i Live, which we’ve since introduced at two events: The Greater Baltimore Technology Council’s TechNite and DotNetNuke’s OpenForce 2008. While attendees walked the events, attended sessions, watched exhibits, and spoke with attendees, they were sharing their first-hand experiences by snapping photos with their phones, texting, and emailing to R2i Live. R2i Live takes care of the rest, organizing the media on a single Web page, which can be accessed by attendees and people outside the event.

R2i Live at DNN OpenForce ‘08 in Vegas two weeks ago: