The largest model portfolio site was and is a MySpace software clone called Model Mayhem. It’s not very pretty.

I thought “What could be better than looking at models all day to build an app?” Thus, Folioly, an easy interface for models to upload, organize and share their model photos and create a comp-card style portfolio, was born.

The Business Model

Freemium is a business model that works by offering a game, product or service free of charge while charging a premium for advanced features, functionality, or related products and services.

I decided early on that I was going to build a freemium service. This has been a proven SaaS model—especially in regards to apps where you upload and store a certain amount of data. Photos and portfolios are therefore a perfect fit. Simply allow a limited storage metric for free and then increase it for some monthly fee.

Since in my default template the user would get a nice layout for 5 high resolution images, I decided that offering 4 hi-res photos for free would give the user an opportunity to test the platform and encourage them to upgrade since it would look nicer to complete the page.

The Homepage

There wasn’t much to the homepage. Its only purpose in life is to convert paid visitors, through Facebook ads and Google Adwords, to free sign-up users.

I wanted the call to action to be huge but not stupid, which is why I made it big but kept the color scheme rather than opt for red or an accent color. For the heavy reader or researcher, there’s another small call to action across the middle of the page in the white space.

Other than that, you’re really just trying to convey some quick reasons why one should sign up. Most visitors from paid acquisition spent very little time on the homepage before signing up. People land on your app’s homepage and decide within seconds if they think it’s some fly-by-night bullshit or if it’s a well-crafted web application that they might be interested in.

That’s why UI and UX investments are so important!

The Dashboard

It’s important to let your users know that they have something to do next. By showing icons and outlines for where photos should be it encourages users to upload more. This coupled with the fact that a user has a limited amount of free storage creates a sense that they should upgrade so they can complete the unfinished work.

The dashboard in Folioly used a sortable list powered by jQuery to allow models to arrange their photos.

The blank space items encouraged users to upload new photos to fill out the layout (and thus upgrade to a premium plan).

The dashboard is clean and seeing the photos dragged and dropped into place is very cool. I’m excited to use this UI pattern again soon.

The Conversion to Pro

At any point in our users’ lives they can check the status of their account. I deliberately kept it extremely simple. Two plans, one is limited, one is unlimited. There’s really not much to think about.

The account overview page has one job: sell pro conversions. It’s big, it’s blue, it’s pretty.

Using Amazon S3 for storing model photos meant even high resolution images had a relatively low cost. And how many photos can someone really upload? Offering an unlimited plan didn’t seem like much of a gamble since averaged over the entire user base, the $12 per month more than covered even the most ambitious of uploaders.

The Viral Loop

Sharing was initially handled by a simple custom AddThis integration. Later, it was moved to more integrated Facebook and Twitter API connections.

The key aspect to success with web software products like this is a strong viral loop. The Folioly model worked well for this since models inherently are looking for exposure and therefore genuinely want to share the portfolio they’ve just created with as many people as humanly possible.

At that point, you just need to give them the tools to do so.

For a more technical overview about tracking the viral loop in Folioly, take a look at my article Tracking Goals for Your Web Application with Google Analytics.

Why It Didn’t Work

Folioly got some traction, converted well (Facebook ads worked better than Google Adwords) and had decent retention in the beginning. Ultimately, however, it wasn’t enough of a return to justify spending the time and money marketing the site.

I believe it could have worked if features were continuously rolled out and more attention was given to the relationship and contact building between models and photographers. That’s what a lot of these model portfolio sites are really used for, it seems.

I loved working on it as it taught me about conversion tracking, plotting cost-per-acquisition scenarios and designing viral loops for social apps.

This is especially true when it comes to how much your users are sharing elements of the site with their friends, inviting new potential users and, of course at what percentage they convert to paying customers. That is what we will be covering here.

There are a few popular monetization models used by web applications. For the purposes of this article we will concentrate on the “freemium” model. That is, offer users some limited account type for free with the option of upgrading to a paid version with more features.

The key here is that we want to know what we are tracking and that’s easy with a freemium model:

• Conversions from Visitor to Free User
• Conversions from Free User to Paid User

Of course, you should be tracking much more than just that. In fact, you will be tracking as much as you possibly can but that is outside the scope of this article. Account profile updates, sharing (very important), upgrades to more plans if you offer several tiers, and downgrade are all things that are pretty important in establishing a real outlook for your application and business.

In freemium models, we want to deliver the user to the action they would like to take as quickly as possible. So if there is a sign up process standing between the user and uploading a photo, we want them to sign up real quick and then be dropped on that photo upload screen immediately. That means we’re usually getting rid of the superfluous “thank you” pages that we used to see everywhere and instead using flash messages to notify a user that their action was successful.

One benefit to flash messages is that it creates a built-in infrastructure of excellent event tracking.

A Case Study as a Tutorial

I wanted to track anonymous-to-free and free-to-paid conversions on Folioly, a model portfolio site. However, because users are immediately dumped into their dashboard once they sign up, the address the user lands on after making those conversions is the same URL that users are hitting all day. Therefore, if we don’t want to have a bunch of garbage data in our analytics, we need to track a custom pageview when the user sees a “success” flash message.

In Your App

First I put the default tracking code in. This is the asynchronous version which has a number of benefits which I won’t go into here. It’s important to note though, because the _trackPageview options we’re going to embed later are different from the standard Google Analytics code snippet you get when you create a new account.

Like most people, I put my tracking code in a partial. In this case, _ga.html.haml. That file is shown below with the addition of my new if flash.

Note that we use HAML in our Rails projects so you’ll have to do some editing if you’re a copy & paster.

%script{:type => "text/javascript", :charset => "utf-8"}
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXX-XX']);
  _gaq.push(['_setDomainName', '.folioly.com']);
  _gaq.push(['_trackPageview']);
(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();
 
- if flash[:analytics]
  %script{:type => "text/javascript", :charset => "utf-8"}
= flash[:analytics]

As you can see, we’re throwing in another script if our new flash gets called.

For example, when a user creates an account and sees the flash message “Account successfully created” we also want to insert a new _trackPageview for “/free” (so we can track that as a goal). One caveat is that this will generate two pageviews when the convert happens. I feel that this is negligible considering the overwhelming value this data generates.

Below is what our Free-to-Pro flash message looks like with the [:analytics] code in there.

if sub = user.subscriptions.create()
  flash[:notice] = "Account successfully upgraded."
  flash[:analytics] = "_gaq.push(['_trackPageview', '/pro']);"
else
  flash[:error] = errors_for_flash(sub)
end
else
  flash[:error] = "You've just made a terrible mistake."
end

These two flash messages—”Account successfully created” and “Account successfully upgraded”—are now not only helpful feedback for our users but also extremely helpful to you for goal tracking.

In Google Analytics

We have some new tracking to work with in the form of pageviews to our site. Here’s how it breaks down when you’re looking at our Google Analytics for Folioly:

• Conversions from Visitor to Free User register as pageviews to folioly.com/free
• Conversions from Free User to Paid User register as pagesviews to folioly.com/pro

Now that our data is recorded we can add some goals. We need two goals—one for each of our conversions.

Let’s check out our first goal, Free Conversion.

Note that we track subdomains on Folioly with an Analytics filter (not covered in this article) so that’s why you see /folioly.com in the boxes below. However, for your site you will likely just use /free and /pro.

Just to reiterate what is in the screenshot, we have an Exact Match goal type with the web address /folioly.com/free which is what our Visitor-to-Free flash message pageview is.

In the funnel, we have /folioly.com/register/ set as a required step since in order to sign up for an account on Folioly one must visit the registration form and put in their information. If your sign up process has more steps I would encourage you to put those steps in your funnel so that you’re able to visualize the funnel later.

Utilizing the Data

This is extremely helpful in stamping out problem areas in your sign up or conversion process that might be discouraging users from pulling the trigger.

With this data we can now visualize how our users are converting (hopefully) or not converting on the site. More importantly, if you’re tracking which paid advertising campaign that user came from, you can immediately see what the conversion rate for that particular ad spend is.

If you’re not doing this, you should not be spending money on CPC advertising (or much of any online advertising, really) because you’re basically throwing money into a black hole.

You want to track how valuable that paid traffic is, how long it takes them to convert, how they eventually end up converting, and more.

Is there anyone who is NOT giving presentations on social media these days?

Seriously. It seems like everyone is in the business of telling people how to be in the business of social media. Apparently the monetization strategy for this is being hired as a social media consultant and masterminding a social media synergy of awesome for the most social mediaist social media ever.

The problem with that approach is that it completely misses the point.

Here’s how most companies address their social media campaign needs:

1. Find out from FOX & Friends that they should probably be getting on board this whole social internet train.
2. Attend the nearest conference and attend a keynote about “Using Social Media to Grow Your Business 5000% in 20 Days of Less!”
3. Get excited about all the buzz words and hire a “Social Media Specialist” (usually this seems to be the keynote speaker getting hired, actually).
4. Pay said Specialist a monthly retainer to handle expert socialization branding viral magic.

What’s the missing component here? You.

You’ve hired yourself out of the most fundamentally important roles you can have in your business and thus missed the point of developing a social media strategy. There’s no one you could possibly retain on a consultancy basis who knows your business better than the people who are in the trenches dealing with customers, moving boxes, filing forms, answering phones and making shit happen day-to-day.

That’s not to say everyone in your business needs to be intimately involved in your social media strategy (although that’s the way it should be), but I know without a doubt who it shouldn’t be: anyone else.

Of course, it might be that you, as the CEO, do not have time to dedicate to such a mundane task as responding to people on Twitter.

Well, that’s ok, I’ll shop somewhere else. It’s safe to say that if you’re reading this blog, companies bigger and CEOs busier than you are making the effort and pulling it off. You need to have a layer in place to handle returns if you’re really getting a very high level of response but that is rare.

I’m not talking about companies like Comcast and Dell who have full-time Twitter customer support people monitoring their accounts. That’s fine and understandable. I’m talking to you though, the small business guy or girl who isn’t sure how to break in and feels like the results aren’t coming fast enough. When your goal is to just participate in the interactions happening in your market space because you’re genuinely interested, you will find that a social media strategy comes natural.

If you’re selling tax services in West Palm Beach, you should be participating in those conversations. As I write this, I found four people doing their taxes right this very second on Twitter. They’re probably struggling and annoyed.

Wouldn’t it be awesome if you sent them a reply and told them if they had any quick questions or needed a 140 character tip that they could send a note? That would kick total ass and you would be a rock star to them. You’re not sending them automated messages looking for “doing my taxes” and shooting over your URL. Screw that.

So that’s the key. Social media strategy is simply availability to [potential] customers. Pretend you’re a normal user (because you are) and you just want to participate in the conversations that happen to also be inline with what you’re selling.

Social Media Hit List

If you’d like to save some money on conference badges, here’s a quick-and-dirty hit list. This is all you need to know.

• Create a Twitter and Facebook account.
• Add a Twitter and Facebook app to your phone and give access to anyone in the company who can act as a conduit to real customer relationships.
• Talk about what’s going on in your business and the industry (your space). What are you working on right now? What is coming up that gets you excited?
• Use search to inject your brand’s voice into other conversations that are happening in your industry (don’t spam, interact!).

I know it sounds simple. I know you may have just written a check to someone who set up your Facebook page for you. However, if you simply treat your social media experience as your experience and not an extension of some nameless marketing campaign, you will get excellent, slow and steady results.

I’ll save all the development stuff I use for a later post (e.g. Photoshop, TextMate, etc.) and for now just focus on the everyday productivity applications that live on my desktop and laptop.

Mailplane

A while back I switched my email services from my MediaTemple (dv) server to Google Apps for Domain. For a long time I simply continued to use Apple Mail and iCal—adding the Gmail services to Mail as accounts in the standard way.

Unfortunately, Apple Mail doesn’t play as nice as it could with Gmail IMAP. It also sucks to have to give up a lot of the great Gmail features. Of course, the trade off is that you get to use the nice native Apple interface instead of opening your web browser to check your mail.

Enter Mailplane.

Mailplane brings your Gmail to your desktop. It’s basically Fluid.app (referenced below) with a lot of Gmail-specific features and utilities. It encapsulates Gmail, thus giving you the advantage of dealing directly with your Google interface while still being available to you as a desktop app would. It even handles multiple accounts with ease.

Basecamp

Since I spend a lot of time in Basecamp, I wrapped it in a desktop app using Fluid. This helps a lot if you spend tons of time in it and especially if you use OpenID to connect the other 37signals apps together.

While we don’t use Basecamp for tracking time (see Freshbooks below), we do use it to keep track of all of our project milestones, deadlines, as well as creative and code materials. We don’t even really use it for communication with clients except when we’re dealing with a larger scale project. It’s mostly for internal organization in our workflow.

I tried getting more into Backpack, which I hear is great for some people, but since I use Google Calendar the subscription doesn’t really make sense for me.

Freshbooks

I’ve written about Freshbooks before and I’ll probably write about it again. It’s a great webapp and a great company. I do a lot of invoicing and a lot of time tracking for myself and my employees, contractors and vendors. Freshbooks not only makes this easy, it makes paying for it easy for my clients. That’s a great thing.

In order to track time with Freshbooks, we use a little desktop app called Timepost which I would also recommend (although it is indeed a little pricey for what it does).

Fever

This is a recent addition to my desktop. Fever is an RSS reader with a twist.

Over the years I had accumulated hundreds of RSS feed subscriptions. Keeping track of them was absolutely impossible. So basically I would just have my feed reader (NetNewsWire) open all day with the unread count climbing and climbing. I would occasionally jump in and absorb some content but eventually I would get so behind I would just mark all as read and move on.

Fever solves this by analyzing your subscriptions and generating a what’s hot list based on who is linking to what. This saves unbelievable amounts of time while still allowing me to keep updated on what’s going on in the genres of content I’m interested in.

Tweetie

I use Tweetie for iPhone and on the desktop. I’ve tested just about every single Twitter app I can find and I landed on Tweetie a few months or so ago.

It really is a smooth and elegant application—both on iPhone and Mac. It handles multiple accounts very well, as well as all the standard Twitter API features you’ve come to expect.

It’s not as crazy with features as some of the Twitter apps out there but I actually prefer that. I don’t want some insane dashboard command center. I just want a nice little window I can hide over on another monitor and have it live happily and not bother me unless I need it.

The Homepage

The overall style is simple and clean but with ample color.

I used Julia Roy for the customer service representative in my mockups. I’m sure she would be cool with it.

I knew I wanted to show potential customers the widget on the homepage without being intrusive. The Free2Chat widget gets displayed directly to the left of the prominent call to action. This widget actually works and and allows potential customers to interact with it from the perspective of how their users would when it gets placed on their own site.

Not to mention, since really the whole purpose of Free2Chat is to allow you to connect to your customers, why not use it ourselves?

User Conversion

There’s also a second call to action button (in the same style for uniformity) in the footer of the homepage. “Are you ready… now?”

After clicking the call to action button, you get moved over to the registration form. Simple, structured forms are key. Generally if you’re trying to get high free conversions you want to keep the number of fields to a minimum but don’t be afraid to get what you need from the user as long as you have it structured cleanly.

Form design is something a lot of UI and UX developers hate. I understand the reasoning but this particular project went well and I think we got a good result for the registration form here.

It’s the little things that make a boring registration page interesting. The password strength indicator uses a color palette that meshes well with the overall color scheme. Don’t settle for default jQuery styles.

Below our registration page, we reassure the user that everything will work out and that if there are any issues they’ll be able to easily get the support they need. This is much more important if we were collecting credit card information at this stage, for obvious reasons. It’s important to keep in mind though, as a general rule.

Also don’t be afraid to tell your potential sign up that their trial will expire and they’ll need to pay. It may seem counter-intuitive but you’re basically qualifying the lead ahead of the time, rather than supporting a user that will probably never pay if they aren’t truly interested in evaluating your software.

Remember, Cost of Service includes free and paid users.

The Dashboard

I wanted to design a system where users could customize their widget as much as possible while still maintaining the integrity of the embedded code on their sites. To do this, I set up some simple variables for the CSS styles and allowed them to choose those colors.

Some forethought is necessary when doing this. You don’t want someone getting frustrated because the don’t understand what field corresponds to which area of the widget. On fact, it’s better to have so few choices that it becomes self-explanatory, as I hope is the case here.

If you have a very savvy user base, feel free to allow them all the freedom in customization in the world. I happen to love when I can choose to embed a widget completely unstyled and hook up my own CSS. That was not the case here, though.

Giving users several default examples to start but allowing them to customize those defaults let’s them increase complexity as they learn.

I went ahead and created some default themes they could easily plug in and gave them sappy names like Earth and Ocean just to make it interesting. This also allows someone to come in fresh and immediately see what this customization deal is all about simply by clicking on the pre-loaded theme buttons. Then when they feel comfortable they can start using the color picker or even hex codes to plop in their own colors.

The total amount of searches on Bing rang in at 1.1 billion for the month of August, a leap of 22.1 percent over July, winning Microsoft a 10.7 percent share of the search engine market.

Google remained in the top spot with a commanding 64.6 percent share, accounting for 7 billion searches in August, a gain of 2.6 percent over July. Yahoo saw its search results drop 4.2 percent for the month to 1.7 billion, earning it 16 percent of the market.

We Are Googlers

We use Google Apps to manage the Vocino Labs email, document, calendar and chat infrastructure so we’re pretty married to Google at the moment (not that we couldn’t jump ship if we needed to). However, I’m still very happy that Bing is generating some momentum.  Not because I like Bing or use it at all, but because this represents healthy competition for Google.

We also do a lot of Google-related services such as Adwords and Analytics consulting. Which does contribute to our G-love.

While Google does innovate, of course, it doesn’t necessarily always have to release that new feature or fix that nagging UI annoyance. They often do, don’t get me wrong.  Google is an advertising company at the heart of it though. So while they enjoy innovation and creativity, as long as they have an unbelievably dominating percentage of the market’s eyeballs, they don’t have a fire under them to invest in those new elements.

Google ain’t feelin it quite yet

Bing’s success isn’t coming at the cost of Google’s market share quite yet anyway. Most of the attrition has come from Yahoo and AOL search solutions to a more evolved technology. These weren’t Google users looking for huge splash photos on their search homepage.

This is why you’re not going to see the big G scrambling to implement new candy to get us excited yet.

Have you started using Bing for any searching?

Despite what you may have heard last week on CNN, this Twitter stuff is not about a cute blue birdie that you post updates on ice cream flavors or Hello Kitty shopping sprees. Now this is serious business. You need The Social Media Carpetbagger Professional.

We don’t know what that qualification means at this point, but I would guess that any decent one has a really awesome hidden wall that slides out to reveal an array of the latest Palm Pilots PDAs, micro SD grenades full of tweet-bots, and terabytes of hot-chick profile disguises for MySpace.

In case you didn’t catch the political news on Wilson this week, he’s the S.C. Republican Congressman who interrupted Pres. Obama’s health care speech with the “You lie!” Capitalizing on this spotlightfrom both the MSM and netroots, Wilson has raised a large sum of contributions. Funds total over a million bucks, in fact, and this has caused him to go shopping for the very best in ‘Social Media professionals’.

His 2010 challenger, Rob Miller, a former Marine who served in Iraq, has actually out raised him and surpassed the million-mark earlier. However, it has been a constant smack-talking exchange on the funding gains from the anomaly. Primary outlets for this rabble rousing have been the usual seedy hangouts in the blog underworld at FreeRepublic and DailyKos, respectively.

Wilson’s tweet-pro is David All, whose slogan is “The Nations First Conservative Web 2.0 Agency.” He also has a big client in Florida’s Marco Rubio, who is attempting to run a primary for the U.S. Senate race against Gov. Charlie Crist. Since he is vastly out gunned on funding, Rubio hopes to overcome the favored Gov. Crist with web based tactics on the cheap. He seems to have at least bought some credibility from this, securing a cover story “Yes, He Can”, from the highly-influential conservative magazine National Review. NR describes him, somewhat cynically, as one “who quotes Snoop Dogg lyrics on his Twitter account.”

The Wilson v. Miller fundraising battle will be the one to watch for now, as Wilson’s ‘Professional’ is going up against the more established trends and organizations of left-wing power. In Miller’s corner is the online fundraising structure from ActBlue and web from NGP software.

Since Miller already had this in place, it has certainly helped in gaining a bigger edge in ‘retaliation’ funds from the Wilson outburst. What remains to be seen is how this matchup will play out if Wilson is truly intent on parlaying most of his new money into a nation-wide web following.

Finally, the Wall Street Journal writes today that free information online means that campaign funding and regulation is becoming obsolete, and therefore the SCOTUS should invalidate the McCain-Feingold regulations on contributions. If this does happen, it would be a huge transformation in free speech issues and development of political communication.

We like to have at least a good portion of the content available before starting on the design of the site. Place holders are fine in some cases but if your goal is really to design information, you need the actual content that will ultimately go into your design.

Depending on your CMS, you will have numerous options for styling content themselves via a WYSIWYG editor. This is good and bad. A lot of times what you end up with is way too much freedom provided to the copy writer and too much design going into content. Content is styled with CSS, not within a TinyMCE window.

Ideally, you should only be contributing baseline HTML tags like <strong>, <em>, and any relevant heading tags. This way elements are styled appropriately and when it comes time to change the look and feel of the site down the line, you’re not dealing with tons of embedded styles in the content.

Writing Great Content

Once you’ve given them an understanding of what they are allowed to do (sounds bad, doesn’t it?), you can offer them with some tools to help channel that focus to great content.

Fairly or not, the internet has earned a reputation as the home for typos, incorrect spelling, and bad grammar. Automattic, the company that created WordPress, is taking steps to improve that with the just-announced acquisition of a spell-checking startup called After the Deadline.

This quickly became a must-install for our clients using WordPress. Here’s how it works…

With Automattic now behind keeping the development of the project up to date, it adds a lot of confidence to deploying the plugin on more sites.

With most primetime services being developed around what is considered “real-time” data (like Twitter, for example), there has been less attention being allocated for RSS feeds. Getting your data a few minutes behind just instead good enough anymore.

These days Twitter can deliver your news faster than a news web site can and certainly faster than any traditional news network. It’s no surprise that most news organizations that rely on real-time reporting and getting a link to their story to you first, have made a huge movement to Tweet their articles.

Now WordPress has done something that eliminates that RSS delay problem and brings the hosted version of WordPress, WordPress.com, and their 7.5 million blogs into real-time. It has implemented RSSCloud, an RSS element that makes instant syndication of blog posts possible.

There has also been a plugin developed for self-hosted WordPress blogs that makes jumping on a no-brainer.

However, supporting RSSCloud doesn’t mean that your RSS feeds are instantly real-time. It requires support by both the originator of the RSS feed and the RSS reader and even though the cloud tag and the functionality has been available for some time now, there isn’t much reader support out there. The good news is now that such a bulk of blogs via WordPress.com have been moved over to the RSSCloud bandwagon, you’ll definitely be seeing a lot of readers support it.

Needless to say, Vocino Labs is now rocking it and so are all of our client blogs.

The nice thing is the conversation usually evolves away from Twitter into other interesting topics. I met a lot of great, nice, intelligent people there and only one certified social media douchebag. Out of about 35-40 people, this is a pretty great ratio. However, the subject of social media douchebaggery was still on my mind since I had a few conversations about it and other Twitter noise or spam issues while there.

The best possible outcome for a social service like Twitter is for users to create their own environments and, even better, extend them to the real world in order to make lasting connections with like-minded people. That’s why I think the Tweetup trend is pretty great. The other part is spontaneous “Is anyone else here?” type meetings. Both of these require a certain threshold of userbase in order to function properly and to be viable. It also requires a critical mass in order to draw attention for other potential users to get involved which in-turn makes those functions more viable—somewhat of a chicken and egg scenario there.

When I first joined Twitter, these abilities just weren’t there. That’s simply because there weren’t enough people using the service in order to even consider asking the void “Is anyone also at this Starbucks right now?” That was unheard of.

Unfortunately, this delicate sweet spot of just-massive-enoughness is fleeting. There’s a bell curve with talking to a void on one end and talking to robots (or social media douchebags) on the other.

Twitter is on the other side.

Some might say it has jumped the shark. We already know it’s apparently not so popular with the kiddies. You can still operate Twitter in a valuable way if you choose to. If you don’t follow everyone. If you don’t just spam out shit all day long. If you use it to actually connect with valuable people or get quick customer service from great companies.

I’ll continue to do my best. Block the spammers and value my little Twitter stream until it dies.