How I Validated a Niche Idea for $32.19 with Facebook Ads

I've been itching to build a niche market product for a while now. After making tons of iOS apps, I got bored that nothing really took off. I want to make something that helps people's lives, and I want to do it so well that they'll want to pay for it.

Using the book Start Small, Stay Small as a guide, I found a niche that I could become familiar with by combing through all of my first-degree connections.

I found some valuable metrics about the niche's membership in an annual report. About 14,000 participants in this niche are paid over $3,000/year. If I could sell a $10/mo subscription to 1% of the members, I'd be pulling in $1,400/mo. That's more than enough to satisfy my itch.

I should note that I'm not shooting for the stars, I just want to build a tool that has real impact.

TL;DR on my experiment

I used Typeform and Facebook Ads to validate an idea with a niche market.

  • $32.19 spend on Facebook Ads
  • Ad reached 7,516 people
  • 240 clicks with 310 unique visitors
  • 112 surveys answered
  • 101 emails collected

Collecting Feedback

I've used Survey Monkey and Google Forms in the past for college projects, but since then I've learned a lot about user experience and wanted something more user friendly. Those tools are quick and easy to get moving, but I needed users to want to fill out the survey.

Enter Typeform.

Typeform is a newer service for building high-quality, responsive forms and surveys. I used Typeform for the first time when I user tested one of my apps. I created that survey in less than an hour.

The form builder is super simple to use and has a ton of robust features, even at the free tier.

Typeform Workflow

The question builder is even more detailed. You can add images, video, make it required, all types of things.

Typeform Detail

You can check out one of my old surveys to see how responsive and fluid the forms are. Feel free to save data if you want, I'm not using that form anymore.

You can create basic surveys and forms with Typeform for free. Upgrading gets you access to more complex workflows, like conditional user paths, and advanced data fields.

The only bummer is that you can't manage your Typeforms on mobile, including tablets. There's an API, so if I'm bored again I may whip something together.

Make sure you ask for emails at the end of your form! It's an easy way to collect emails for early adopters or beta testers.

Reaching Your Market

A survey is pointless without getting it in front of people. I'm not a marketer, and I don't really know what I'm doing. Lucky for me I attended Facebook's F8 conference this year and learned about their powerful targeted ad platform.

You can use Facebook Ads to create extremely targeted ad campaigns using age, gender, education, interests, etc. Facebook even gives you a gauge to show you roughly how many people your targeting configuration will reach.

Facebook targeting

All you need to create an ad is a Facebook Page and a URL. In my case I created a throw-away page and linked to my Typeform survey.

I filled in configured the ad towards my niche based on assumptions, and whittled my reach down to about 600,000 people. I capped my budget at $50, let Facebook determine my CPC, and checked out with my credit card (you can use Paypal too).

Results

Here are the results of my Facebook Ad with Typeform:

Facebook Results

I got my survey in front of 7,516 people and had 240 clicks all for $32.19. That cost me $0.13/click. Facebook tells me that it usually costs about $0.60/click.

I have no idea why my ad was so cheap, but that's incredibly valuable since it tells me advertising my product will be cheap.

I also ended up with 112 survey responses which included 101 emails. My questions focused around pain points, and, by analyzing the responses, I found a problem that roughly 85% of participants shared.

Typeform contains some basic analytics as well. I got a break down of my audience's devices and found that the majority of users who clicked on the Facebook Ad have smartphones.

Something really unexpected happened too, people were Liking my ad on Facebook! When a user Likes a page or ad that ad is then shared on that person's wall. Free advertising. Facebook reported 240 clicks while Typeform reported 310 unique visitors.

Hindsight

I spent more time on my survey questions than actually building the survey, which is fine, but I really wish I spent even more time on creating the right questions. I could have vetted the questions with my personal network before sending them into the wild.

I also ran the ad for a month which was way too long. I could have just as easily ran it for a week. This likely would have raised my CPC, but if that meant getting things over and done with sooner, that's fine.

Conclusion

I highly recommend using Typeform (or any survey tool) with Facebook Ads next time you have an idea or market that needs validating or testing. It's just too cheap and easy not to test before investing time and money building something.

For me, I spent just a pinch over $30 for some solid data. The next step is to figure out exactly how to solve the problem I found, and that's the fun part.

Note: Normally I wouldn't care about hiding an idea, since the idea is 5% of the work, but I might have actually found something.

Iterating to an Ugly UI

I've been working on an app for golf courses that gives golfers range finding and the latest weather. The concept and app are rather simple, so I decided to spend some time perfecting the design.

After deciding on tab bar navigation, I needed to create the view the user sees immediately after launch. The first view is a list of holes on the course with some branding and supplementary information.

Initial course list sketch

My usual first step, when I start a brand new design, is to hop onto Dribbble and see what the latest trends are. I've done enough searching on Dribbble to know to first search "ios7 list" and sort by "Popular".

Dribbble results for iOS7+List

I took the Dribbble search results and created my first design.

First Design Concept

I tried to make the app look "iOS 7" by blurring a photo of one of the holes and placing it in the background. Each hole only shows the hole number, par, and yardage for a single tee.

The spacing between each hole would give me room to create some dynamic animations. Maybe keep the blurred background in place and slide in the map of the hole.

If you ask me, this is a weak use of screen real-estate.

I really liked the hole number green with a white, inner border. The style should be familiar to most golfers.

Second Design Concept

This second design iterates on the first only adding a feint line connecting each hole. The line reinforces order, kind of like a golf cart trail between each hole. The actual data that's displayed doesn't change at all.

Third Design Concept

Not much changed on the third iteration, only the cell layout. Putting everything on the same line and reducing sizes put more holes on the screen at once.

Fourth Design Concept

I ended up getting carried away with the idea that more holes on the screen means better layout.

Its a wreck.

Taking a step back, I saw how I was digging a deeper and deeper hole. I needed to stop staring at the trees and start focusing on the forest.

Final Design Concept

The fifth and final design heads in a new direction. I refocused my efforts, deleted my Dribbble Inspiration folder, and thought critically about how this screen would be viewed.

I realized that golfers were going to be in direct sunlight trying to read text on a glossy, finger-smudged screen. I got rid of the background blur and used black text on white for maximum contrast and readability.

The only information that really matters on this view is the yardage for each tee box, hole number, handicap, and par. The rest of the data should be in the hole views or elsewhere in the app. The new data layout is light and balanced.

I also removed every animation. Course data is loaded from local resources, so a fancy animation isn't masking any work. Users would just end up waiting, and they frequently like to complain about how annoying pointless animations can be.

I'm quite happy with the final design, but you won't catch me posting it on Dribbble, because it doesn't really follow any design trends. It's ugly.

And that's a good thing.

The final interface serves its purpose. It presents basic course information, removes distractions, and is completely accessible. Sometimes following trends for the sake of being trendy creates Dribbblisation and hurts the usability of your product.

Custom View Controller Transitions with Orientation

When iOS 7 was announced at WWDC in 2013, there were an incredible amount of new APIs that caught my eye. Watching one of the developer sessions from my couch in Ohio a few hours after it took place, I stumbled upon session 218: Custom Transitions Using View Controllers.

This session contained a lot of confusing information about an incredibly exciting new API. I say "incredibly exciting" because graphics and user interaction on iOS are what really get me going. I love exploring and discovering new ways to delight my users.

The core functionality of this new API uses the protocol UIViewControllerAnimatedTransitioning.

This is how Apple describes the new API:

View Controller Custom Transitions described by Apple

If you're confused, don't worry, so was I. This screen cap just about sums up the entire session 218 video as well as the sample code.

I was really hoping we'd get to see some examples of how Apple created their custom transitions, but the only sample provided performs a simple transition using UICollectionViewCell animations, which is a little different than the UIViewController transitions they demo in the session.

I'll attempt to explain how UIViewControllerAnimatedTransitioning works as briefly as I can.

You are currently looking at view controller A and want to present view controller B.

View Controllers A and B

You initialize a transition and are given a container view that facilitates the animation of your transition.

Adding VCs to Container View

Add view controller B's view to the container.

Adding B to the container

Perform an animation on the views of view controllers A and B (not on the container).

Simplest of all animations

Afterwards you're left with view controller B presented, and, by calling animationEnded:, the presentation is completed.

Recently Ash Furrow and Bradford Dillon created some really great posts on custom UIViewController transitions on Teehan & Lax's and Double Encore's blogs, respectfully.

Both guides are great and do a good job at explaining how to create your own custom UIViewController custom transitions from scratch. However, both fail to explain how to implement proper orientation support.

Teehan example orientations

I started experimenting and quickly found what I thought to be a bug. On July 15th I filed my first bug report with Apple (#14444833, thanks for those who resubmitted). I also created a thread on the dev forums that got some attention.

No one ever got an official answer.

After some digging, I found that the container view's frame is always laid out in portrait, even if the device is in landscape.

The frame layout was likely our biggest source of confusion.

It took a lot of tinkering, but I finally found a useful solution. Even though the frame of the container view is stuck in portrait, I found that the bounds of the container view is always corrected for device orientation.

I'm not entirely sure that this is intended, but since the container view should be agnostic of your view controller hierarchy, it shouldn't necessarily adjust for orientation.

From the frame documentation:

The frame rectangle, which describes the view’s location and size in its superview’s coordinate system.

From the bounds documentation:

The bounds rectangle, which describes the view’s location and size in its own coordinate system.

The view controller transition API is simply too vague in its current form. More sample code and documentation really needs to be provided. But for now, if you're going to use custom view controller transitions, make sure to adjust your new views with the bounds of the container.

I've setup a Github project with examples using code, NIBs, and Storyboards. Please feel free to use the code from my transition controller as a starting point. Hopefully this will provide a good starting point to perform awesome, oriented animations.