Get in Touch

How can we help?

Whether you are looking to redesign your site or simply refresh your brand, we are here to help!

Prefer to send us an email? hello@imarc.net

The Effectiveness of the Carousel

Posted by Sean Beck on August 23, 2013. Tagged: best practices, strategy, user experience

Most of us are familiar with the carousel, even if we don't know it by name. You may know it as a slideshow or a marquee, but they all have the same functionality. It's generally the first thing a user sees when visiting a site - a big block of rotating content that lies at the top of the homepage. The goal is to show users as much content as possible, while giving them a call to action.

Carousel Examples

These are just a few examples of carousels that iMarc has built for clients. We often include them in sites as they are a common request. But just how effective are these carousels at providing meaningful content and giving a call to action that the users actually take?

Why do we use carousels?

The use of carousels is derived from a need to give multiple pieces of content a center stage on the homepage. Many clients believe it is important to have the most important content lie "above the fold." Generally, this is driven by a need to satisfy multiple departments within a company wanting their content front and center.

From a developer's point of view they are easy to implement due to the abundance of ready-built plug-ins. The combination of ease-of-implementation and the demand from clients makes carousels a very popular tool in the web development industry.

What does the data tell us about carousels?

Unfortunately, most carousels have proven to be less than effective at engaging users. Erik Runyon has some great data reflecting this conclusion.

  • User engagement with the carousel ranged from 1.07%–9.409%. The high end of the range was an outlier, with the majority of the carousel engagement being in 1–2% range.
  • Within that 1–9% range, the first slide in the carousel was clicked 54.57%–89.1%.  Subsequent slides had engagement as low as 2.4%. This mean that slides were engaged by as low as .02568% of users. You can see why this could be a problem.
  • On the bright side, it seems randomizing the order of the slides helps with engagement. If the first slide is different everytime a user lands on the page, then the engagement should be spread out equally across all slides.
  • Using a carousel that automatically switches between slides raises engagement. The site that used an autoplaying carousel had the highest engagement, at 9.409%. It also had the highest engagement for subsequent slides, which ranged from 7.97%–17.87%.  Both of these figures are significant deviations from the other sites tested.

What about iMarc specific data?

Recently, iMarc conducted user testing for the a client's website. After providing the users with a series of tasks to complete, we asked them if they could recall what the three slides on the homepage carousel were about. Zero of the testers were able to list back all three correctly, and the majority were only able to recall the first slide. Further, we found the less content that was on a carousel slide, the better. This is especially important if the carousel auto-scrolls – users must be able to quickly scan the content before the slide transition occurs.

What should we take away from this data?

Before I wrote this post, I was ready to throw out the idea of carousels all together. Having looked at the data, I still believe they are not very effective at engaging users. However, if you must use a carousel there are several paths to improvement.

  • Randomize the order of the slides for every user when they land on the page. This prevents the first slide from being the only content the user engages with.
  • Turn on autoscrolling. Many users have difficulty finding or using the navigation controls for carousels. This prevents them from ever seeing anything but the first slide.
  • Continually refresh the content in your carousel. Often times the carousel is used in a prime spot for promoting new material. If content is left to linger, it can become stale, wasting real estate that could be used more effectively.

Lastly, I'd like to point to Dave Tuft's post on "above the fold" which is a good complement to this post. The use of carousels and the emphasis on above the fold content for webpages are two common points of contention. It may be time to rethink both.

Conditional Widths Using the Adjacent Sibling Selector

Posted by Marcel Moreau on August 21, 2013. Tagged: best practices, engineering

All of the websites iMarc builds have administrative areas where clients can control their web content. One common content type clients like to control is photo galleries. When creating a photo gallery in iMarc’s CMS, a site adminsitrator has the ability choose what sections of the website to display it in. We typically output these into an aside. For example, a client creates a photo gallery of their staff’s annual outing. They would like to show this not only in their About section, but also their Community section because many local colleagues attended.

For a front-end developer, this unknown can be problematic. How can we ensure that our layout will handle one or two columns properly?

Layouts

Adjacent Sibling CSS Selector

I’ve found that using a CSS adjacent sibling selector handles this essentially as a conditional statement:

aside.primary + .main { margin-right: 220px; }

Is there a div.main following an aside.primary? If so, then give div.main a right margin to push it away from the aside. If there is no aside, then div.main will fill its parent with 100% width, as block level elements do.

This allows more flexibility for our main column. We do not need to set hard widths in our CSS based on section.

Browser support for the adjacent sibling selector is IE8+.

Here’s a demo via this fiddle.

Kill Two Birds With One Phone

Posted by Kevin Hamer on August 14, 2013. Tagged: mobile, technology

I drifted around the office and did a quick survey of what sorts of mobile computing devices people use in the office.

  • Everyone in the office has a smart phone. There were a few hold outs, but now everyone's running iOS, Android (or WebOS.)
  • 60% of us have tablets. Even more amusingly, aside from one person in the office, everyone with a tablet also has a laptop.
  • 90% of us have laptops. Whether an iMarc provided laptop or not, nearly everyone in the company has at least one laptop.

With smart phones only really becoming common place over the last five to six years and tablets (just counting web-capable devices with touch displays) really only showing up significantly in the last three to four, both have become staples of our culture and business. While laptops aren't new, even over the past two and half years we had at least four people convert from desktops at work to laptops.

The Ubuntu Edge campaign really got me thinking about device convergence. My phone is already my media player and my GPS, but we might not be that far away from it taking on even more roles.

Attempts at Convergence

The Ubuntu Edge is hardly the only device trying combine phones, tablets, and PCs together. Here's some current examples of how companies are trying to make devices that function in more than one role.

Devices Covering Multiple Roles

device overlap

Making Phones Bigger (Samsung, Sony, and HTC)

While this certainly isn't limited to these three companies, these three stand out. HTC is up to 5.5", Samsung is up to 6.3", and Sony just came out with a 6.4" screen device. With small tablets really focused around 7–8", the gap is practically nonexistent.

Keyboard Optional (Microsoft and Lenovo)

While again, not limited to these two companies, both Lenovo (Thinkpad Helix) and Microsoft (Surface) have devices which have removable keyboards, to either convert a laptop to a tablet or a tablet to a laptop.

Putting a Phone in a Tablet (ASUS Padfone)

This isn't a new product, but its certainly a rarity to see in the wild. The ASUS Padfone Infinity for example, came out this year as a phone with a "tablet dock" to provide a bigger screen when you want it. The Padfone is Android 4.x based.

A Phone With a Laptop Dock (Motorola Atrix)

The Motorola Atrix also hasn't really taken off, however the "laptop dock" for the phone makes it a fairly unique phone-laptop hybrid.

Phone with a Desktop OS and Specs (Ubuntu Edge)

The Ubuntu Edge is trying to make a big jump forward in device convergence by getting people to literally buy into the idea of a phone that they can connect to a keyboard, mouse, and monitor to use as a desktop.

Arizona Society of CPAs Goes Mobile!

Posted by Katie Desmond on August 7, 2013. Tagged: clients, design, mobile, user experience

We are thrilled to announce that we have just launched the new mobile site for the Arizona Society of CPAs (ASCPA)! We began working with ASCPA in 2010 when we designed and developed their full website, which is mobile compatible. However, over the course of that time their mobile traffic tripled. Being the forward thinking innovators that they are, ASCPA was very interested in making sure it was providing the best user experience to its members on-the-go.

ASCPA Mobile

In order to best serve their mobile audience, we took a step back and first determined what kind of mobile presence ASCPA needed. There are a few different approaches that we could take to deliver the best results, including:

  1. We can design and develop the site using responsive design techniques which allow the full site to be displayed and optimized whether a user accesses the site from a smartphone, tablet, or the desktop.
  2. We could design a mobile specific site which provides streamlined content to users based upon what information they are accessing from a mobile device.

For the ASCPA site we took a hard look at the Society’s Google Analytics and recommended a mobile specific approach. The ASCPA site is extremely robust but we found that most mobile users were looking for job listings (29% from 1/1/12-12/20/12) and course information (30% from 1/1/12-12/20/12) from their phone. Therefore providing streamlined content to users with links to the full site to access more information was our recommended approach.

The robust mobile site features course information allowing users to browse upcoming courses, browse categories, or search by start date and keyword. The job posting section enables users to scan job opportunities by title and date posted, and view the selected job description including links to the company’s website and information about how to apply. Knowing that users on the go often are looking for directions and contact information the new site also features a link to Google Maps and the Society’s address and office hours.

It was a great project and we can’t wait to start tracking the results!

Calm before the storm

Posted by Robert Mohns on July 31, 2013. Tagged: culture

This week is Yankee Homecoming, a week and a half long summer festival in Newburyport. Fried dough, live bands, craft shows, kids activities, a Michael Jackson impersonator, tarot readings, ice cream, and people everywhere… The cacophony can be deafening. (I'm pretty sure it was a major factor in Nils leading the charge to open our Silicon Valley office.)

As I walked to the office this morning, I was struck by how peaceful it is then, as the vendors were just opening up their tents in market square and getting ready for a long day.

Yankee Homecoming, Market Square, Newburyport, MA 01950

Bonus photos

Later in the day, I noticed the Michael Jackson impersonator outside my office window:

Michael Jackson impersonator at Newburyport Yankee Homecoming 2013

Obligatory cute kid photo:

Walking into Market Square

Leaked Culture Reel Photos

Posted by Jared Laham on July 26, 2013. Tagged: creative, culture

imarc_reel

We have just wrapped on a video shoot here around iMarc East's office and thought, since celebrities leak photos of themselves, we could give you all a peak at some behind the camera shots. We had a blast working with Off The Front Productions on this video and can't wait to share it with you all soon. Stay tuned!

jeff_interview

jared_makeup

Some of us obviously had more beautifucation needs than others and were good sports about getting makeup applied for their cameo. Yes that beard is real, I swear.

filming_outside

When we were out filming on Inn street, some pedestrains passing by asked if we were filming an episode of cupcake wars (there is a cupcake shop next door to our office) or a new Mark Wahlberg movie. 

Action shots compliments of Tim Gurczak.

 

Building RSAConference.com: Part 4 of 4

Posted by Jeff Turcotte on July 9, 2013. Tagged: clients, engineering, technology

Previously in the Building RSAConference.com series, we showed some of the Strategy, User Testing and Creative phases. In part 4, we will be forging ahead with the a focus on the technology; the tools engineered to ensure a great experience for both visitors and the administrative team of RSAConference.com.

Shell

Very early in the process it was determined that RSAConference.com would best be suited to a Custom CMS on an Open Source Platform. Custom because they had a lot of structured data that was specifically tailored to the management of their events, and open source because they needed a tool with zero lock-in which can be augmented and enhanced easily as needs change from year to year. With this approach, we could also ensure that all components were up to the high security standard that is is critical to the RSA Conference brand.

Since the RSA Conference CMS was built specifically for their problem set, the RSA Conference administrative team can use a workflow tailored to them, as opposed to forcing their workflow into a generic product.

Some highlights of the tools that RSA Conference has at their disposal are:

Pages

Allows the admin to create and edit any page on the site, either through a simple WYSIWYG editor or free-form HTML (if somebody is so inclined). Structured data, such as Upcoming Events or a list of Top Event Sponsors, can be placed within pages, making it dead-simple to incorporate data managed through another tool. This means RSA Conference administrators can make a single update to conference metadata, and have it cascade site-wide throughout all their pages.

Conferences

Admins can manage all Conference meta data including Sessions, Speakers, Sponsors, and many more. As an international conference, they work with a multitude of registration vendors, so this gives them a lot of flexibility moving forward. The registration vendors can focus on the actual registration process, while RSA Conference can maintain control over how attendees and potential attendees explore the conference information, giving a much more consistent user experience and in turn solidifying their brand.

Heroes

The custom CMS gives RSA Conference full control over the homepage hero element (otherwise known as the splash banner), making it a very powerful promotional tool. The RSA Conference team can make the week to week changes that they require without the need to call on a designer or developer. That said, the tool is flexible enough to give a designer plenty of leeway to make a splash if necessary.

Blogs

Blogs are huge part of the new RSAConference site. With a large number of guest bloggers keeping content fresh, we created specific blog author access levels to the CMS, allowing RSA Conference fine grained control over who can post what, when, and where. The administrative area allows RSA Conference to manage drafts and versions, manage guest blogger logins, and review and approve guest blogs.

We also deployed LiveFyre LiveComments to lower the barrier to entry to participate in discussions and share content.

Resources

The RSA Conference team had a lot of content for their audience. A major goal of the site was to make it an up-to-date content repository of session videos, podcasts, and presentations to keep people coming back. We put custom tools in place to manage all of these different kinds of content, link them to their respective conference metadata, and integrate with RSA Conference’s CDN(s) of choice.

Code

Deployment and updates

Our server team took the finished site and deployed it to a multi-server cloud setup to handle the ever-growing traffic requirements. iMarc’s code deployment system gives RSA Conference no-downtime updates.

Post-launch, with the collaboration of the RSA Conference team, we are reviewing analytics, doing performance tweaks, and continually ensuring that RSAConference.com is the product that will work the way they desire and best represent what they do.

See you at RSA Conference!

# # #

Learn more about iMarc’s engineering practices and standards in our Handbook, and explore some of our Open Source projects and tools at github.com/imarc.

Interested in working with the iMarc team? See current opportunities at imarc.net/hiring.

Missed the earlier parts of the series?

  1. Building RSAConference.com: Part 1 of 4: Strategy
  2. Building RSAConference.com: Part 2 of 4: User Testing
  3. Building RSAConference.com: Part 3 of 4: The Creative Process

Building RSAConference.com: Part 3 of 4

Posted by Jared Laham on July 2, 2013. Tagged: clients, creative

In Part 1 of the Building RSAConference.com series, Robert covered the Strategy phase of the project – where discovery, planning and decision making takes place. In Part 2 of the Building RSAConference.com series, Marcel covered user testing – a key element of ensuring a good user experience. Today in Part 3, we'll share our creative process to establishing and designing the new look and feel of RSAConference.com.

RSA Conference's events are dynamic, fun, educational and intensely engaging. They are the go-to events for the security industry. The RSA Conference team wanted to not just improve the overall aesthetics of the site, but for it to exude the same fun and thought leadership that the live conferences offer. It needed to build the same excitement in conference goers leading up to the actual conference.

Design Goals

In our design kickoff, we helped the RSA Conference team identify the key goals the new design should serve:

  • Clean, modern, and engaging look, but also allow each year's confernece theme to express its distinct visual style.
  • Establish a visual style for each conference location, using and extending the existing brand.
  • Support smartphones, tablets and desktops equally, using responsive design to create an accessible resource for attendees and security professionals.

Responsive Design

Being that this is a conference website, it was important attendees could easily access it from their smartphone, tablet or desktop while attending the conference. Every visitor should get as much content, visual, and interactive richness as their browser can support, regardless of what device they happen to use.

We chose a responsive design approach to ensure that all visitors will get a complete experience, regardless of their device — but still optimized for that device, whether it be a desktop, phone or tablet.

rsa_responsive

We designed three fluid layouts (using CSS3 media queries) to ensure a pleasing and consistent experience across phones, mid-size tablets, large tablets and desktops. We paid close attention to text size, line length, download size and proximity of calls-to-action to ensure each layout delivers clear, readable, engaging content that loads quickly.

Interface Design

To establish a baseline of visual likes and dislikes, iMarc's creative team benchmarked various websites with the RSAConference.com team. Next, we created three distinct style tiles exploring different directions in font, color, and user interface elements that evolve RSA Conference's visual brand for the web.

Overview of a style tile's key elements:
rsa_styletile

Local Flavor

Each conference needed its own identity within the site, so the iMarc team created branded cityscapes that used color and key land marks from each conference location to differentiate each conference and ground each page.

rsac_cities

Bring it all together

With style tile providing direction and key visual elements defined, iMarc's creative team (with wireframes in hand) began designing the homepage. We find that starting with the homepage design is a great way to establish most of the major styles that will inform the rest of the pages.

Final design for RSAConference.com homepagersa_homepage

Explore the fruit of these labors at www.rsaconference.com.

# # #

Next week: Part 4: Engineering

So how do we turn all the planing, user testing, and design work into a working site? Next week, find out from our very own A-Team leader Jeff "Hannibal" Turcotte.

Building RSAConference.com: Part 2 of 4

Posted by Marcel Moreau on June 27, 2013. Tagged: clients, strategy, user experience

In Part 1 of the Building RSAConference.com series, Robert covered the Strategy phase of the project – where copious planning and decision making takes place. Here in Part 2, we will forge ahead with a focus on the user experience.

The RSA Conference team was concerned about the experience their users were having while using the website. Content was deeply buried and lacked focus, account management tasks were cumbersome, and the site was not device-agnostic. What steps would we take to get actual users involved in the redesign?

Dave on his laptop between sessions.

Usability Sessions

After collaborating with the RSA Conference team on site maps and wireframes, we needed to take that extra step to ensure the new web experience aligned with what users expected. So iMarc and RSA Conference conducted live usability sessions onsite at RSA Conference 2013 in San Francisco, CA.

Our usability sessions were divided into two activities:

  • Tasked-based analysis via clickable prototype 
  • Card sorting

Tasked-based analysis via clickable prototype

We converted our wireframes from static files to clickable HTML prototypes. Over 30 minutes, we assigned our participants a number of tasks to complete. These tasks related directly to project goals and pain points. Our usability participants all nailed it.

One of the most important elements of a productive usability session is “thinking out loud”. The more we can get the participant to vocalize their thoughts as they try to complete a task, the better. We received plenty of feedback during task-based analysis.

Our testers showed some unexpected behaviors. For example, we discovered that the dropdown navigation menus were heavily used to explore the site (which we expected), but some testers used the homepage “hero” banner’s links as navigation and ignored the menus completely! But overall, the testers found the new layout and menus to be fast and easy to use, and offered positive feedback.

Tip: always record the screen/audio (with permission, of course) if possible. No matter how thorough a notetaker you are, you will miss something. We used Camtasia with Samson Go Mics.

Marcel and Hoyt performing card sorts

Card Sorting

With our audio still recording, we moved to some physical card sorting exercises. Card sorting, as Robert mentioned in Part 1 of this series, yields insight not only in the final layout of the cards, but along the way. Again, our participants nailed this exercise. All vocalized their thought process as they arranged their cards on the table.

This exercise is especially useful for the “color” it gives to the data, especially compared to the surveys conducted earlier. We learn not just what, but why. For example, most of our participants told us they prefer slide presentations because they are quick to read and easy to share. But a few strongly preferred podcasts because they can listen to them during a commute or at the gym.

Laptop on table with cards

Conducting these usability sessions helped us make informed decisions. We made some final tweaks to our site map and wireframe documents that really strengthened them — and in turn, a more focused design and a better user experience.

# # #

Next week: Part 3: The Creative Process

Want to know more about iMarc's UX practices? Check out our Handbook, which documents our processes and deliverables. We've published it under the Creative Commons 2.0 (BY-SA) license, so you are welcome to borrow from it.

Building RSAConference.com: Part 1 of 4

Posted by Robert Mohns on June 18, 2013. Tagged: clients, strategy

RSAConfernece.com on a tablet deviceWe just took the cover off a project that has been under wraps for a while now… a complete re-design of the leading security industry conference's website, rsaconference.com!

In the coming weeks on the iMarc blog, you'll be reading more about how the new site was planned, tested, designed, and built.

 

Before starting part 1 of the 4-part series on building RSAconference.com, I’ll let our project sponsor speak for himself:

“RSA® Conference helps drive the global information security agenda and provides a 360-degree view of the security industry. We selected iMarc as our partner to redesign the RSA Conference site to drive registration, engage users year-round, and better promote our online content. Through great collaboration the team excelled and delivered an exceptional, user-centric and responsive site, optimized for mobile devices.”

—Craig Hansen, Senior Web Technology Manager

So how do you redesign the face of the conference, with dozens of content contributors, outside vendors and service providers, multiple points of technical integration, stringent uptime requirements, and a long-established brand identity that must be adapted into a responsive, mobile-friendly design? And oh, by the way, it's a security site so it will be attacked by hackers…

Craig's team of dedicated pros were instrumental to the project success. A project this big doesn't happen in a vacuum; the RSA Conference team was on-point, on-time, insightful, constructive in every way, and open to anything at all! My hat's off to RSA Conference: they are fantastic collaborators.

Okay, ready? Let's descend into the depths of the project…

Part 1: Strategy

“Strategy without tactics is the slowest route to victory. Tactics without strategy is the noise before defeat.” —Sun Tzu, The Art of War

Before you can solve a problem, you must understand it. So, of course, the first step of any project is learning. Appropriately enough, the 2013 conference theme is Security in Knowledge.

What are the goals?

"If everything is important, then nothing is." ―Patrick Lencioni

To succeed, you must focus your energies on the core things that matter most. This entails making decisions, and saying “no” to some things. This allows you to say “yes” to the ones that matter.

We've found that a very good way to help our clients prioritize their goals is to conduct a card sort exercise. Often used to organize existing content, a closed sort methodology is well suited to organize and prioritize goals and audiences as well. 

The real value is not in the results themselves, but in the process of getting to them. All the client team members gather around a table. A stack of cards, with one goal written on each, is distributed among the team. We ask them to place each card into a priority grouping: Top, High, Medium, Low. To add a bit of discipline, only three can be Top Priority.

And then we stand back. The client team lays out each card, talks about it, and decides where to put it. Occasionally they create a new card, or remove an irrelevant card. As they talk, they create a consensus they can agree on, flush out disagreements, and resolve them. And, as they free associate ideas and chat, we learn countless facts and tidbits that would otherwise be undiscovered. The conversation informs our explorations and decisions as we move forward.

(For the curious: top goals were to improve the user experience, grow year-round engagement, and improve natural SEO. Surfacing RSA Conference's great-but-buried content was a key element for all of these. It's a cliché, but content is king!)

That's just a starting point. Many other activities followed, including…

  • Assessing current site content, usability and technical infrastructure
  • Auditing current content, origination, staffing and publication processes
  • Interviewing internal stakeholders and contributors
  • Conducting competitive benchmarking and audience analysis
  • Creating user personas
  • Conducting a user survey of attendees
  • Analyzing current web traffic
  • Identifying integration points
  • Analyzing current search engine performance

 

 

 

The Discovery Report

Our deliverable at the end of the discovery process is the discovery report: a document which catalogs and summarizes research in a way that is easy to understand. 

Through the rest of the project, it was used as a touchstone to look back on and vet decisions. It's also useful for quickly onboarding members of the development and production team, and new contributors on the client team.

Site maps, wireframes, and specs, oh my!

 

“Now the general who wins a battle makes many calculations in his temple ere the battle is fought. The general who loses a battle makes but few calculations beforehand.” —Sun Tzu, The Art of War

 

Having spent weeks learning, we were prepared to create the documents defining the new site.

There's a lot of iteration. We went through 16 versions of the site map, which describes content and navigation, making changes based on testing it with tools suck as TreeJack and based on our evolving plans for the site. 

Wireframes define key page layouts, content and functions. These required fewer revisions, thanks to extensive and collaborative benchmarking with the RSA Conference team. We identified many best practices and sketched out ideas in meetings before ever opening a drawing app.

Finally, with site maps, wireframes, discovery findings and plenty of conversation under our belt, we could create the Production Specification — the blueprint for the new site.

 

The Production Spec defines every point of integration, every page, every content tool, every user interaction. It sounds like a waterfall process, and at this stage, it is. We'll test it (more on that in Part 2, including our work at the conference itself in San Francisco), and based on that we'll make changes as we do design (coming in Part 3), and during development, the engineers adapt and change the site as needed in a very agile fashion (Part 4). 

In other words, plans change. But plans there must be.

# # #

Next: Part 2: User Experience and Usability Testing

Want to know more about iMarc's strategy process? Check out our Strategy Handbook, which documents our processes and deliverables. We've published it under the Creative Commons 2.0 (BY-SA) license, so you are welcome to borrow from it.

These are not the users you're looking for…
He can go about his business … Move along.