Blog

The Rundown on Social Commerce

Lindsay Goldner — Wed, 30 Mar 2011 09:28:22 -0400

Social commerce seems to be all the rage these days. But really, what is social commerce? Today, we're delving into the world of social commerce-- what it involves, how it works, and some of its key players.

The What:
According to Wikipedia, social commerce is a subset of electronic commerce that involves using social media, online media that supports social interaction and user contributions, to assist in the online buying and selling of products and services.

Let's break that down, shall we? First off, social commerce is a kind of e-commerce. That's a given. Next, it uses social media-- that's Twitter, Facebook, and any other method for users to share with other users. Then, it takes advantage of the social properties of social media to increase sales.

The How:
So far, a few kinds of social commerce sub-genres have arisen, that work in different ways. A major player in social commerce is that of group buying, where a certain number of people have to purchase an item or service online in order for them to receive a "sale" price. Another form of social commerce, widely used across e-tailers, is allowing customers to share specific items or even entire wishlists across their social networking channels. Yet another kind of social commerce site is that of the private flash sale site, in which members have to be invited by another member to join, and then receive access to exclusive, limited time offer, sales on designer or luxury items.

The Who:
Groupon is possibly one of the widest-known social commerce sites. Like other group buying sites, Groupon provides its subscribers with deals that require purchase by a certain numbers of members before the deal is "activated." Other group buying sites include BuyWithMe, Tippr, and Living Social.

While e-tailers like Amazon have quick sharing of items and wishlists via email, other sites geared toward a younger crowd, like Modcloth.com, offer users the ability to share particular items with a variety of social media sites, including Facebook, Twitter, Polyvore, and StumbleUpon. This is a great way for online retailers to increase the reach of their products with no extra effort on their end, and to harness the power of user recommendations.

Finally, there are the private flash sale sites, including Gilt Groupe, Haute Look, Rue La La, Ideeli, One King's Lane, and Snappy Tuna, to name just a few of the burgeoning number. For each of these flash sale sites, members must be invited by another member in order to gain access to the exclusive and time-sensitive sales. Once a member, users can share their code to gain access via social media, which again allows the sites to increase their reach with no extra effort or marketing campaigns.

Five Great E-Commerce Landing Pages

Lindsay Goldner — Mon, 07 Feb 2011 11:02:46 -0500

A great e-commerce landing page is attractive, but more importantly, easy to navigate for all users, with a minimum of complicated details and a clear call to action. These five ecommerce stores offer a variety of goods and services, but but each provides their users with a great starting point, ultimately leading to a positive user experience and a higher conversion rate than their competitors.

1. Basecamp

37 Signal’s landing page for their Basecamp product epitomizes a concise yet creative landing page. While this could easily have been a boring, text-based page, Basecamp utilized both text and a large, easily-interpreted graphic and paired it with a call-to-action button that can be found almost immediately.

2. Metricly

Metricly provides a measurement system for Twitter and other social network statistics. While their landing page is more text-centric, it still provides a clear idea of the product: a dashboard for your statistics (as demonstrated by their screenshot graphic), a variety of websites that can be monitored (shown by the icons just above the fold), and a clear call to action.

3. CB2

CB2, a modern furniture store, echoes the store’s products in its landing page design. The landing page is sleek, including minimalist amounts of both text and images, and offers consumers with an easily-navigable roadmap for their time on the site.

4. Blank Label

Blank Label, a local startup offering bespoke men’s fashion, recently performed a majorhaul of their landing page, and it made a huge difference. Their new landing page is now clear, focused, and uncluttered. Product examples are front and center, and the user spends almost no time looking for how to continue with creating their own product.

5. My Fonts

While My Fonts doesn’t sell a physical product, their landing page very clearly highlights their offerings for sale. Their menu only contains three categories, which makes browsing the site simple. Scrolling further down, more popular fonts are featured graphically, accompanied by widely-used tags to help users search for their desired fonts.

Social Networks = Social Commerce?

Lindsay Goldner — Tue, 25 Jan 2011 10:49:15 -0500

We’ve all gotten invitations for Farmville, seen the sponsored ads on Twitter, and marveled at the multi-billion dollar valuations of social networks. But is what’s occurring on social networks truly social commerce? Or is it just an added feature of social networking?

Facebook is possibly the best-known social networking site that has built up a system of social commerce, both on and off-line. From Farmville to Mafia and everything in between, Facebook embraced the rising trend of social commerce in the forms of users purchasing credits to use towards games and various Facebook applications. Facebook credits are even available for purchase now at big box stores like Target! Additionally, in 2010, Facebook rolled out what they called F-commerce. Essentially, F-commerce is a way for businesses to turn their fan pages into actual ecommerce stores. While Facebook doesn’t earn a profit off of these stores themselves, they earn a great deal of revenue from the companies advertising their F-commerce stores through Facebook ads.

YouTube has adopted social commerce in its own way, adding their form of product placement called “Plinking,” or product linking. Plinking allows for videos to link to featured products, and viewers can then click on the “plink” to purchase the products they’re interested in.

On Twitter, there are paid-for Promoted Tweets for companies, pay-per-Tweet advertisements for users, and a growing number of companies like Twitgift.me that allow users to send real-life gifts to their Twitter friends without even knowing their addresses.

2011 looks to be promising in the expansion of social commerce by way of social networking. Do you think you’ll ever make a purchase through Facebook, YouTube, or Twitter?

Better Photography, Better User Experiences

Lindsay — Mon, 08 Nov 2010 10:22:15 -0500

No matter what your e-commerce shop is selling, attractive and professional product photography is a must. We've rounded up some tips on how to display your products to create a better user experience and examples of sites that are doing it right!

1. Product Styling

When websites provide photographs of products styled in different ways, it allows customers to envision how they would use the products in their own lives, rather than just the abstract product on a white background.

(IKEA)

(Williams-Sonoma)

2. Customer Photographs

By using high resolution professional photographs in combination with customer-submitted action photos, these companies not only provide high quality product photos but also positive customer testimony through product-in-action photos.

(ThinkGeek)

(Threadless)

3. Video Demonstrations

There’s really no reason to not to use video! It gives your customers a better idea of color and scale and adds a more personalized element to your product pages.

(Daily Grommet)

4. Image-Focused Pages

Your images should be the primary focus of the product page, not lengthy descriptions and minute details. Use text to support your products, not to overwhelm them.

(ThinkGeek)

(KidRobot)

5. Multiple Product Views

By providing multiple views of each product, you give your customers the confidence that they know exactly what they're getting.

(Apple)

(Zappos)

Creating Your E-commerce Shop

Fri, 05 Nov 2010 14:06:11 -0400

With the holidays just around the corner, what better time to set up your e-commerce shop to be prepared for the holiday rush? We've written a step-by-step tutorial for you on how to get your shop up and running in no time.

From your Webiva dashboard, click on the yellow Options tab and click the Modules icon.
Select “activate” next to the Shop option and wait for the module to initialize.
Select your shop currency, shipping template, and whether you want your product category to appear in the URL on the options page that appears; click Update.
Click on the teal Website tab to go to your site structure page, and click on the blue Wizards button.
From the Wizards list, select the option that says “Add an E-commerce Shop to your Site.”
Select the options you’d like from the Wizard options page, such as where you’ll add your shop to the site.
Click the blue Add to Site button, which will return you to the site tree.
Now, go to the orange Content tab and click on the Shop link. This will take you to a screen where you can view current orders, and click on the sidebar links to make changes to parts of your shop like product catalogs.
To add products to your site, click the Product Catalog link in the left sidebar, and then click the blue Add New Product button.
Fill in the product information, attach your product image, and then click Create Product. You can also modify more details, such as adding additional media (like more photos or a video) in the bottom pane. Again, click Create Product when you’re finished.
Repeat the last two steps for all of the products you’d like to add to your e-commerce site.
To edit your product classes (categories), click on the Edit Product Classes from the Catalog page. Then, you can add classes such as “Women’s” and “Men’s” or “Mac” and “PC.”
From your main Shop page, you can also create and manage coupons/promotional campaigns and manage your categories as well.

As always, if you have any questions, you can reach us at info@webiva.com!

Pre-Launch Checklist

Lindsay — Thu, 04 Nov 2010 09:11:17 -0400

So you’ve designed your website, followed our chop tutorial to put it into Webiva, and you’re ready to launch. Before you pass “Go” and collect $200, though, here are a few pre-launch tips to make sure your website is in tip-top working order.

Our top 4 must-do's are:

Install analytics code- failing to do this will leave you without any analytics if you have an initial surge before you install the code
Search your site for "Lorem" and "Ipsum"- leaving dummy text in your copy shows a lack of attention to detail, and confuses visitors
Final cross-browser testing- make sure your site renders correctly in Firefox, Chrome, Safari, and Internet Explorer

Check all of your details (contact numbers, email addresses, etc.) - if you have errors in these, you're acting as your own worst enemy!

The rest of our pre-launch action items include:

Create and upload a favicon
Create 404 & 500 pages
Write and display your privacy policy
Spellcheck your copy!
Fill in your Meta descriptions for each page
Include ALT tags for all images
Create and upload an XML sitemap
Check to make sure all of your links work

Microdata Adds Major Information

Lindsay — Mon, 01 Nov 2010 11:50:35 -0400

Now that HTML5 has introduced over 100 elements (both semantic and containers) to our programming resources, programming vocabularies have become wider and more varied than ever before. Despite all the new elements, at first glance there seems to be an apparent lack of elements available to describe actual people, places and things. Rather than create new elements for specific objects (such as addresses or organizations), HTML5 encourages the use of something called Microdata to annotate your existing HTML markup.

According to the Mark Pilgrim's Dive into HTML5 e-book, “Microdata annotates the DOM with scoped name/value pairs from custom vocabularies.” In essence, the use of Microdata allows annotation of your HTML in a way that creates additional information attached to your elements.

Instances you might want to add microdata to include:

1. Identifying parts of an address to be more apparent to search engines (useful for location-based services or brick-and-mortar stores)
2. Providing information about a person, such as in an “About Me” page
3. Grouping information about an organization, including address, contact information, etc., in a way that connects each piece of information specifically back to the organization.
4. Annotating an event information page to include geolocation, links, pictures, date and time, etc.

For example, say that we at Webiva wanted to expand our company information that appears in search results. By using microdata, we can tell Google to notice details like our address, region, telephone numbers. Here's an example markup we could use on Webiva.com:

<article itemscope itemtype="http://data-vocabulary.org/Organization">
   P. <span itemprop="tel">617.398.0513</span>
   <a itemprop="url" href='http://www.webiva.com'><span itemprop="name">Webiva</span></a>
   <div itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
         <span itemprop="street-address">56 Roland Street</span>, Suite 309<br/>
         <span itemprop="locality">Boston</span> <span itemprop="region">MA</span> <span itemprop="postal-code">02129</span><br/>
   </div>
</article>

From the front end of the site - this information will just show up as a name, link and address (check out the bottom of our website), but because we've added additional information to the HTML via `itemtype`, `itemscope` and `itemprop` attributes, we've given this information additional semantic meaning

What’s the point of adding all this extra information to your HTML if no one will ever see it? Well, the fact of the matter is that search engines will see it. You can use Google's Rich Snippets Testing Tool to see what extra data Google will glean from your site. While Google currently only displays additional data in search results for reviews and social networking sites, it does crawl it and index it (See what Webiva.com looks like.) By including microdata attached to, in essence, your code identifying people, places, and things, you give search engines more-- and more specific-- information from which to provide rich search results to their users.

For explanations on how to use microdata, take a look at Google’s webmaster central guide or Mark Pilgrim’s Dive into HTML5.

Webiva for Bloggers

Lindsay — Fri, 29 Oct 2010 11:58:31 -0400

I’ve been blogging, on and off, for about 10 years now. It all began back in the early paid-account days of LiveJournal, then on to Myspace blogs (what was I thinking?), then back to LiveJournal before a short stint on Blogger, an even shorter stint on Tumblr, and then my most recent landing place, Wordpress.

Wordpress never felt like “home” to me, though. I’d still admire other sites where people had created landing pages, linked to their portfolios, and even sold handmade goodies on the same site as their blog. While Wordpress allows you to do most of that, my limited programming knowledge certainly did not. Sure, I could easily update a post, but I hated the way the backend looked so I didn’t want to spend any more time necessary struggling with code to add more functionality. The proverbial straw that broke the camel’s back for my experience with Wordpress, though, was the lack of free -- and attractive-- themes that didn’t feel like cookie cutter templates.

And then, Webiva came into my life (cue dramatic lighting and chorus of angels). I had my doubts at first: not about its functionality, but about whether or not I would be able to figure out out. Those doubts were assuaged one Friday evening, though, when I was tasked with making changes to our website. Yes, our company website. That’s a big deal for someone like me, who not only has no programming chops, but also has a huge (and somewhat irrational) fear of “breaking” the site. I hesitantly changed some text before realizing that I needed to actually add a new content paragraph to the page. Taking a deep breath, a selected the paragraph, added it to the main content section and... voila! It worked!

It took me a minute to realize that I had successfully altered the website without rendering it totally unusable for the next 5 days, but once I came to that realization, it was like I’d had an epiphany. For once, I could --and did-- successfully change and update a website! Exploring the system some more, I discovered that not only could I easily update pages, create new landing pages, and add content, but that I could also use the substantial analytics tab to track incoming and outgoing traffic, optimize my site for search engines, implement my own storefront (if I decided to sell my crafty wares), and even more importantly, create and customize my own pixel-perfect themes.

Using Webiva is truly a boon for any blogger with the desire to control their blog themselves. Want to add a new header image? No problem. Time to change your TypeKit font and track your traffic? Done and Done. And updating your blog? It's as easy as it gets.

This blogger? Converted.

For examples of Webiva-made blogs, check out Cykod or my (in progress) blog, BirdsiViews!

The Mini Scoop on Metadata

Lindsay — Wed, 27 Oct 2010 12:05:23 -0400

According to Wikipedia, metadata is “loosely defined as data about data.” So why, you might ask, is metadata important in the world of websites? Websites use meta descriptions and meta keyword tags, found in the <head> of the site’s HTML, to describe or summarize their content. More specifically, meta descriptions are brief and concise summaries of a site’s content, while meta keyword tags provide a list of the site’s keywords. These bits of meta information are then picked up by search engines and used to index your site accordingly.

Currently, none of the major search engines support meta keyword tags any longer. You can thank spammers in the 90’s for this, who abused the algorithms valuing keywords by stuffing their keyword tags to the brim with related-- and also totally unrelated-- keywords for the sake of their search engine rankings.

In the case of meta descriptions, they are the first item shown below the hyperlink to your site in search results, if your description contains some of the keywords someone searched for. There is no limit to how long meta descriptions can be, but Google only displays about 150-200 characters, so that’s a good number to keep in mind. While search engines won’t always display your specified meta description, you can increase the odds of them doing so by including some of the key terms you hope will lead people to your site. Although they don't improve your search result rankings, meta descriptions, when written correctly, can help persuade searchers to click through to your site. It’s also important to write unique meta descriptions for each of your pages. Visitors to your site won’t always come straight through your home page, and because each of your pages is unique (we hope), you should provide unique meta descriptions for each page to bring in additional viewers.

A quick example of "good" meta tag descriptions versus "bad" meta tag descriptions can be seen in our search for "Boston baseball camp" below:

This screenshot of our Google search displays the first result with a coherent and informative description, which will entice searchers to click through. The second result, however, simply pulled related content from the website, rather than displaying an intentionally specific and keyword-driven description tag.

As with any SEO technique, crafting your meta tags and meta descriptions aren’t magic bullets to get your site showing up at the top of Google’s search results. The best suggestion? Add this information to your arsenal of SEO techniques, and keep creating great content!

Why Content Should Lead Design

Lindsay — Mon, 25 Oct 2010 11:00:00 -0400

You’ve seen it happen (or, if you’re particularly unlucky, it’s happened to you): a client goes to a designer/developer and says I want my site to look like X, Y, and Z, with these pictures, these colors, and these fonts. Fast forward a few weeks later, and the client receives their pretty coded website.... except it’s filled with a bunch of strange-looking Latin mumbo-jumbo.

You see where this is headed, don’t you?

The client is (hopefully) satisfied with the design and knows that all they need to do is add in their own content. With this best-case scenario, however, the issue comes once the client adds in their painstakingly-written copy, expecting the website to look the same as it did filled with lorem ipsum... prepare to be disappointed.

The problem with designing without any notion of content is that more often than not, even the roughest version of a site’s copy would give the client a better idea of what their site will actually look like. If the designer has no idea of the length/scope of said content, they’re stuck picking an arbitrary chunk of lorem ipsum text which may or may not be anywhere close to the length of the actual content. Ultimately, this disconnect can result in some major design issues if the client tries to add, say, 50 rows of text in a box designed for 15.

This isn’t to say that lorem ipsum is evil. There’s a reason it’s stuck around for so long. However, including actual copy —no matter how rough it may be— can help to streamline the process, from designer to client, and prevents that moment of content replacement “sticker shock” for the clients.