Have You Gone Responsive or Adaptive Yet?

By:
April 11th, 2014

responsive

As a senior developer for Extractable, I’ve been involved in many assignments that have to do with our clients wanting to “go mobile.” And you may be shocked to know that many businesses have yet to have a mobile site or even a mobile presence of some sort. Late last year I remember reading an article stating that if you don’t have a responsive site by 2014, (or are planning to do so in the near future), you’re going out of business. Now that’s a pretty bold statement, but one that is not that far off.

The fact of the matter is that mobile usage is increasing on a daily basis, in fact, mobile internet usage is projected to overtake desktop internet usage by 2014. (Source: Microsoft Tag). Consumers use their mobile devices to check email, get quick info about a company, search for products or services or just to do browsing as they do with their laptops. If these consumers don’t find your site to be mobile friendly, stats show they will immediately “jump ship” and move on to your competitor’s site whose site may be much easier to use.

So how can you meet the needs of this mobile user? By creating a mobile experience that works best for your content. There are two ways this can be done: Develop a Responsive site or develop an Adaptive Site. 

You may have heard these terms written in many articles and blog posts with the direction that one method is better than the other. I believe it’s a case-by-case decision. What may work for one website may not work for another.

Below is a brief description of each along with pros/cons.

Responsive Website

A responsive website automatically changes to fit the device you’re reading it on. A key difference between Responsive and Adaptive is that Responsive design is client-side which means the page is sent to the device browser (the client), and the browser then modifies the way the page looks in relation to the size of the browser window. The website initially serves the same content to every device but the layout will change depending on device size. This may result in content that is removed or a layout that looks rearranged in order to better fit the screen size at hand.

Advantages:

  • Single Website (one URL)
  • Adjusts to screen size on page load
  • Only one place to make changes

Disadvantages:

  • All content is downloaded whether it’s used or not
  • Pages will load much slower because of #1
  • You can typically triple the time it takes to build the website due to the complexity of accounting for all screen sizes

Adaptive Website

In Adaptive design, we develop a redefined set of layout sizes based on device screen size, then what served is “adapted” to the detected device. The web server detects the user’s device and will load the appropriate version of the site that is optimized for that particular device. This is a “server-side” approach because the server determines which version of the site to send to the user.

Advantages:

  • Single website (one URL)
  • Faster loading as it only receives content specific for that device
  • Can have completely different content for each device

Disadvantages:

  • Completely different sites
  • In most cases it will require more maintenance

In comparison, the visible difference is that responsive design will  alter its layout while you resize your browser window while the adaptive design will load a specific layout for the device you’re viewing the site on. If you resize your window with an adaptive website it will jump to a different breakpoint when you reach a screen size that suits another predefined layout.

Adaptive or Responsive – What’s The Right Choice? 

As mentioned previously, the decision to make a responsive or adaptive site should be a decision that is made case-by-case. Responsive websites generally work well for content-heavy websites with not a lot of difference in what the user should be experiencing between mobile desktop.

An Adaptive website is the winner most cases where user intent on mobile differs significantly, and website performance becomes a crucial factor. While both responsive design and adaptive both have their advantages it’s best to determine which one is right for you by putting your customer’s needs as the primary concern – (all while keeping in mind your own business goals.)

One more important note – As a developer that has seen countless sites… LESS IS MORE. Just because you have a desktop site that is packed with information and interactivity does not mean that all that content and interactivity should be scaled down to the mobile website. Simplicity, ease of use, and getting the necessary content to your user is critical and should be your number one priority. 

The future of the internet is no longer associated with just your desktop or laptop computer. Phones, tablets, game consoles, TVs, watches, glasses, etc., are all being used to browse the web. Is your site ready for these devices? If not, you should get to it!

 

Can Data-Driven Personalization Save Banks?

By:
April 2nd, 2014

Award Winning Digital Agency

An explosion of venture-capital backed startups is rapidly increasing consumers’ expectations for the companies that they do business with. Uber has introduced both transparency and courtesy in the brusque taxi industry. Warby Parker has made it easy to shop for cheap, chic eyeglasses from the comfort of your couch. Nest has eliminated your smoke alarm’s annoying low-battery beeps in the middle of the night.

Each of these startups — plus myriad more that have arrived on the scene over the past several years — solves a real-life problem, and does so in a way that makes it extremely easy for people to benefit from the solution. In fact, these apps and websites almost feel like personal assistants; they provide services that appear to be extremely tailored to each of us as individuals (even if they’re not).

As we’ve come to expect this new level of personal service from startups, it’s not surprising that our expectations of established companies, including banks and credit unions, are changing too. A recent study from Scratch, a unit of Viacom, showed that 53% of Millennials don’t think their bank offers anything different than other banks — in other words, they’re not getting that sense of personal service they find elsewhere. And one in three respondents said that they’d consider moving to another bank in the next three months.

But probably most damning for today’s big banks is the fact that 73% of Millennials would prefer to get financial services from Google, Amazon, Apple, PayPal, or Square than from their traditional bank — and 33% believe that they won’t even need a bank five years from now.

How will banks survive this impending disruption?

We’ll undoubtedly see some acquisition activity as big banks come to grips with startups like Square and Coin. But banks and credit unions also need to invest in overhauling their existing services and interactions to make them more personalized  — and create that perception of a trusted and necessary personal assistant.

Large financial organizations already sit on a mountain of data about their customers in aggregate and on mini-mountains of personal data, both historical and contextual, about each individual customer. But how many actually use that data to engage with customers on a personal and meaningful level? When someone launches your mobile app, do you show him relevant options based on the time of day, his location, and account balance? When a customer calls your contact center, can the agent see what products she has and her most recent interactions, all in one screen, and then tailor the conversation accordingly? And, perhaps most importantly, are you using your knowledge of customers’ needs and pain points to create new products that are tailored to how they really live their lives? As business visionary Peter Drucker said, “The aim of marketing is to know and understand the customer so well the product or service fits him and sells itself.”

Data-driven personalization can help banks stay relevant to their customers throughout the upcoming decades. Those that fail to leverage big data as a key asset will see tech-based startups usurp their positions as financial leaders.

 

 

 

Unlocking User Research Data to Advance Your Visual Design

By:
March 26th, 2014

 

469837173 (1)

Conducting research on your visual design concepts can be a very useful way of understanding user preferences. However, the data that determines your outcome is only as good as the quality of your testing.

Surprise, Surprise

Recently, we conducted visual design testing for a client for whom we are redesigning a website. We had previously conducted two rounds of research prior to this testing—including general background research and wireframe testing. And as a result, we felt like we had a pretty good grasp of the target audience’s likes and dislikes. So imagine our surprise when the concept we thought would win actually ended up in last place.

Developing Quality User Research for Visual Design

Having your projected first-place winner fall to last place could have been a huge letdown, not to mention very confusing. But because we had developed the testing in such a way as to avoid personal biases such as, “I like blue better” or “I like sunsets but I hate the beach,” we were able to gather focused data about the design and layout. And by knowing what layout works for users, we can extend those design principles across the site in a more detailed way. Here’s how we did it:

A Level Playing Field

To ensure that participants weren’t zeroing in on design because they liked one image over another, we used the same imagery on all four concepts. This forced the participants to evaluate the layout and presentation of the content, not the imagery, which can be all people see sometimes. But because imagery is such an important part of the equation, we had a separate exercise where we presented a series of discrete images, and asked participants to evaluate them in the context of a website similar to the one we were redesigning. Participants told us whether they found the images to be positive, negative or neutral. In this way, we were able to identify a set of images that we could incorporate into the winning design direction.

Exercise 1: Quick Exposure Exercise

In our first exercise we started on a laptop and showed each of the four concepts to each participant for ten seconds. After each quick exposure, we asked the participant what he/she recalled about the concept. This is an excellent way of gaining feedback about first impressions and determining what stands out about a particular layout.

Exercise 2: Design Reaction Exercise

Next, we asked the participant to select three words from a grid of potential words to describe how the design made them feel. Since these feelings are elicited after only 10 seconds of exposure to the design, we’re able to truly capture a gut reaction. (More about the importance that these words played in our outcome later…)

Potential Design Reactions:

Screen Shot 2014-03-25 at 1.50.22 PMExercise 3: Ranking Visual Design Preference

After seeing each of the concepts for a brief period, the participants were asked to view them all as side-by-side printouts on boards. After spending a few minutes looking at the designs, they were then asked to rank them in order of their preference from 1 to 4.

Next, we moved back to the computer, where we asked a series of questions about the participant’s chosen design, including:

  • Why did you make the choice that you did?
  • What are the three things that you like most about the design that you selected?
  • Does seeing the design on the computer change your mind about your choice? If so, why?
  • Does seeing the design on the tablet change your mind about your choice? If so, why?
  • How do you feel about the font size? (If prompting is needed: Is it too small? Too big? Or just right?)

Getting the answers to these questions starts to dig into the designs in a deeper way, providing qualitative data about what works and what doesn’t. It also helps to uncover whether or not device preference affects how the user interacts with and perceives the design.

Exercise 4: Design Reaction Exercise, Part Deux

Remember that grid of words we used in Exercise 2? We brought it back and asked the participant to choose three words to describe how their chosen design made them feel now that they’d had more time with it. Of the 20 participants we interviewed, only one circled the same words for their chosen design during both reaction exercises—after the initial quick reaction and when they had spent more time with the design. This speaks to the power of first impressions, whether accurately formed or not.

Gathering Focused Data from User Research

So how did we focus this data to come to a conclusion? First, we took the visual design rankings and assigned a point value as follows:

1st place = 6 points

2nd place = 4 points

3rd place = 2 points

4th place = 0 points

Then we applied the point values to all of the rankings and tallied them up to determine an over all design score (the higher the score, the better.) But as you can see, we had a tie for second place.

user_research_extractable

But not to worry, we have more data to draw on, including all of the words that participants circled in the Design Reaction Exercise. These provide excellent context into the participant’s preference beyond merely ranking the designs.

Further Analysis for the Top Three Scoring Designs:

Screen Shot 2014-03-25 at 8.56.09 PM

The Design Reaction Analysis reiterates the first-place ranking for Concept 2, and provides some additional data to make a determination that gives the edge to Concept 4 over Concept 3. At this point, if the client wanted to move forward with refining two directions, they could feel confident about selecting Concepts 2 and 4. If the user research had been more limited, this decision would not have been as well supported by data.

There’s Always a Place for Data

Just as this example illustrates, there’s always an opportunity for data to help us make better decisions. The trick is having a firm grasp on what you want from data, and asking the right questions of it. At EXTRACTABLE, data is at the core of everything we do, and we’d be happy to help you ask the right questions so you can find the answers you’re seeking.

 

The Mathematics of Great Data-Driven Digital Creative

By:
March 20th, 2014

Delivering great data-driven digital creative is all about finding the right combination of art and science for each client. Brilliant artistry in typical creative crafts like design and copy will always be required. However nowadays, a good amount of mathematics and data must be in the mix too.

Our team here at EXTACTABLE has been utilizing a data-driven approach for years. And we love to share what we’ve learned.

Here are four things we’ve found to help us achieve success during the creative process:

1. Heat Maps Rule: Compliment your next creative brief with pretty pictures that visualize current engagement data.

Award Winning Digital Strategy

Heat Mapping technology records and reports where users move their mouse and click. Before you start the creative process, put this kind of technology in place. The data you will uncover is often fascinating. For example… What is and isn’t important to your target audience will be apparent quickly. You can determine if the majority of users are focused on task completion or if they are coming to browse around. These data inputs provide a great framework to discuss new creative approaches.

2. Live on the Grid:

To accommodate an ever-growing number of devices you have to choose a grid and stick to it.

Choosing a grid is imperative; this is where data and math come into the fold, literally. Website design today is about how to be as compelling (and effective) across all necessary break points (device sizes). To make it work you have to establish your html grid. Look at the data before you start to see the percentage of users screen sizes on desktop and the percent of traffic on mobile and tablet devices. Typically desktop screen sizes are bigger than you expect and mobile traffic is smaller then you figured (but growing quickly).

Data Driven Digital Agency SF

For example the common size for older desktops and current tablets is 1024 x 768 pixels. Let’s assume you are going with a 12-column grid, with 5 pixel gutters here’s what your PSD should look like.

Data Driven Digital UX

For mobile you have to add another factor into the equation: Retina displays. Screens with Retina display double the typical pixel density. Desktop PSDs should be 72ppi. For smartphones can accommodate with a PSD that is double the size. This will ensure your imagery will look great on all devices. Here’s what your grid will look like.

Data Driven Digital Agency San Francisco

3. Banner Blindness:

Don’t assume your marketing messages are being seen on the homepage because they are in the main marquee.

Data Driven Digital Agency SF 1

Our data over the last couple of years has revealed a consistently low engagement rate with home page marketing marques. We’ve found that typically 25% of visitors click on these banners, while over 50% of users click on primary navigation and drop downs which take up much less real-estate. Marketing is important and isn’t going away. How you approach the design of your creative should be a priority. And if the numbers point to a similar trend as above, find ways to move marketing info into contextual places down the page and use that prime homepage space to actually illustrate what the product is and why it’s great.

4. Action Oriented:

Color contrast leads to higher conversions.

San Francisco Digital Agency

And finally when it comes to getting folks to take action, color contrast is king. Eyeballs dart quickly here and there. As you establish new color pallets, make sure the main action triggers, (aka buttons), are big enough to be seen, clicked and touched on smaller devices. Most importantly choose contrasting colors to the page design. We’ve seen dramatically higher click through ratios using this logic. When in doubt, A/B test your colors to find new ways to get better click through ratios.

Implementing these four tips should help you get on your way to producing great data-driven creative. Give it a try and let us know if they help you achieve better results.

 

*ClickTale example provided by Google

 

 

Five Steps Agency Clients Can Take to Ensure the Success of Their Website Redesign Project

By:
March 11th, 2014

award winning digital strategy

 

You’ve just engaged a top-notch digital agency with a team of brilliant strategists, designers and technologists (yes, I’m talking about us!) to redesign your company’s website. You’ve been introduced to your project team, and been assured by your project manager that you’re in capable hands and they will steer your project to a successful launch. So now you can just sit back and let them do their magic, right?

Well, yes, you can. But there are steps you can take to make sure the project is seen as a success within your organization before the website even launches. And there are steps you can take to make sure that the project maintains momentum, rather than stalling out.

Step 1: Invite all of your stakeholders to participate in the project from the beginning.

I refer to this as the “speak now or forever hold your peace” tactic. By inviting the key business, product, marketing and technical stakeholders to contribute requirements, requests, ideas and feedback, you’ll give those stakeholders a voice in the creation of the new website that will ultimately be the digital face of their company. And inviting them from the beginning means that their input is considered early on in the project, where it can be prioritized and planned in the overall strategic, creative and functional approaches to the site redesign. (See Step 5 below for the risk of not taking this approach.)

Everyone may not get everything on their wish list, but with the context of their involvement in the project, they’ll gain an understanding for why their ideas may not fit in or why they may need to be implemented in a future phase.

Step 2: Determine the ultimate decision maker.

It’s great that you’ve invited everyone to the party, but inevitably there will be differences of opinion that need to be resolved. Your organization needs to determine a project owner who is the tiebreaker in any situation where there are conflicting viewpoints. Ideally this individual is someone skilled at gaining buy-in and consensus from across your lines of business, but ultimately this person just needs to be able to make the tough calls and stick with them so that the project can keep moving forward.

Step 3: Get meetings on reviewers’ calendars as early as possible.

This may seem like a small thing, but it can turn into a big issue. This is also an adjunct to the “speak now or forever hold your peace” approach. If stakeholders aren’t able to attend presentations and offer their feedback on deliverables, it’ll be tough to get that consensus and buy-in when changes are (or aren’t) made to deliverables without their input.

In addition, if you’re trying to schedule these meetings at the last minute and can’t make it happen on the scheduled date, your overall launch schedule could end up getting pushed out just because it took an extra week to get a review meeting on the books with your stakeholders.

Step 4: Be precise in your feedback, but present the problem rather than the solution.

I can’t count the number of times my teams have gotten non-actionable feedback along the lines of “The homepage needs more pizzazz” or “I hate that font.” But almost as bad is highly prescriptive feedback without any information about where the change request came from. Some examples I’ve seen are things like “Change all of the link colors to light blue” (even though a light blue font would be illegible against the white background) or “We need “X” menu item in the top nav” (even though the analytics show that nobody ever clicks on the “X” menu).

You’ve hired a digital agency because they bring experience and expertise to the table that you don’t have (or don’t have capacity for) in-house. If you can present us with a problem, we can come back to you with a workable solution, and it may be one you’d never have come up with on your own. For example, if the feedback was “Light blue is one of our new brand colors and we need it to be emphasized more on our new website,” we might respond with a creative approach that includes a light blue rollover state for your menus, light blue action buttons, etc. And if we’d gotten feedback that said, “We can’t lose the content in the “X” section of our website,” we can work to find an appropriate home for that content in the new menu structure.

Step 5: Be prepared for the cost of changing your mind.

The farther along you are in your website redesign project, the more complex and time-consuming a change in direction can be. If you tell us in the first or second round of wireframe reviews that you really don’t like having all of your site links within three big mega-menus and you would prefer a wider, shallower navigation scheme with eight or nine top-level menu items, it may take us a day to make those changes. If you give us the same feedback after we’ve completed the wireframes for your mobile and desktop sites, completed all of the design comps for your pages, and are implementing the designs in your new content management system, it’s likely to take several days, if not weeks, to unwind the work that’s been completed and apply the change to the site.

If you bring a new stakeholder into the mix when we’re well along in the project, you’re introducing the same risk, with new input that may deviate from the established direction, and decisions that were final being “un-made.” The answer to the requested change is never going to be “No,” but it is going to be “Yes, and this is what it will cost…” in terms of budget, timeline and/or other features that may need to be sacrificed.

I’d be happy to discuss the many ways that Extractable’s project management team can partner with you to ensure the successful delivery of your digital initiatives!

Christine Meginness, Vice President of Project Management, cmeginness@extractable.com

 

2014 – The Year of Integrated Personalization

By:
February 27th, 2014

Data-Driven Design

Organizations such as Amazon have shown us all that implementing personalization correctly, while complex, shows superior conversions and superior ROI. Last year we saw several important organizations start to position themselves for better personalization.

Here are some of our favorite personalization implementations and announcements from 2013.

  • Leading CMS providers such as Sitecore and Adobe introduce amazing new out of the box personalization features.
  • Netflix added awesome new personalization tools to its streaming service.
  • Google acquired data learning organization DeepMind to better understand complex user behaviors.
  • iTunes launched new personalization recommendations features across movies, shows, songs, and books.
  • Forward thinking organizations like Klipboard and Pandora continued to improve the personalization algorithms (and added new users as a result.)
  • Google started to marry its Ad Network demographic data with Google Analytics. While this doesn’t necessary drive personalization yet, this has massive potential.
  • My favorite personalization announcement was in August when Marissa Mayer proclaimed in an interview that Yahoo is “really a personalization company.”

If 2013 was the year of BIG data, then 2014 will be the year of how we use that data and in turn, utilize superior personalization algorithms. Most organizations now have access to new data sources and new tools to implement personalization features.

Below is a partial list of personalization types that we expect to see grow quickly in 2014. 

Enterprise Personalization:  Over the last decade, personalization has been mostly department specific (and even siloed within departments). Digital marketing had their personalized websites.  Demand generation had their personalized emails. The personalization algorithms were never connected. Lead nurturing platforms and advanced email platforms have started to enable marketers to have integrated personalization that spanned 2-3 channels. In 2014 and moving forward we can expect to start seeing enterprise based personalization strategies that begin with a core data platform (i.e. CRM) and then spread to all relevant departments (i.e. call center, event marketing, in store, email, social, sales, etc.).

CRM Based Personalization:  Most digital personalization to date has siloed. Moving forward we will always be looking to drive personalization across multiple back end systems. Coordinating CRM data with web analytics data, mobile application data, and other digital intelligence allows the website to offer personalized content as well as empowering sales teams to personalize discussions offline.

Call Center Based Personalization:  Over the last several years several organizations have shown that many prospects and customers seeking support will utilize both the digital channel and phone support. Both of these support mechanism house unique data on customer support behaviors and needs. Integrating the two provides benefits for both channels to decrease the amount of time in between a customer request and a customer solution.

Ad Network Demographics and Remarketing Data, Integrated with Web Analytics:  As mentioned before, Google started to marry the data of their Ad Network with Google Analytics. This data, with the addition of click through data from remarketing efforts, offers a treasure trove of data. Combining this data provides great opportunity for delivering highly personalized content, imagery, and navigation.

Behavioral Based Personalization:  Very few organizations have successful implemented behavioral based personalization yet. It is one of the most complex personalization algorithms and possibly the type with the most false positives. This is partially because users change their behaviors rapidly. For example, when I am looking for a good documentary to download I am a hunter often looking for a specific title, but when I am looking at Sci-Fi movies I am a browser trying to find something new. This type of personalization will start to be more prevalent in 2014 (and 2015) because organizations are starting to have better tools for tracking, identifying, and exposing behavioral data.   Companies such as Sitecore and Marketo are starting to identify multiple behaviors for each user, then exposing that information to personalization engines.

IP Address:  Advanced web teams have been doing IP based personalization for almost 2 decades. But the available data for IP based algorithms is starting to get really cool. Organizations such as Demandbase, Acxiom, and Maxmind are using IP addresses to provide websites with awesome information about visitors such as their forecasted weather, their currency, the affluence of the neighborhood they live, the most common illnesses in their area, the number of offices their employer has,  how spread out the offices are,  number of employees, revenues, profits, etc. With this detailed information, both B2B and B2C organizations can drive highly advanced personalization of content, imagery, and site functionality.

Collective Networks:  Ad networks are impressive in their ability to estimate visitor demographics based on the sites a visitor views. These ad networks are getting more accurate everyday with common attributes such as age, gender, and interests. But ad networks usually only share this information with programming for display ads, emails, and landing pages. We are starting to see organizations such as Quantcast provide site owners with glimpses into this data set to drive onsite personalization independent of the ad network.

Mobile Personalization:  Personalization has been very slow to appear in the mobile website world. It’s common in mobile apps, but rare in mobile sites. There is good reason for this. Mobile sites are highly scrutinized for load times and personalization can add a lot of server calls slowing a page load. But more and more users are switching to faster phones on faster networks. With more bandwidth and more processing power comes the ability to put more functionality in pages and personalization functionality often has the highest ROI.

To date many organizations have not yet implemented powerful personalization features due to the lack of data and the relatively high costs associated with these types of features.  But in the last couple of years we have seen more and more organizations providing the necessary data at little to no cost. We’ve also seen platform providers creating developer friendly tools to incorporate this data to drive personalization. The improved business results derived from personalization are well publicized and fairly consistent amongst the organizations that implement it. Within the next year personalization features will move from being the strategy of the technologically elite to the table stacks feature set of leading customer service and leading sales organizations.

 

Affinity Diagrams: Adding Color to Fuzzy Data

By:
February 18th, 2014

At the start of the design process, it can be difficult for designers to conceive design direction from fuzzy data and requirements. The term “fuzzy data” can have multiple meanings to different people and industries, but in the context of UX Design, it is all the known information related to a project that is nebulous and not yet actionable. Here at Extractable, we often conduct user interviews that give us a plethora of notes and insights to help us understand user needs to inform our design. But even after doing all that research, it can be challenging to organize all the collected data in a meaningful way. As a UX Designer on the strategy/UX team, my colleagues and I find that the best way to handle qualitative data early in the process is to make affinity diagrams out of our notes in order to make sense of all the information.

What is an affinity diagram and when is it appropriate to use?

An affinity diagram is a simple but powerful design and product management tool to organize ideas and data. The process starts off with participants jotting down all their notes onto cards or sticky notes (one note on one card) and placing them together on a flat surface. Then after reviewing all the cards, participants would start sorting and grouping related cards together. Once the cards are sorted, participants can start sorting large groupings into smaller subgroups for further analysis. The ultimate goal of this is to group related information so that it is easily understood and larger stories or overarching themes would start to emerge.

Affinity diagrams are typically used in brainstorming sessions where potentially a ton of freeform ideas get generated. They are also frequently used after contextual inquiries or user interviews when you may have hundreds or even thousands of individual notes.

WP_20140206_009

My colleague Meg and I had to identify design issues with a web tool that was not easy to pinpoint. We decided to make an affinity diagram out of our user research notes in order to help us draw more actionable conclusions in proposing a better redesign.

In our case, Meg and I interviewed five users for qualitative feedback on the web tool. After we were done with the interviews, we took over a conference room and put on some music by Ratatat (helps make the process more fun). We pulled out all the key information from our interview notes onto many sticky notes, which were then transferred onto a conference room whiteboard. Then we started grouping similar sticky notes together into larger categories such as user behavior, comments about specific features, usability issues, and so on. This helped us prioritize sketching design improvements for the most commonly mentioned issues in the user interviews. The affinity diagram also helped us see gaps in the current user experience, giving us opportunities to introduce different design solutions that we wouldn’t come up with on our own.

5 Tips for Successful Affinity Diagramming Sessions

  1. Make sure you have plenty of room: A large surface such as a whiteboard would be great, especially when you start reshuffling sticky notes and adding more annotations later on the board.
  2. Get everyone involved: Encourage participants to read their notes aloud as they place it on the surface. The process benefits a lot from cross-functional teams including stakeholders and allows your team to identify potential issues and which could quickly lead to a discussion of methods to address said issues.
  3. Trust the process: The amount of information generated in a session might seem overwhelming, but after absorbing some of that information, you will start to see relationships between notes that could turn into trends.
  4. Be flexible with groupings as they are arbitrary and completely up to you on how to use and interpret the data.
  5. Last but not least – go crazy with the colorful note cards/sticky notes; they make nice murals for conference room walls.

If you ever find yourself at a loss on how to tackle a design problem, making affinity diagrams is a great way to initiate your team on a project. It will help you see gaps and relationships in the data to uncover new design possibilities.

 

Two Digital Marketing Priorities For 2014

By:
February 13th, 2014

Fire alphabet number 2 two

Let’s face it, to be savvy, marketers must push to stay on top of new ideas and new techniques that can be adapted for our own marketing efforts.

As the Director of Marketing for a data-driven digital agency, it’s especially important to keep up with the latest digital trends, technology and know-how to best utilize these practices for the agency’s marketing initiatives. Together with the team here at EXTRACTABLE, we advise and provide expertise to our own clients about implementing marketing strategies using the best methodologies of today and tomorrow. Of course I adhere to the same practices for our own marketing efforts.  It’s a constantly evolving game. As I look ahead, I see a continuation in efforts for this year in terms of how marketers will reach audiences.

With this in mind, there are two marketing imperatives for this year that will involve developing complex strategies to engage audiences.

1. Strategic SEO – New Changes from Google

 It’s time to roll up our sleeves and get serious about SEO. Marketers are going to need to push SEO strategies beyond simple keyword optimization to compete in search. Google has made some recent changes to its relevancy algorithmic and seems to be making changes at a faster rate than before; there are many new components and it will require more strategic planning.

As part of this, we are shifting away from individual keywords to long tail key phrases (and in some cases key sentences), more natural searches and the overall context of content. Also, Google will be paying more attention to what visitors are doing, once they go to your site from a search result.

Because of this, marketers need to move from a search engine-only focus to strategies to a plan that focuses on all digital marketing channel simultaneously. And by doing so, content that is created using strategic SEO tactics that will result in reaching more customers. Kudos to Google for revolutionizing the future of SEO in a strategic way, but heed this warning, this equates to a lot more work for marketers.

To get the full breakdown of the Google changes read the article from Search Engine Watch: 6 Major Google Changes Reveal the Future of SEO.

2. Content Strategy is Now the Top Priority 

It’s no surprise that content development is increasingly becoming a higher priority as companies reap the benefits and understand the inherent value it can deliver — the ability to attract and retain customers.

Content marketing is an ongoing staple of many marketing plans.  In digital marketing, content may be distributed via websites, email campaigns, advertising, newsletters, blogs, social media, videos and more. Most of us are already spending a lot of time making this happen.

We also know that campaigns should not live in a vacuum, but rather be a part of an integrated content strategy that increases target touch points and builds on a story to enhance effectiveness. While traditional content marketing does the job of developing the larger story of an organization with a focus on how to engage and attract an audience, a content strategy deals with the planning aspects of managing the content throughout its lifecycle. As Rachel Lovinger states in Content Strategy: The Philosophy of Data, “Content strategy is to copywriting as information architecture is to design.”

A strong content strategy can also be instrumental in achieving personal success. One study conducted by the Content Marketing Institute reported: “B2B marketers who have a documented content strategy are far more likely to consider themselves effective (66 percent vs. 11 percent).” See the full report from Content Marketing Institute.

If you need help with either of these two important tactics, (or anything else) don’t forget to call us. We’d be happy to help you get it going.

Maybe you’re already implementing a strategic SEO plan? Or you already have a great content strategy plan in place… Please share!

 

 

Beware of the Robots!

By:
February 7th, 2014

How Internet Bots are Clouding Insight from Web Metrics: A Case Study in Screen Size for Responsive Design.

Google_web_crawling_bots

With our strong emphasis on the use of data in the digital experience design process, one of the first things we do when kicking off a new design process is to ask the data a key question: Who, using what devices, are we designing for?

We want to know the devices, browsers and Operating Systems that the current visitors are using so that we can optimize the experience to that mix, and deliver a responsive design that works best at the most common screen resolutions we are seeing (and will be seeing moving forward). Knowing the networks (mobile/fixed) and bandwidth are also helpful to determine the typical/sweet spot experiences a user will have with the new sites and apps we are designing.

We started working with a new client in the B2B technology space a few months back and started digging into their current Google Analytics data from the first day. First we wanted to take a look at the current typical screen sizes to determine if a responsive or adaptive (or hybrid) design was the best approach for them, and to determine which breakpoints were optimal.

Screen resolution settings in Google Analytics

(Screen resolution settings in Google Analytics)

Pulling the screen resolution out of Google Analytics for the last quarter, adding a secondary dimension of Device Category (so we could filter to just desktop, removing tablet and mobile) and then importing into Excel so we could extract and average the Horizontal and Vertical resolutions separately, we ending up with the following ‘average’ screen size:

1,119 x 798 pixels

With an aspect ratio close to 4:3 (4:2.8), this seemed low, compared to others we see, but was within the realms of the possible. However, the average screen size is not that helpful for determining design sizes, as we need to know the full distribution of screen size. Taking the raw horizontal screen resolutions and turning them into a cumulative chart produced this more visual representation of the data.

Screen Resolution 2

The chart basically shows, for each horizontal screen size, what % of users have a screen larger than that size – so 1 pixel has 100% of users with larger screens, etc. It also filters out mobile and tablet for now.

Instantly we can see a problem. 75% of all users seem to be at a screen resolution of 1024×768. And, as we have filtered out tablets, this must mean a lot of people have very small screens. In fact, a cursory glance at the Best Buy website shows that it’s not even possible to buy a computer or monitor with such a low resolution today.

So, we have a bot problem.

Some recent research from Incapsula (report here) showed that more than half of internet traffic is bots – some good (like Google’s search crawlers and monitoring tools) and some nefarious (like scrapers and malware). And both our friendly and less friendly bots tend to report as ‘standard’ agents, i.e., 1024×768 running on Windows and IE.

So, with our known infestation of bots we went back to Google Analytics and worked closely with the client to identify and filter out as many of these bots as possible. The easy ones (like Google) were already filtered. Some more were easy to spot, based on identifiers and IP networks. But for others we had to dig deeper and look at behavior on the site, such as visiting every page, something a real user would rarely, if ever, do!

The filtering had a dramatic effect, as the chart below with total traffic to the site over the last five months shows.

Visits per day 3

Once we had stabilized the data, we could revisit the screen resolution and other key data that would help inform the design. This chart below shows the “before & after” data for the horizontal screen resolution.

Horizontal Resolution 4

This totally transforms the view of the physical set up of our users’ desktop devices.  The data also looks more ‘natural’ with jumps at standard resolutions. The average resolution also moved from 1,119×798 to 1,501×922, a really significant change.

So, now that we were confident that we had killed off most of the bots (victory to the humans!) we could get back to the first question – what screens should we optimize the design to?

Merging the tablet and mobile data back in, and adding the vertical resolution to the horizontal chart we end up with this true picture of the users of the current experience.

Visits 5

Quickly we can see the main device resolutions and the share of users seeing each. The big takeaway for this project was that 65% of the users are seeing the site on a screen larger than 1,200 pixels, and almost 20% were using monitors at the full HD resolution of 1,920.

This changed our design strategy completely.  From maxing the screen resolution at 1,024 we are now focusing to optimize the desktop experience at 1,200, on tablets for resolutions closer to 1,000, and all within an overall responsive framework.

The lessons?

Always validate your web analytics to ensure your data is correct.  Bots are insidious on the web so filter them out. And as the actual desktop users are using big screens optimize for them, not just for tablets and mobile.

 

The Importance in Balancing SEO and Branding Terms on Your Site

By:
January 15th, 2014

SEO flow chart on blackboard

Keeping up with the changes that search engines such as Google make to their search algorithms is no easy feat, but one tip you can run with is the importance of using natural language in your web content.

Pros and Cons of Branding Word Play

Brand strategists are great at defining guidelines for the look, tone, and voice of a brand. Often brand strategists will use words and phrases that hype up the products, solutions, and the organization. However, in doing so, these brand strategists sometimes avoid the most obvious ways to describe a product in an effort to differentiate it from competitors. For example, if every company in an industry is selling “cement” then one company might choose to differentiate itself as a “provider of robust building materials.” Brand strategists will also change the description of an organization and its products to heighten the perceived value of a product and make it seem valuable to a broader set of audiences. For example, in an effort to make a specific bank stand out as superior, a brand strategist might describe the bank’s loan products as “highly competitive personal financing solutions.”

There are positive and negative examples of this sort of word play in the marketing world. A cynic can imagine the carnival barker screaming, “Step right up! See the most mysterious mystical sites to be seen. You’ll be amazed; In this tent is the eighth wonder of the world. Don’t dare to miss this!“ The strategy is understandable. If the carnival barker said, “Come see a bearded woman with a lot of tattoos and a tiny man wearing a dress,” the show would be appealing to a much smaller audience. There are examples of this type of showmanship all over the web.

Attempts To Differentiate May Be Too Alienating

There are two significant problems with hyping a brand in this way in the online world. First, for companies that do not describe the products and organization in the same vocabulary as the customer, SEO targeting becomes very difficult. Second, when prospective customers do get to the website, they may actually be confused as to what the company does, thereby driving abandonment up and driving actual conversion down.

Search phrase data from organizations like Google shows that prospects and customers don’t typically look for products and services using the type of vocabulary that brand strategists use. In fact, the data suggests that prospective customers start with the most common phrases (typically devoid of marketing hype words).

Finding the Middle Ground

So what is a brand strategist to do? Should brand marketers stop using phrases like “ultimate driving machine” because their prospects are Googling “sports cars”?

From a brand perspective, there needs to be a middle ground. Content strategists can push brand strategists to come to a happy compromise, including the vocabulary used by the prospective customers as well as the marketing hype. Make sure the audience knows that you are speaking their language while building value.

From an SEO perspective it can be argued in either direction. Search engines like Google put a lot of weight (and scoring) in the text surrounding referring links. Sites like Visa.com don’t mention the phrase “credit card” with a significant keyphrase density but they rank very well in search results for that competitive phrase. That’s because external sites such as media sites, blogs, Wikipedia, etc. that all link to Visa.com describe it as a site with information about credit cards. This allows Visa.com to use just about any language on its site and still rank very well for important phrases. Sure, this is not common, but if you happen to have this luxury and you have a good handle on the text that external sites use to describe your site, go ahead and speak more liberally.

Lastly, it’s important to remember that search engines typically favor exact matches. If you refuse to use common phrases to describe your products and services, you are likely missing opportunities in search.