On September 15th, Roundarch participated in the launch of Microsoft’s Internet Explorer 9 Beta. As most of the industry is now aware, IE9 has been designed from the ground up by Microsoft to be the most compliant HTML 5 browser available, with a lot of additional features including a new, simplified user interface (sans browser chrome), and hefty performance improvements thanks to real hardware-backed graphics acceleration and a fully rebuilt JavaScript engine.

Because of our experience with Rich Internet Application design and development and our existing expertise with HTML5, Roundarch was approached by Microsoft to design and develop a demo application that would leverage the new features of IE9. Microsoft suggested that our team partner with OneRiot, a realtime advertising service, which archives and makes searchable news, videos and blogs being discussed on the social web, all ordered to reflect current social relevance.

Working with Microsoft and OneRiot, we decided to develop a purely conceptual trending news viewer application with the goal of demonstrating both form and function, leveraging a variety of technologies to make a rather complex experience seem deceptively simple, fast and useful.

The Demo Concept

The concept of the application is quite simple, and I’ve included videos below to help you visualize things.

The application allows a user to view current and historical trending news topics (and associated links), as these topics are made popular on social networks and across other Web sites. Not only can users view trending content, but do so in a manner that provides a way for users to visualize changes in the trending topics over time.

Because of IE9′s strict adherence to specifications, the application is 100% standards-compliant HTML5, but still demonstrate user experience patterns that have historically only been possible by leveraging a multimedia-enabling plugin.

The OneRiot “AdBubbles” demo represents trending topics as translucent, physics-driven bubbles – for which color represents whether or not a trend is heating up or cooling off, and which with their size represents the total number of online articles/posts that referenced that trending topic.

To help the user visualize the change in trending topics, the “bubble tank” refreshes itself once each minute, loading the most current trending topic data which causes a visual transformation of the size and color of the currently displayed “bubbles”.

Rather than trying to explain the full application in writing, let’s just take a look at the video clips:

Application Loading

When the application loads, the bubbles fall in from the top. The color of the bubbles represent whether or not the trending topic is cooling down or heating up (cool = blue / hot = red). The size of the bubbles represents the amount of online chatter.

Digging Into a Trending Topic

The bubbles in the user interface all represent trending topics from the RealTime Web. Double clicking a bubble will load a modal window with the latest article results from OneRiot’s partners.

Ignoring and Following Trending Topics

Since trending topics will refresh over time, and a user might want to view a topic in the future that is no longer part of the trends, we’ve allowed the user to drag or toss bubbles at either the “following” or “ignore” containers that are present on the screen. Should a user choose to follow a subject, it will remain available for them to recall the latest OneRiot partner articles. If a user doesn’t care about a particular trending topic, they can toss it towards the “ignore” container, which will prevent this topic from refreshing within the user interface.

The Timeline Viewing Trending Topics and Changes Over Time

To make the most out of the trending topics visualization, we thought it important to be able to view the changes in popularity for topics over time.
The 24-hour timeline allows a user to navigate across time to view how the trends have changed. When a user clicks on a new point in time, the application will compare the current trends with the historical data, and the bubbles on screen will transform accordingly.
Should the topics not exist in both data sets, they will simply dissolve and disappear from the interface and new topics will drop in from above to fill the gap. Should topics exist in both data sets, the bubbles will change size and color, based on their popularity and trending meta data.

“Auto Play” Mode

If the user does not actively use the interface for a set period of time, the software will go into “autoplay” mode. When this happens, the application will randomly cycle through the trending topic bubbles, and display an associated article headline and short description in large typographic text. This is displayed behind the canvas control / physics engine bubble chamber.

The Technology Behind the Experience

I am not going to get too far into the technology here, as Jeff Karova, the lead interactive developer on the project has broken things down in this recent post that discusses the technology behind the demo application.

I will, however, summarize our approach: To drive the user experience, we created an Azure application, hosted on Microsoft’s Azure cloud infrastructure. This application regularly connects to, parses and archives data in Azure SQL from the OneRiot API, which is later accessed by the
HTML5 demo via Web service requests.

There are really two types of data: Trending topics and articles/posts related to them. Each time the application requests a new set of trending topics and/or articles, they are stored in the Web browser’s local database, allowing for an experience that remembers your previous sessions, and gives users the ability to navigate between current and historical sets of data.

The user interface, which relies most heavily on the HTML5 canvas tag, features both a physics simulation to help render the bubbles / trending topics and a timeline component to that gives users the ability to explore trending topics as they change over the course of the last 24 hours.

Introducing the Concept of Time-Release Design

The application also has a very purposeful design feature, that will most likely be taken for granted by users until they’ve had the opportunity to use the application over the course of time. The interface was designed and developed with the concept of “time release” experience in mind.

What in the world does that mean?

Just like it sounds, a “time release” experience is one that becomes more valuable to a user that uses the application over a longer time period. We sometimes use this as a way to introduce novice users to more advanced features within a software application, revealing functionality as the user becomes more familiar with how the software they are using works.

Clearly, this isn’t applicable to all types of software. But for a casual news discovery application… why not?!

The concept works quite well, and the more that you interact with the OneRiot “Adbubbles” demo, the more interesting and valuable the experience becomes.

The application provides a new, unique and experimental way to discover interesting news items. Time and again, we’ve heard feedback from users about how they’ve found interesting content using OneRiot that they probably wouldn’t have found any other way, based on their browser habits.

Some Thoughts on HTML5 and Impact on RIA Design & Development

Working with the great people at OneRiot, as well as with the IE9 team at Microsoft was a great experience. The Microsoft IE9 beta is the most robust and HTML5 compatible browser available for Windows computers, and it’s performance is extraordinary, especially when compared to Microsoft’s previous incarnations of their hugely popular Web browser.

At Roundarch, we’ve gained a lot of experience related to HTML5, as many of the current and recently launched projects that our teams are working on take advantage of the new HTML specification, as well as what is now available using CSS. HTML5 shows great promise, and plays an role as another important tool in the developer toolbox.

There is a lot of talk about HTML5 being the end of other RIA technologies. With our experiences, that doesn’t seem to be the case, as there are many examples where HTML5 just can’t do what other technologies can. In time, as browsers incorporate WebGL and relative technologies as well as the ability to run applications that allow for native/compiled code execution, HTML and Javascript have their place, as do more robust technologies like Adobe Flash and Microsoft Silverlight.

Another consideration for HTML5 for complex RIAs right now must be that developers must still rely on users viewing their applications and content using one of many different browsers. It seems that the competing browser technologies and companies behind them simply can’t seem to align across the board on how features are implemented, and what priorities are in their overall product-feature roadmap. This means the potential for a repeat of 1996 and the original browser wars. This means that the amount of testing and tweaking required for HTML5 RIAs should not be underestimated when planning projects.

HTML5 shows great promise, and the next year or two should be quite interesting as more feature-rich browsers are offered up to consumers and as the HTML5/CSS3 specification continues to mature.

Do you want to know more about HTML5 and how it can be leveraged to create standards-based, desktop-like applications that run solely in the browser? Drop me an email, or reach out to our team at Roundarch.

For more information on Microsoft’s Internet Explorer 9, and to see how it’s helping make a more beautiful Web, check out beautyoftheweb.com.

To learn more about OneRiot, and their perspective on the HTML5 Demo application developed by Roundarch, see their blog post on the topic.

If you want to experience the OneRiot HTML5 Application, it’s online at http://adbubbles.oneriot.com .

Overview

Sept. 15th, 2010, Microsoft co-launched IE 9 and a companion site, ‘Beauty of the Web’, to feature projects written to take advantage of the new browser. Roundarch and OneRiot partnered to build an app featured on this site. Using OneRiot’s Trending Ad API, Roundarch conceived and developed adbubbles.oneriot.com, a concept site designed to feature IE 9′s support of HTML 5 standards and graphics acceleration.

In essence, we built an interface that allows users to interact with trending topics as balls in a tank. Data about the trending topic was used to draw the ball’s size and color. Balls can be tossed around the tank and possibly into a ‘follow’ or ‘ignore’ bin, as well as clicked on to bring forth a modal window displaying OneRiot content. Further, A timeline component allows the user to see changes to trending data between time intervals: data begins collecting for these intervals as soon as the user enters the site.

This project featured three essential technologies: Microsoft’s Azure cloud service for backend support, and HTML5 and the Box2d physics engine for the front end. This post goes into detail on our use of HTML5, and touches on the other technologies.

Azure

Our use of Azure consisted of two webservices. The first of these services, a ‘Worker Role,’ was written to regularly query the OneRiot API, parse and archive data on the top 50 trending topics. This data is stored in the cloud, and is used to service the timeline component of the site as well as provide current trending data to ball tank. The second service, a ‘Web and Worker Role,’ was created to serve the site.

HTML5 and Canvas Drawing

Drawing the physical interactions of bubbles in the site relied on the use of the HTML5′s canvas tag in conjunction with a javascript port of the Box2d physics engine. Javascript and jQuery were used for all front end programming – I’ll focus on how this was done for the majority of this post.

The canvas tag’s context property is used for all drawing operations. If you are familiar with AS3, the context behaves similarly to the .graphics property of a DisplayObject: the context can render drawing operations, like fills, strokes, and gradients, as well as manage alpha, render text, and perform pixel by pixel operations.

The canvas tag itself allows only three properties: id, width, and height. Any drawing that occurs outside the bounds of the canvas does not render.

Here’s a quick drawing example. In the following HTML document:

square.html

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8"/>

    <meta http-equiv="X-UA-Compatible" content="IE-9"/>

    <title>Drawing a Red Square</title>

  </head>

  <body>

    <canvas id="myCanvasId" width="100" height="100"></canvas>

    <script src='redsquare.js'></script>

  </body>

</html>

You could use the following script to draw a red, 50x50px square to the screen:

redsquare.js

var canvasContext = document.getElementById('myCanvasId').getContext('2d');

canvasContext.fillStyle = "rgb(255, 0, 0)";

canvasContext.fillRect(0, 0, 50, 50);

To draw the ball tank, we implemented a loop that updates bubble position using a physics engine, allowing for realistic interactions between balls in the tank.

Before the drawing

Prior to the physics engine starting, an array of roughly 200 ball images are created. There are 9 basic colors to the balls in the tank plus 24 intermediate colors between each base color, used for tweens; a separate image is created for each base and intermediate color. This is done by creating a canvas for each image (which is not drawn to the screen), and using that canvas’ context to draw a gradient-filled ball with the current color. We also create a separate image that will be used to give each ball a specular-like highlight.

In the loop drawing

After these images are created, we start a loop that continuously draws the bubbles. The basic process for the loop is as follows:

1) Parse incoming trend data by comparing it against the current trends.

• New objects are built for each new trending topic and added to the physics engine.
• Topics in the engine but not in the new list are removed from the engine and a set of tweens are run on the object to visually transition it out.
• Topics in the engine and the incoming list have their size and color properties updated and tweens started to animate these changes. Since updating the properties of an object active in the simulation proved too difficult to implement for launch, we suspend that object from interacting in the engine while it is being updated.

2) Step the physics engine forward, check for collisions. We use the engine’s collision detection to determine if a ball has been tossed into the “following” or “ignoring” bins. Start transition tweens on any ball that has been added to either, and remove that ball from the engine.

3) Clear the rendering context.

4) Render each ball. Step through every ball and transform the drawing context’s matrix to match the ball’s properties; x, y, rotation, scale and alpha. These properties are managed either by the physics engine or by tweens, depending on whether the ball is active in the engine. Balls not active in the engine are either transitioning out of the app or transforming based on new trend data.

Once we’ve transformed the context’s matrix, we look up the ball’s color index which tells us which image we will be drawing with. Use this image to draw the ball, then draw a highlight over this image. Next, we draw the trend’s title over the ball images. Finally, we reset the context’s transform matrix and move onto the next ball.

Here’s a little bit of pseudo-code to illustrate the loop. This simplifies the process, but gives you a rough idea:

// begin with an untransformed context matrix

context.save();

context.translate(x, y);

context.rotate(radians);

context.scale(scaleFactor, scaleFactor);

context.globalAlpha = .8;

context.drawImage(balls[colorIndex].canvas, -radius, -radius);

context.globalAlpha = 1.0;

context.drawImage(highlight.canvas, -radius, -radius);

context.fillText("My Trend", x, y);

context.restore();

// restore the untransformed matrix

There is a lot left out of the above code, but you can read more about the canvas tag and 2d context here to fill in the missing pieces. Look back here also for more posts about HTML5 and the canvas tag.

The timeline

The timeline at the top of the site, also drawn using a canvas, begins collecting and storing trend updates locally in the user’s browser as soon as the site is accessed and continues to collect data for a 24 hour span every 30 seconds. These intervals are marked by icons on the timeline.

Users can select any marked interval in their timeline, causing a trend update to occur. This affects the first portion of our drawing loop as explained above. Intervals clicked near to the current one may yield unnoticeable changes to the balls within the tank, while farther intervals can show dramatic changes to the size and color of each ball, especially in a busy news cycle.

Clicking on any hour prior to the first site access will cause the site to load a single trend update from the cloud for that hour.

Box2d

The Box2d physics engine was used to calculate the physical interactions of the balls. Specifically, we used box2djs, a javascript port of the engine. Body and circle definitions were added to the engine for each ball, with UserData attached to each ball that contained necessary drawing information, either static or managed by a tween. For example, we stored a ball’s color index in the UserData.

The box2d engine http://www.box2d.org/ if you are interested in exploring it further, and the javascript port we used is available http://box2d-js.sourceforge.net/ .

We used code written by Mr. Doob to help get us working and understand how to translate the data from box2d into canvas coordinates.

Here at Roundarch we’ve been keeping an eye on Kinect (formerly code named Project Natal), the new controller-free gaming and entertainment system that will soon be available for use with Microsoft’s Xbox. The technology behind Kinect seems to be unlike anything we’ve ever experienced and we can’t help but think that it will affect many things beyond gaming.

If you’re not familiar, here’s a little bit of background:

In 2006, Nintendo released a new gaming console called the Wii and it changed the way we play games. As you’re all aware by now, the Wii uses a handheld controller that detects movement in three dimensions. The fact that the game player just holds the device while interacting with the on-screen game made the Wii a very intuitive and easy interface to grasp for people who don’t normally play video games. Thus the Wii reached a wider demographic of grandparents and moms and kids than other more “hardcore gaming” systems like the Sony PlayStation 3 or Microsoft’s Xbox 360. This translated into record sales for Nintendo.

PHOTO: http://www.theconsolezone.co.uk/~consolep/images/nintendo-wii-remote-jacket.jpg

Fast forward to 2009. Sony and Microsoft are still trying to catch up to the Wii. Last year Sony announced an upcoming motion-sensing game controller platform for the Playstation 3. Sound familiar? PlayStation Move uses a handheld motion wand as a device for game play. The game player moves around, while holding the wand, to interact with the game. It has been noted that the PlayStation Move’s movements are much more precise and accurate than the Wii’s, but nonetheless its main mode of input is still a motion-sensing wand. PlayStation Move will be available in North America in mid September.

PHOTO: http://www.videogamesblogger.com/wp-content/uploads/2010/03/playstation-move-controller.jpg

So, that leaves Microsoft. A safe bet would be to guess that they’d enter this market with an add-on to the Xbox bundled with some sort of motion-detecting controller or wand, in a similar fashion to Nintendo and Sony. But here’s where Microsoft has kicked it up a notch… or 10 notches. Microsoft Kinect is an add on to the Xbox, but there’s no motion sensing controllers to hold. You just move. That’s it.

PHOTO: http://www.blogcdn.com/www.engadget.com/media/2010/06/kinetic-e3-product001-rm-eng.jpg

Kinect does full-body motion capture with both vocal and facial recognition and there’s nothing to hold on to. No motion-sensing controller or wand. You just do it. Move your body and the system recognizes your actions. This picks up right where the Nintendo Wii left off. People who have never picked up a gaming controller in their lives instinctively know what to do. See a ball? Kick it. See a dancer? Follow the moves. In addition, Kinect also is a new interface for watching movies and TV, listening to music, and chatting with friends.

Check out this video of Kinect in action.

All of this is accomplished through one simple Xbox 360 add-on device, which has both an advanced camera and a microphone. Kinect will be available on November 4 and there will be 15 game titles at launch. The price has not been announced but estimates are at about $150.

So, what do you think? Is Kinect just a gimmick? Or is it a complete game changer (pun intended)? How could the technology Kinect is using influence our everyday lives?

To quote Steven Spielberg, “This is a pivotal moment that will carry with it a wave of change, the ripples of which will reach far beyond video games.” What changes do you think we’ll see in the future as a result of this new technology?

Will we no longer need 3 remotes to control our entertainment center? Maybe everything is voice-activated. Moving beyond the television, do you see a future where we can control many kitchen appliances, our stereos, heating and cooling controls, and home security systems with voice and face-recognition and gestures? How about business presentations? Making a swipe motion to go to the next slide would be pretty cool. Or, what if we could virtually whiteboard while collaborating with remote offices? What if our cell phones had motion sensors? We can imagine a world where the cell phone detects sign language and translates it to text or audio. What if the military could practice field operations at home before going on a mission? Finally, think of all the implications in the retail and advertising space. You could “try on” clothing from the comfort of your home using a virtual replication of yourself on your television and an online catalog from your favorite clothing store. Maybe waiting for the bus isn’t so boring when all of the advertising on the bus stop is interactive. The possibilities seem limitless.

Last Month we had the chance to once again work with the Chicago band Wilco on updates to the successful iPhone application.  The updates gave us a chance to improve some of the features already in the application and add even more.  Wilco has always been dedicated to using new technologies to help the band connect to their fans and these improvements strengthen that connection.  The new version features an all new roadcase with live concert recordings from the Boston, MA and Madison, WI performances.  We were able to improve the photo and poster galleries and add a section dedicated to the upcoming Solid Sound festival.

I had a chance to discuss the app at last Month’s Mobile Monday Chicago Mobile Demo Showcase held in Chicago on June 21.  The presentation focused on some of the updated features of the app and highlighted the cloud based data integration with wilcoworld.net, the official Wilco website.

In addition to the iPhone app updates we also worked with the band to update the website’s discography using the latest HTML5 audio technology.  You can now enjoy the bands discography on your iPad and other modern web browsers like Chrome and Safari.

Stay tuned for future updates coming very soon that will enhance the Solid Sound section and allow you to listen to the concerts and album tracks while multitasking.

Despite 30 years spent automating financial transactions, financial institutions offer customers no more financial insight than when people used passbooks and accordion files.  The first institution to buck this trend will redefine the industry.  And there is no guarantee that it will be a bank…or credit card company.

Read the full American Banker article here.

Roundarch thrives on creating and implementing digital experiences. Part of building that experience is creating a robust web analytics infrastructure that supports future business decisions. This entails identifying and tracking KPI’s as well as choosing an appropriate web analytics tool(s). Selecting the right tool for a client requires consideration of many factors.  From annual costs to reporting needs to analysis requirements, each is an important factor. Site redesigns offer a unique opportunity to assess current tools and determine if the incumbent tool is meeting your needs.  A Brand new site, new technology, and new CMS equals great time to install robust data collection routines and refocus on the important metrics.

It is with this in mind that Roundarch is proud to become part of the Yahoo! Web Analytics Consultant Network (YWACN).  By joining the network, we expand our breadth of expertise that in turn benefits our clients.  While Yahoo! Web Analytics (YWA) is not the appropriate solution for all of our clients, there are some that can benefit from YWA’s unique value proposition-  free and a little less sophisticated than Omniture SiteCatalyst, but more sophisticated than Google.

Routinely, our clients question the value they are extracting from their incumbent web analytics tool.  While often this is corrected through alterations in implementations or increased focus of resources, sometimes, we do find a client whose cost/benefit ratio is out of whack. In these types a scenario’s GA or YWA are valid alternatives and qualify to be part of an alternative solution. This enticing alternative allows clients to reallocate $’s from software to people. This is crucial because tools don’t create insights, people do.  Analysts are the ones that use the tools to assess information along with the surrounding influences and offer profitable recommendations.

Roundarch Analytics strives to provide the best value solutions for our clients. And Yahoo! offers an alternative that may make sense in some situations. The Roundarch Web Analytics team is looking forward to a long and fruitful partnership with YWA.

The Ultimate Comparison Between Google Analytics & Yahoo! Web Analytics

The Problem:

When using the square bracket notation to de-reference a property of an object within the mxml, you receive an invalid warning as in the following example. It stops you from noticing warnings that actually mean something, I’ll call it “warning blindness.”

First seeing these warnings a developer might think they need to add the [Bindable] tag to the object. Doing so will eliminate one of the errors, but will add to the compilation time and won’t really add any value unless the value of the object changes and it needs to actually dispatch events for binding updates. Furthermore, the developer would still have the warning regarding not using the square bracket operators within a binding tag. If the user wants to receive binding updates or is less concerned about the extra overhead added by using the [Bindable] tag they may do so. This is a useful warning; it informs you of something that will actually make a difference come run time. The other warning is not taking into account the context of the square brackets, and falsely “believes” that the type of the variable using the square brackets is an Array or an ArrayCollection rather than an object, and is thus informing you of your possible error. This isn’t a problem if you have 1 or 2 of these, but say you have 30. Now it starts to clog up your warnings box and you start ignoring (or not seeing) things that actually matter. This is especially a problem in Flex Builder because warnings tend to not clear properly when doing an incremental build, so many times it will replicate the warnings (clean build in my experience has always worked to clear the warnings and give me the proper list, but clean building means building things that didn’t change and therefore wasted compilation time).

The Solution:

Since the function call in the binding only references the object changes to the underlying properties it will not cause the bound value to be updated, rather the entire object must change as in the following example:

If this is an issue across an entire application, the method can easily be plugged into a static utility class and used throughout the application. Also be mindful in the above example the curly braces in the click event of the button signify a new object not a binding.

package utils
{
public class ObPropUtil
{
public static function obProp(object:Object, prop:String):Object
{
return object[prop];
}
}
}

And then easily used anywhere with ObPropUtil.obProp(someObject, SOME_PROPERTY) in place of someObject[SOME_PROPERTY]

If you aren’t using constants, you can generally chain along the dot operator without a problem (you cannot use constants in place of a literal variable using the dot operator chaining, and therefore are forced into using the square bracket operator).

For the past year, a team of 13 Roundarchers have worked to design, develop and launch StrataLogica™ which is a web-based learning application, built for our client NYSTROM Herff Jones Education Division, that delivers map and atlas content in an engaging 3D, interactive environment built on the Google Earth API.  As discussed in our recent blog post on the Google Code blog, we faced some interesting challenges during this project being one of the first enterprise scale applications to use the Google Earth Plug-in and its JavaScript API as its foundation.

Early on in the project, our team was able to solve the core challenges of being able to wrap Nystrom’s 2D map content on the 3D earth in a way that preserved the image quality of the their print products and developing a framework for managing editorial content required to be shown on the earth.  Here I will discuss the additional challenges we faced in creating a compelling and immersive educational experience while working within the framework required by the Google Earth API.

Our experience designers were faced with several challenges. Key among them were providing maximum space for the content, large targets for users of touch screen devices, and access to a set of tools to mark up the maps.  The graphics also needed to appeal to the diverse target market: K-12 students and their teachers.

The solution included opening a chromeless browser window and interface components that open over the map to access options and tools that close when not needed.

The user interface is written in JavaScript and the gap between user input and the earth is bridged by the Google Earth JavaScript API.  Developers were faced with the hurdles of being able to track and provide users control over the layers of Nystrom content, provide an interface to Google layers, and create tools the user could use to add content to the map that could be saved and restored.

Users can be licensed to use one or more map series. These include labeled and unlabeled base maps, additional thematic maps or related maps, views, hotspots, and place marks. We chose to dynamically generate a menu called the Map Chooser, the contents of which are supplied by a JavaScript object created by server-side Java code. The specific elements are based on the user’s access rights and available CMS content.  When the user selects a map series, the KMLs for the Superoverlays and other content are loaded into the plug-in using the Google Earth API. A reference to each layer loaded is retained so its visibility can be toggled or it can be unloaded.

At the bottom of the page is a tool bar that expands up when clicked to reveal a set of tool icons. One of these is ‘Settings’ which lists Google Layers that can be turned on or off. When the layer’s checkbox is changed, the event handler determines the state and layer to be changed and then passes that request to the Google Earth API. A JavaScript table of rules is used to preset the settings appropriately for the map being displayed.

The tool bar also has a selection of tools for marking the map, replicating and extending the experience with the traditional educational map materials. A special KML is loaded to hold user-created markings.  Users select a tool for the type of marks they want to make; for example, draw lines, place a map symbol, or add a place mark with a pop-up balloon. Mouse event handlers attached to plug-in components return the geo-location of mouse clicks to the JavaScript code where KML strings are composed and then loaded into the plug-in after running the KML string through the Google Earth API’s parseKML method.

The team has just launched a new version of StrataLogica which allows teachers and students to collaborate in real-time on assignments and group projects and create dynamic presentations which can be played back in a movie-like sequence.  Greg Knapowski and I are in San Francisco this week showing off the new release at the Google I/O Developers conference in the Sandbox with our clients from Nystrom.  Look for more blog posts when we return.

Jeff Maling, President and Chief Experience Officer, and Geoffrey Cubitt, President and Chief Technology Officer, of Roundarch talk with Vidya Drego from Forrester for her Q&Agency blog series.

Welcome to Q&Agency! Each week, I get to talk to agencies small and large and get to hear (in their words) what differentiates them and the experiences they create. To help bring some of that information to you, I’m showcasing an ongoing series of interviews with small to mid-size interactive and design agencies. If you’d like to see your agency or an agency you work with here, let me know!

On May 5th, I talked with Jeff Maling the President and Chief Experience Officer and Geoffrey Cubitt the President and Chief Technology Officer of Roundarch. Edited excerpts from that conversation follow.

Forrester: Tell me a little bit about your agency?

Jeff: Roundarch was founded in 2000 by Deloitte and WPP. At that time, the idea was to bring together the technology and program management skills of Deloitte with the creative skills of WPP to tackle large web problems. Over the past year or more that has translated into large digital problems of many types including mobile, touch screen, etc. But for the most part, we’ve stayed true to the vision because we’re specialized in large-scale digital solutions for fortune 500 companies, the government, and large international organizations. We have about 220 full-time employees primarily in New York and Chicago, smaller offices in Denver and Boston, and a virtual office in DC (where we mostly work in secure locations). Like any good agency or consultancy, we also have a few nomads who refuse to move into one of our offices.

We create breakthrough experience design and build the technology associated with it. To do that, about 50% of our work is focused on strategy and design, and 50% is focused on technology. Our people divide out the same way. We check that math a few times a year, and it always breaks out like that and we strive to keep it at that balance. It’s our core belief that the interplay between design and technology is essential to digital.

Geoff: That’s something we’re religious about. On most engagements, we try to lead both sides of that, sometimes we work on one piece or the other, but we’re always involved in the interplay. It delivers better results. If it looks cool but doesn’t work, it doesn’t solve the business objective. If it’s a great technical solution but no one can use it, it’s not good for the business either. You need both of those things to work together.

Forrester: What is your elevator pitch?

Jeff: We design and develop digital solutions for the world’s largest organizations. That includes customer-facing web sites like we’ve created for our clients at Avis and HBO; complex B2B sites for global financial services firms focusing on wealth management, custodial, credit card services, trading apps, etc.; or an app that tracks assets for the Air Force. We also create mobile experiences for clients like, Avis, HBO and the band Wilco. We’ve made the transition to all things digital. We’re currently working on an executive dashboard surface experience for a client that will utilize a large touch screen.

Geoff: We’re also working with Tesla on their next-generation touch screen infotainment dashboard display that will be connected to the Internet. So we’re expanding beyond just the web to all digital tech interfaces but generally leveraging web or internet technologies.

Forrester: What are the three key things that differentiate you from your competitors?

Jeff: 1. We take a very strategic approach to problems. We have our own maturity model and strategy methodology that we use to create an entire multi-year strategy for clients. We don’t often work only on a campaign. 2. We have some of the deepest user experience capabilities in the field focused on complex applications. We deal with issues like taxonomies and metadata, using methods and principles like rigorous user testing and interaction design. 3. We work with strong enterprise-class technology. Most of our projects result in hardworking enterprise solutions where there’s a core interface that users and customers interact with that’s tied into complex back-end systems. In these instances things like security, scalability, and performance are all considerations when thinking about how to deliver best experience and value for the business. 4. If I can add a fourth…we’re built around complex relationship management – probably from the heritage from Deloitte and WPP. We work with really complex organizations like financial services companies and the Air Force. We are really good at managing in those environments. They can be frustrating, slow moving, and require a lot of consensus building, but we’re really able to get things done in large, complex, bureaucratic enterprises. We actually deliver on solutions where they’re normally challenged to deliver successful outcomes. They want someone not just to design cool stuff but to also have the knowledge to get it done in their environment.

Forrester: Why is your agency well suited to deliver a great customer experience for your clients (and their customers)?

Jeff: There are two reasons really. The first: We do mainly our own customer research – this is not dissimilar to the Forrester approach. We do our own interviews, inquiries, create personas, design scenarios, the whole bit. We follow all the typical market trends, but we do a lot of deep user research.

Geoff: It’s a very user-centered design process; one that really begins with a lot of user study.

Jeff: The second is that we’re passionate about concept design. We like to open the aperture really wide on a problem and think about a long-term solution that could solve the client’s problems for many years. Then we make it bulletproof by testing it, getting feedback, trying to break it, bringing in technology teams to make sure it’s buildable, scalable, etc. Finally we flesh it out in detail and scope it appropriately – usually in a multi-phased roadmap. Given budget and timing, we decide what the first release will look like and then how subsequent releases will allow us to achieve our vision while continually learning from what we release.

Geoff: We’re big on having an associate creative director, a customer experience lead, and a technical person at the table during concept design. The multidisciplinary approach leads to the best solution. It’s not just technically constrained design; it’s sometimes even technology-led because they know the capabilities of the technology best. Both technical and experience design teams push and constrain each other. That’s important. Our people are deep specialists but we collaborate often and create an appreciation for each others’ skills.

Forrester: What’s it like to work at Roundarch?

Jeff: We have a lot of people who’ve been here for a long time and a lot of boomerang employees that have returned to Roundarch. I think that speaks to the great culture we have here.

Geoff: That culture takes constant gardening. We’re always trying to empower people. We’ve got smart people that are passionate and work well together. They work for big name clients, do cool projects, and are fun to work with. We spend time nurturing all elements of that by getting feedback from employees, understanding what keeps them stimulated and trying to keep that as the core part of our culture.

Jeff: We give out Core Value Awards in four areas that represent our culture: respect, client satisfaction, focus, and results. Respect is a huge one for us. We don’t want to be an elitist firm that values only one type of skill set. We’re also very focused on clients. We don’t have office heads or hierarchy outside of client relationships to help keep the client at the center of our structure. Of course we want to remain focused on solving specific problems for clients. And finally, results – this is not just external results for clients but also results internally: are projects profitable, successful, etc. We’ve been giving the awards for a long time, and we find it helps set a tone for how people act in the organization because they know what we value.

See the entire post on Vidya Drego’s blog.

Read the full story here.