Launching a new business idea or deciding to develop a new product for your company is not without risk. Many of the best business ideas have come from inspiration, intuition or in-depth insight into an industry. While some of these ideas have risen to dominate the modern world, such as search engines, barcodes and credit card readers, many fine ideas still result in bankruptcy for their company, due to insufficient demand or failure to properly research customer desire. If you build it will they come? Often smart business entrepreneurs can still make big mistakes. With new product, service or business…
If you’ve been following the web development community these last few months, chances are you’ve read about progressive web apps (PWAs). It’s an umbrella term used to describe web experiences advanced that they compete with ever-so-rich and immersive native apps: full offline support, installability, “Retina,” full-bleed imagery, sign-in support for personalization, fast, smooth in-app browsing, push notifications and a great UI.
But even though the new Service Worker API allows you to cache away all of your website’s assets for an almost instant subsequent load, like when meeting someone new, the first impression is what counts. If the first load takes more than 3 seconds, the latest DoubleClick study shows that more than 53% of all users will drop off.
What would more traffic to your blog post mean to you? Image source.
What would 100,000 views on a blog post mean to you?
Depending on the goals of your blog, it could mean thousands of new subscribers and fans.
But it could also mean new customers — big traffic means big exposure and big exposure means big growth.
We’ve been publishing content at Groove for the last five years. We’ve messed up a lot, we’ve learned a lot more and we’ve grown from nothing to over $300,000 in monthly recurring revenue through content marketing.
Today, ourblogs are the single biggest driver of growth (as in, real money) for our business.
If your goal is to get 100,000 people to see your post, then you need to pick a topic that a lot more than 100,000 people are interested in.
What that includes:
Painful problems that lots of people or businesses have
Aspirational goals that lots of people or businesses have
Controversial issues that lots of people or businesses are divided on
What that doesn’t include, from a content perspective:
Your product, service or sales pitch
Hyper-niche problems or goals that tiny corners of your market have
There’s huge potential in writing insanely targeted pieces, but if you want lots of traffic, start with a topic that already gets lots of traffic.
Think of a highway with thousands of cars on it. It’s a lot easier to build an off-ramp and siphon some of that traffic off of the highway than to build a whole new unconnected road and try to get cars to drive to it.
How do you know you’re picking a big enough topic?
Start with the problems that you know your market has (if you’re lost, here are some questions to ask to get you started).
Then validate the idea by searching for it
Start with simple Google searches, trying different terms around your topic (think like your reader, and use the exact language that you’ve heard your market use).
It’ll become clear to you pretty quickly whether it’s a crowded market with tons of content written about it (good), or something that very few people write about and, therefore, care about (bad).
You don’t need expert-level Keyword Planner skills here. Type some topic ideas into the “Your product or service” box, and click “Get ideas.”
This is what you’re looking for:
Keywords around the exact topic you want to write about should add up to a lot more than 100,000 searches per month.
This is what you’re NOT looking for, as you’ll have a hard time scrabbling together 100,000 views:
Again, we’re not going into advanced SEO here, and there’s lots more you can do with tools like this.
But you don’t need to be an SEO expert to get lots of traffic. This step is all about getting practical validation about the audience size for your topic.
You’ve got the traffic — now how do you convert it?
Here’s a little inspiration: 10 overlay examples to turn your blog traffic into leads.
By entering your email you’ll receive weekly Unbounce Blog updates and other resources to help you become a marketing genius.
2. Writing the post: Be bold
Once you’ve picked a topic you want to write about, you can write your post.
There are three things that every post needs to be if you want to succeed in content marketing:
Valuable: Can readers take your post and DO something with it to improve their current condition?
Interesting: Does your content make reader want to keep reading from beginning to end?
Unique: Does your content stand out from the rest of the content being written about that topic?
All three are “table stakes” for effective content marketing. But for the purposes of this post, where we’re focusing on traffic, let’s assume that you can handle making your post valuable and interesting… so let’s focus on the third: being unique.
Imagine a choir singing a melody; everyone looks the same and sounds the same, so you can’t really tell the difference between any two voices.
That’s what most content markets look like. Homogenous. Image source.
Now imagine Kool-Aid Man busting through the brick wall at stage left and belting out a tune that nobody in the choir had ever even considered before.
Kool-Aid Man turns heads. Kool-Aid Man is impossible to miss. Don’t join the choir. Be Kool-Aid Man. Image source.
How can you be bold like Kool-Aid Man?
Approach the topic in a way that nobody else has before
The first step of which includes looking at how everyone else is approaching the topic.
In our case, there were hundreds of articles about how to write for your business’ Facebook page, tips for promoting it, how to make sure that people saw it, what kinds of content to produce for it and so on. Everyone was part of the choir, talking about the best ways to approach Facebook for business.
We decided to be Kool-Aid Man and give our readers permission to not spend time on Facebook at all. Here’s the post title we chose:
Facebook simply hadn’t worked for us for lead generation as well as other channels had, so in the spirit of focusing our very limited resources on only the highest-ROI efforts that we knew would work, we decided to delete our Facebook page and not spend any more time on it.
We were happy that we did, and we thought that others could benefit from a bit of focus, too. And beyond that, we wanted to offer a reality check to remind readers that just because all of the “experts” talk about something, doesn’t mean you have to do it.
And so we wrote the post, the one that busted through the brick wall and didn’t look or sound anything like the choir.
Of course, when you write a post like this, a lot of people will disagree with it. Many will even be offended.
But a lot of people will agree, too. And the more worked up someone gets about your post, whether they agree with it or not, the more likely they are to share it with others.
So pick a side. The more contrarian, the better. And defend it vigorously.
3. Find distribution channels: Identify the gatekeepers
If you had 100,000 people on your email list, then getting 100,000 views wouldn’t be that hard. But let’s assume that you, like most people, don’t have a list that big (yet).
Well, there are lots of people out there that do.
This step is driven by simple math: it’s a lot more time-consuming to get your post in front of 100,000 people, one by one, than it is to put it in front of 50 people who will each want to share it with 2,000 others.
That’s distribution strategy. It’s the “influencer marketing” that has become a bit of a dirty word because so many marketers are doing it poorly.
Let’s go over how to do it well.
First, identify the influencers (the gatekeepers to your 100,000 people)
This is the most time-consuming part of the strategy, but it’s critically important. Skip it or skimp on it and you can kiss your traffic dreams goodbye.
This used to be an extremely painstaking process for us that involved hundreds of hours of Google research. Now it’s just a pretty painstaking process that involves several hours of Google research, plus a few hours using BuzzSumo.
Here’s what you do:
First, find as many content pieces as you can that have done well and that relate to your topic using BuzzSumo’s topic search:
Next, click on “View sharers” for each post.
You’ll get a list of influencers that shared the post:
This makes for a terrific place to start your outreach.
Get as many influencers as you can, cutting out the obvious dead ends (bots that curate content, fake accounts), and put them into a Google Sheet (here’s the one we use — just make a copy and steal it).
Try to get your list to at least 100 great leads whose total audience exceeds 5 million people (that means that you just need to get in front of 2% of them successfully to get 100,000 readers!), and add to your BuzzSumo-sourced list with:
Google research (search for the topic you’re writing about, and see who’s already written about it)
Twitter search (same approach: see who Tweets about the topic you’re covering)
Quora (if the question that you’re asking has been asked on Quora, see which influencers posted opinions)
Influential members of online communities and platforms related to your market
Quick side note:
Content marketing is a long game, and you’ll be a lot more successful if you view it that way. Nowhere is that more true than with influencer outreach.
You’re a lot more likely to have success with influencers who know and trust you because you’ve put in the time to follow and read their content, share it with others and contribute thoughtful perspectives in their comments sections. These are efforts that pay off dramatically over time, and I recommend you begin blocking off an hour or two each week to do that with everyone whom you see as an influencer in your market.
That will increase your success with this next tactic exponentially, though it will still work if you haven’t done this yet (it’ll just be harder).
4. Tell influencers about your post: Stand out
The next step is to tell influencers about your post.
The approach that we’ve used (something we originally saw in a Derek Halpern video many years ago) rests on three key pillars:
Take the time to make every outreach email deeply personal and honest: Mass emails are annoying and, often, useless. Nobody will want to build a relationship with you when it’s obvious that you’re sending them a canned outreach email. Personalize each email with an authentic reason as to why you’re reaching out to this person.
Never send your content in the first email: Almost everybody does this (“Here’s my post, please share it”). Not only is it rude, but it makes you look like everyone else. If you don’t understand why this is rude, read Permission Marketing.
Ask for feedback, not promotion: Again, everyone asks influencers to promote their posts. Remember: don’t be the choir. Ask them for something that’s not only more valuable, but that they’re probably more willing to give: their feedback.
The “authentic” in “authentic reason” is key. Find a post that they’ve written before, and actually do something with it.
I loved your post about email marketing myths; I had no idea that Tuesday isn’t actually the best day to send. Just shifted an upcoming campaign to Friday to see what happens
I know you’re an expert on this, and I’d love to get your thoughts on a post I’m working on about some surprising results I found when A/B testing subject lines.
Do you mind if I send you a link?”
Now, one of a few things will happen:
They’ll ignore you. Cool, move on.
They won’t give you feedback, but they’ll respond. In some cases, because you didn’t do what 99% of marketers do (ask them to promote your post), they’ll do you a solid and share your content.
They’ll give you feedback.
#3 is the absolute best outcome you could hope for, because not only do you get helpful feedback from an expert on the topic, but now they’ve invested time in the creation of your post. Now it’s their post, too.
So when you incorporate your feedback and come back with a request to share, they’ll be more than happy to help:
5. Find what works: Have fun with it
If you repeat this process across 100+ influencers, you will eventually get big traffic. In the example above, the post hit 100,000 unique page views around 80 days after publishing.
If you do this across 10+ different blog posts and different influencer markets, you’ll get even more traffic over time. And if you do it for a long time, you’ll turn your content into a significant and dependable source of new leads for your business. Because the first step to converting on-site visitors is getting them there in the first place.
You’ve got the traffic — now how do you convert it?
Here’s a little inspiration: 10 overlay examples to turn your blog traffic into leads.
By entering your email you’ll receive weekly Unbounce Blog updates and other resources to help you become a marketing genius.
But you’ll get the best results if you have fun with the process. Play with it and test different things at every step of the strategy:
Choose topics that seem weird to you (but that have big audiences)
Experiment with making your argument in different ways and formats (infographics, videos, etc.)
Try different scripts and calls to action for your outreach emails
You won’t break anything, I promise. The worst that you’ll do is get a negative data point that you learn and grow from.
Viral content marketing is both art and science
As you can see, getting 100,000 readers takes both art and science.
On the art side, writing is important and you have to make an interesting, useful and unique case. And you have to pitch it to influencers in an empathetic and honest way.
But ultimately, the art gets you nowhere without understanding that achieving your 100,000-reader goal can be broken down using science: start with a much larger pool of readers, test different ways to build relationships with the gatekeepers, track what works and what doesn’t and keep experimenting until you get there.
And don’t forget that you won’t win by joining the choir.
Like any potions master would attest, the secret to a great elixir lies in the measured combination of its ingredients.
Over the years, Titan PPC, a full-service pay-per-click advertising agency based in Vancouver, has developed a “magic formula” for designing lead generation landing pages that convert at average of 15% or higher.
The secret ingredient? For company founder, Patrick Schrodt, it doesn’t boil down to just one.
Any smart marketer knows that when visitors reach a landing page, they won’t all have the same intentions for being there. Some may have clicked an ad looking for a plumber in West Seattle where others may have clicked one looking for a plumber in Capitol Hill.
But if your client is a plumbing company that serves the entire Seattle metropolitan area, your landing page should show both the visitors from West Seattle and Capitol Hill that you’ve got the service they need in the location they want it.
In other words, you want to use geo-targeting to make your landing pages especially relevant to your prospects. As Patrick explains:
There’s always been geo-based searches and there always will be. For our own campaigns, we’ve gone as targeted as including a map on every landing page. We highlight a visitors location on the map depending on the where their search is coming from — people go crazy for it!
And the conversion rates don’t lie.
Watch this clip to hear how Titan PPC used geo-targeting to increase a client’s on-page conversion rates from 6% to 33%, practically overnight.
Interview with Patrick Schrodt, founder of Titan PPC.
2. Use (awesome) images to break up your body copy
Never judge a book by its cover… right?
Well, fact is, when a prospect reaches your lead gen landing page, the first thing they’ll do is judge your offer or product by the way you’ve presented it to them. And they’ll do it within seconds.
That’s why you want to make sure it looks so good they won’t want to leave.
The key to keeping prospects interested? Great photography. According to Patrick:
Images help prospects get a clear picture of your client’s product or offer, and it shows them you’re a professional.
Titan PPC adds full-page horizontal image galleries throughout their lead gen landing pages.
It helps break up a visitor’s attention as they scroll by giving them something nice to look at.
But you can’t just slap a bunch of images into a gallery and hope that it all comes together.
If you’re going to source images for clients, you have to make sure you grab photos from a series. I’ve seen landing pages where it’s obvious that each image belongs to a different suite and it’s not coherent or nice to look at.
Check out this example of cohesive image galleries on one of Titan PPC’s lead gen landing pages for a lawn mowing client in Philadelphia:
Screenshot of cohesive image galleries, landing page designed by Titan PPC.
3. Remind visitors why they are on your page
Remember that bit about making sure your landing pages were super relevant to your visitors? Well, that sometimes means reminding them exactly why they are on your landing page.
Why? Because it brings a prospect right back to where you want them: the form.
It works because every time a visitor sees something visual and eye catching [like the image galleries], they’re then prompted to fill out the form.
4. Make the form match the offer
Speaking of taking prospects back to where you want them, the design of a form on your landing page should never be an afterthought. That means weighing, measuring and sifting every item from the questions to the CTA so it’s fully optimized to ensure a conversion.
It’s so key that the form matches the offer. Otherwise a prospect will just be turned off.
So if your client is offering a 100% free quote on plumbing services, then the form on your landing page should reiterate, loud and clear, that the offer comes at no price.
Sounds pretty straight-forward, doesn’t it?
But matching a form to an offer also means making sure you have a solid understanding of your target audience. As Patrick explains:
For real-estate clients, the CTA is always to download a free floor plan. But for clients that are service based, like plumbers or roofers, the CTA is always to get a free quote.
It all comes back to personalization: different types of prospects want to see different kinds of offers. According to Patrick, real-estate prospects want the feeling of exclusivity, whereas service-seeking prospects are probably just looking for the cheapest way to fix a runny faucet or leaky roof.
Titan PPC’s last tip for optimizing the form? Make the form catch your prospect’s attention.
We always put a starburst or icon in the corner of the form. It’s usually something like ‘100% free’ so it pulls a visitor in and reminds them why they want to fill it out!”
Here’s an example of what Patrick means:
Screenshot of a high-converting landing page form, designed by Titan PPC.
From showing your visitors ultra-relevant content to making sure that content has awesome design and flow, the landing page magic formula is all about giving prospects exactly what they’re looking for and expecting to see when they land on your page.
Care to try some of Patrick’s tricks yourself?
Sign up for a free 30-day trial of Unbounce and try the Hyperion template, a design inspired by Titan PPC’s powerful elixir for high-converting landing pages.
What’s going on in the industry? What new techniques have emerged recently? What insights, tools, tips and tricks is the web design community talking about? Anselm Hannemann is collecting everything that popped up over the last week in his web development reading list so that you don’t miss out on anything. The result is a carefully curated list of articles and resources that are worth taking a closer look at. — Ed.
Autumn is nearly over, winter is coming to Germany and on the weekend the forecast predicted the first snow for the Bavarian Alps which is near where I live. Time to read about Service Workers, and some abstract topics like teaching complex algorithms, and how to be more objective.
Is there a concept like ‘a complete product page’?
Chances are if you have ever found yourself on a product page you have figured out the basic elements:
The Product Image
The Product Specifications
The Call to Action buttons.
The Payment methods.
Shouldn’t that be enough to make a sale? The user lands on your product page, a self explanatory title to the product he wants finds him, he reads the specifications (color, size, material, make, model, related features), after a glance he starts to look around for the payment methods. He likes it, presses the CTA button and bam! Sold! Works like the good old brick and mortar stores, or not?
The better question is; Is there something like complete shopping experience?
The answer is ‘Yes’.
That’s precisely what persuades them to press the CTA button.
Put yourself in the customer’s shoes..
You get into a retail store to buy pasta, you are greeted by the nice security guy at the door.The store manager smiles at you. You are pointed to the right shelf.
You scan through the variety of pasta (Spaghetti, Fusilli, Penne and Farfalle in tempting packaging). One has a free dip to go with it, you take it.
On the next shelf you find some dried rosemary, “Why not make it an exotic recipe?” you add it to your cart.
Now, you are looking for your preferred brand of ketchup, the staff member arranging goods on the shelves tells you they are out of stock.
A lady, another customer, exchanges greetings, casually mentions she loves the Tabasco and the Sriracha from a particular label. You take a bottle each.
The sign boards take you to the cash counter.
The lady at the cash counter wears a reassuring smile. She suggests you buy the fresh herb instead of the dried rosemary and offers to get it quick for you, you oblige.
A little guilt for overspending creeps in, you cancel one of the exotic sauces “I don’t need Sriracaha.”. The friendly lady at the the counter smiles and excludes it.
In analogy, your product page is the retail store. The friendly security guy , the store manager , the staff member, the options, the distractions ,the freebies, the branding ,the other customer, the sign boards, discount coupons, the reassuring lady at the cash counter who cares about your recipe enough to add fresh herbs to it are all product page elements.
Why would you press that button or make a purchase without the complete experience online?
The curious case of Benjamin (pressing the conversion) button.
Persuasion: The Reason Your User Will Press the Button
Subtle and not so subtle psychological factors are at play when persuading people to buy. Cialdini’s six principles of influence govern the product page elements as well. Here is a classification of the functional product page elements listed down for your convenience.
Reciprocity (It’s a Give and Take)
In simple terms tell your consumers you care and they’ll care to buy from you.
‘Hey, we want to save you some money, here’s the coupon for this product in your cart.’
‘If you want to talk we have a discussion board.’
Live chats and availability pop ups make your eCommerce site more interactive and human. Who doesn’t like a considerate seller?
The eager to help staff member at the mart and the lady at the counter know this secret. They are doing their job well by being helpful and responsive.
We want to belong to a common set of values, actions or belief. The consumer feels a sense of ownership when he sees ‘My Account’, ‘My shopping history’ mentioned on the product page. A history or an account is his investment into the website and hence a commitment. This commitment has to be reinforced with warranties and insurances under applicable conditions. Remember, if there is a store you visit often you are more likely to buy from them.
Usual Payment methods
User Account Login
Shopping (Buying) History
Suggestions Based On Your Shopping (Buying) History
Opt-in Form Or Subscription Form
Add this to cart
Terms Of Service Agreement
Credited points / Regular customer points
Links to E-wallets/ Bitcoins
If there is a store you visit often you are more likely to buy from them.
Social Proof (Since Everyone I Know is Doing It)
82% of consumers trust a company more if they are involved with social media. Belonging comes with acceptance. After commitment the human tendency is to look for validation. Validation on social and eCommerce sites comes with increased trust. If multiple users give rave reviews about an enlisted product people are more likely to consider buying it. Here other elements may include social share buttons which allow people to share and take an opinion on the enlistments they are interested in. That other lady at the sauce shelf shopping for the exotic sauces is the retail store’s social proof without even knowing it.
The page elements to influence by Social Proof are listed here:
Authority doesn’t mean you command your users to buy enlisted wares. It means that you create an awe around your products or your brand. How to do that? Has the enlisted product been endorsed by an ambassador? Was the product in news recently? Has it won any kind of recognition or awards? If so mention it, the product is more likely to sell; there’s a halo around it. The same applies to your eCommerce portal/brand name. If you have it, flaunt it!
Tech Specs with special features
Audio Visual advertisements
Product Endorsement Links
Authority puts a halo on the product, one must trust what wears a halo.
Likability (Like It…Will Take It!)
Liking makes a strong positive bias. This is not just acceptance this an out and out affirmation of your brand. Liking is an all-encompassing factor. It includes the UX, UI , and product presentations. It also means crazy copywriting that could lure the more adventurous buyers into visiting your website often, thus turning them into the creatures of habit who get committed to buying from you. It could be the underrated convenience that comes with the user interface or the overrated graphics, slides or product videos.
Include these product elements to be more likable:
Product Details Or Specifications
360 Degree Views Of Products (Photos And Videos)
Photos And Videos In Different Situations
Step by step Explanation Of Usage Of Product – Photos And Videos
Photos And Videos Of The Product When It Is Working
Sorting Options For Reviews
Options For Gifting This To Someone Else
Ability To List Products By Different Criteria
‘If You Bought This You May Like’ (Cross-selling)
Recently viewed products
Tools To Zoom In On The Product
Scarcity (It’s a Tease)
Multiple marketing campaigns promote limited editions to up their sales. The moment you tell your buyers that there are only a few of them left, there is an urge to click that button before anyone else does. ‘We are not telling you to buy this, we are just saying it’s now or never’. Then look at them go for it. But be sure not to create a false sense of urgency, that’s going to hurt your credibility in the longer run.
‘We are not telling you to buy this, we are just saying that it’s now or never.’
In a previous article1 I introduced mobile back end as a service (MBaaS) which aims at giving app developers the ability to create seamlessly new feature-complete cross-platform native and web applications.
The next step is implementing a complete demo application using those ideas. Through this real working application, you will be able to see the areas in which MBaaS provides value. This first part will walk you through a messaging application demo powered by the Kinvey application and explore how to leverage user management, file storage and the data store.
The second part will complete the demo and demonstrate how to leverage two key pieces of Kinvey functionality: the permissions provided by the data store, and push notifications, which are enabled through the business logic functionality.
Before jumping into the demo application, I want to highlight a few points. First, because I am using a real app to discuss MBaaS, knowledge of the development platform would be extremely helpful. I am leveraging iOS with Swift. In addition, knowing how to integrate with back-end services would certainly be helpful, in order to understand more about what Kinvey is doing under the hood. While all of this is helpful, the application’s full source is included; feel free to analyze the code at your own pace.
Secondly, because the demo application has more of an enterprise focus (as opposed to a consumer focus), I chose Kinvey2 for the MBaaS platform. In the last article3 I walked through the process of evaluating MBaaS providers. Note that Kinvey is not a free service, and licensing terms are attached to its SDKs (as one would expect). Licensing terms are included with each SDK download. You can get more information at the following links:
In the past three years, several clients have approached me about developing an internal messaging platform for their organization. This need has led to the success of such companies as Slack6 (which we use internally at Universal Mind7) and others like it. Because this was a common request, I wanted to see what it would take to implement a basic one-to-one messaging solution for an organization over top of an MBaaS solution.
To help you understand these concepts in a real application, I have provided the application’s entire source code. You can check it out on Github, “WaterCooler Demo8.”
To illustrate how an MBaaS solution can power an app like this one, we need to meet a few key requirements. Users should be able to do the following with the app:
create an account and set up their profile (including name, title, profile picture, email address and password);
log in (and be required to log in only once — at least until they log out);
exchange one-to-one messages with other members (visible only to the sender and recipient and inaccessible to other users);
browse a directory of members who currently have an account on the platform;
manage and update their profile information;
be alerted through a push notification that they’ve received a new message.
The following sections detail how I used Kinvey to meet these requirements. While I won’t go into detail on how every part of the application was created, I will give full context of the areas where Kinvey was leveraged.
The demo application is an iOS app targeting iOS 8+. It utilizes Swift (Xcode 6.1.1 and iOS 8.1.3).
The user interface was created following standard UI principles for iOS. It leverages Auto Layout12 (both within the storyboard and programmatically). The creation of this interface is beyond the scope of the article, but hopefully the example code will be helpful for your iOS applications.
Getting Started With Kinvey
If you’re following along, you’ll probably want to build the source code and run the application yourself. To do this, you will need both to create a Kinvey app and to include the credentials for the app in your code.
Creating a Kinvey App and Environment
To create a Kinvey app and environment, you will need to create a Kinvey account13. After signing up, select “Get Started with Your First App.” From this page, give your app a name, select iOS and the platform, and then click “Create App.”
From here, you will have an app created with a single development environment. Clicking on the “Development” environment will take you to the console. In the console, you will see both your appKey and appSecret in the top right. Copy these pieces of information because you’ll need to include them in the iOS app.
Configuring the iOS Application
Once you have created your Kinvey app and gathered your credentials, grab the code from the repository. Next, open the AppDelegate.swift file and update these values in the application:DidFinishLaunchingWithOptions: method.
// Extracted from AppDelegate.swift (http://tuck.cc/1w7wkyI)
func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool
// INCLUDE YOUR KINVEY CREDENTIALS HERE
let appKey = ""
let appSecret = ""
Once this is in place, you should be able to run the application as expected. If you want to run the application on a device, you will have to update the code signing as provisioning profiles (as with any iOS application).
For more information on setting up an iOS application with Kinvey, check out the “Getting Started16” tutorial.
One foundational element of any MBaaS is user management. This application will leverage user management to control individual user accounts and their respective profile information, as well as provide a directory of all users in the system. Just as with the rest of the functionality we will cover, this integration is provided through Kinvey’s iOS SDK17.
Creating a User
The first step in the process is to enable a user to create an account. When a user launches the application, they will land on the view that allows them to either log in or sign up. If the user selects “Sign Up,” they will be taken to the “Sign Up” page, which will guide them through the process of entering their profile information. When this process is complete, the code below is executed, which creates an account and logs the user into the application.
In this example, you will see the KCSUser class. This class handles the representation of a user and is also the gateway for all operations related to user management:
// Extracted from SignupViewController.swift (http://tuck.cc/1vsaWcr)
// Set the parameters of the user
var userParams = [
KCSUserAttributeGivenname : firstNameField.text,
KCSUserAttributeSurname : lastNameField.text,
KCSUserAttributeEmail : emailField.text,
kWaterCoolerUserTitleValue : titleField.text
// Save the user to Kinvey
KCSUser.userWithUsername(emailField.text, password: passwordField.text, fieldsAndValues: userParams) (user:KCSUser!, error:NSError!, result:KCSUserActionResult) in
if(error != nil)
println("USER NOT CREATED - ERROR: " + error.description)
// User created successfully
// Do other tasks, such as uploading profile picture to the file store
In this case, the fields for first name, last name and email address are include in the KCSUser object. However, Kinvey allows us to save other pieces of data in this object as well. The user’s title will be saved in one of these additional fields. An extension to the KCSUser object is also included (as seen below) to make it easier to access this value for a user within the application:
// Extracted from KinveyExtensions.swift (http://tuck.cc/1vsb5N7)
// Create a constant for accessing the title key from the user object
let kWaterCoolerUserTitleValue = "title"
return self.getValueForAttribute(kWaterCoolerUserTitleValue) as String!
If the user selects the option to log in from the landing page, they will be able to enter their email address and password (which they entered in the sign-up process). They are presented with an alert if their attempt is unsuccessful, and if they log in correctly, they are redirected to the main view of the application.
// Extracted from LandingPageViewController.swift (http://tuck.cc/1vsbeAe)
// Get the values from the form
let username = loginEmailField.text
let password = loginPasswordField.text
// Attempt to log in to the application
KCSUser.loginWithUsername(username, password: password) (user, error, actionResult) -> Void in
if(error == nil)
// Let the user know an error occurred in login. In this case
// we just present an alert using the UIAlertController.
let alert = UIAlertController(title: "Failed Login", message: error.localizedDescription, preferredStyle: UIAlertControllerStyle.Alert)
alert.addAction(UIAlertAction(title: "OK", style: UIAlertActionStyle.Cancel, handler: (alertAction) -> Void in
// Present the alert
presentViewController(alert, animated: true, completion: nil)
// There is already a segue defined to the main threads view.
// We need to perform this segue if we have a successful login.
performSegueWithIdentifier(WaterCoolerConstants.Segue.Login, sender: self)
From the profile management page, the user can log out of the application. Upon doing this, Kinvey’s iOS SDK also does some additional work in the background, including clearing out any cached values. In this example, after logging out, the user is redirected back to the landing page.
// Perform the log-out and send the user to landing page
@IBAction func logout()
performSegueWithIdentifier(WaterCoolerConstants.Segue.Logout, sender: self)
To fulfill all of our requirements, the application also needs to provide a list of all users. A special collection, KCSCollection.userCollection(), provides access to the collection of users for an application. Once you have created a store from this collection, you can query it as you would any other data collection. The following example illustrates how to fetch all users for the application:
// Extracted from KinveyDataManager.swift (http://tuck.cc/1vsd0Bp)
// Create the app data store corresponding to the users collection
lazy var userStore:KCSAppdataStore =
let userCollection:KCSCollection = KCSCollection.userCollection()
let store = KCSAppdataStore(collection: userCollection, options: nil)
// Fetch the users from the user store
func fetchUsers(completion: ([KCSUser]!, NSError!) -> ())
userStore.queryWithQuery(KCSQuery(), withCompletionBlock: (results, error) -> Void in
if(error == nil)
self.users = results as [KCSUser]
completion(results as [KCSUser]!, nil)
}, withProgressBlock: nil)
Note: For more information on managing users with Kinvey’s iOS SDK, be sure to check out the “Users20” guide.
One powerful feature of many MBaaS solutions is file storage. In our WaterCooler application, this comes into play when a user creates an account and adds a profile picture. We could also leverage this heavily to extend the app to support the uploading of images within messages. In this process, the file is uploaded to a content delivery network (CDN) and, like any other piece of data, has a full configuration of permissions.
// Extracted from SignupViewController.swift (http://tuck.cc/1vsaWcr)
// Upload the profile picture to the Kinvey file store
func uploadProfilePicture(completion:(file:KCSFile!) -> ())
if((self.photo.image) != nil)
let photoData = UIImageJPEGRepresentation(self.photo.image, 1.0)
KCSFileStore.uploadData(photoData, options: fileParams, completionBlock: (file:KCSFile!, error:NSError!) -> Void in
, progressBlock: nil);
// Once we have completed the file upload, assign the file ID to the user
// using a custom attribute
func assignProfilePictureIdToUser(user:KCSUser, picture:KCSFile, completion: () -> Void)
user.setValue(picture.kinveyObjectId(), forAttribute: kWaterCoolerUserProfilePicFileId);
user.saveWithCompletionBlock (user:[AnyObject]!, error:NSError!) -> Void in
In the code above, two distinct steps are occurring. First, we are uploading the profile picture to the file store. Once this process is completed, we are updating the user with the ID that the file store has returned. In this manner, we are leveraging yet another custom property on the user to store an identifying piece of information. Now, anywhere we display a list of users, we can also display their profile picture.
Note: For more information on working with files in Kinvey’s iOS SDK, see the “Files21” guide.
One of the benefits of Kinvey’s iOS SDK is that it allows you to map your Swift (or Objective-C) objects to Kinvey collection objects. The KCSUser class is a special class that is already defined and mapped to the user object, but in our case we will create two additional data classes that map to conversations and the messages within them.
WaterCooler Data Model
The WaterCooler data model will have two main entities, Message and MessageThread.
The MessageThread class will be responsible for representing a conversation between two users. It will contain information about the users involved in the conversation, as well as a reference to the last message sent in the conversation.
Within Kinvey, the entityId is a special field. If you do not assign a value to it, the system will assign one when the object is saved to the data store. In our case, we will go ahead and define a special value that maps to the two users who are in a conversation for the MessageThread class. The method that calculates this value can be seen below:
// Extracted from MessageThread.swift (http://tuck.cc/1w7jdOd)
// This method simply takes a user and the current user and creates
// an ID based on the alphabetized array of user IDs between these
// two users. In this way, we don't have to fetch additional information
// when displaying the message thread view.
class func threadIdentifierForUser(user:KCSUser) -> String
let userAIdentifier:String = KCSUser.activeUser().userId
let userBIdentifier:String = user.userId
let identifiers:[String] = [ userAIdentifier, userBIdentifier ]
let sortedIdentifiers = identifiers.sorted
$0.localizedCaseInsensitiveCompare($1) == NSComparisonResult.OrderedAscending
The Message class will be responsible for tracking an individual message within an overall conversation. This class contains information about the message, including its time, contents, sender and related message thread. To get all of the messages for a particular conversation, we simply query based on the threadId of the conversation. The following code fetches all of the messages for a predefined message thread:
// Extracted from KinveyDataManager.swift (http://tuck.cc/1vsd0Bp)
func messagesForThread(thread:MessageThread, completion:([Message]) -> ())
let query = KCSQuery(onField: "threadId", withExactMatchForValue: thread.entityId)
messagesStore.queryWithQuery(query, withCompletionBlock: (results, error) -> Void in
completion(results as [Message])
, withProgressBlock: nil)
Data Model Relationships
Kinvey supports data model relationships within both the core data store as well as the iOS SDK. In our situation, the lastMessage property on the MessageThread class is one such instance. When we fetch a thread, it looks at specific methods in our class to determine how it should handle references to other collection objects. In our case, the following methods allow it to treat this reference as a Message instance:
// Extracted from MessageThread.swift (http://tuck.cc/1w7jdOd)
// This method tells Kinvey to save the message in the lastMessage property
// when the thread is saved. If this method were not included, the message
// itself would not be saved when the thread is saved.
override func referenceKinveyPropertiesOfObjectsToSave() -> [AnyObject]!
// This maps the properties in the class to specific values in the Kinvey
// data store.
override func hostToKinveyPropertyMapping() -> [NSObject : AnyObject]!
"entityId" : KCSEntityKeyId,
"lastMessage" : "lastMessage",
"metadata" : KCSEntityKeyMetadata
// This method tells Kinvey that the lastMessage property is a member of
// the Messages collection. (You need to put the name of the Kinvey collection
// here and not the name of the class.)
override class func kinveyPropertyToCollectionMapping() -> [NSObject : AnyObject]!
"lastMessage" : "Messages"
// Here you tell Kinvey which class to map the lastMessage property to. This
// is how it knows how to build the object when it fetches it from the server.
override class func kinveyObjectBuilderOptions() -> [NSObject : AnyObject]!
let referenceMap:[NSObject : AnyObject] = [
"lastMessage" : Message.self
KCS_REFERENCE_MAP_KEY : referenceMap
Data Model Classes in Swift
For data model classes to work properly in Swift, they need to be able to leverage the default initializer. This means you need to have a default value for each property within the class. You can still leverage convenience initializers, as we have done here with the Message class:
// Extracted from Message.swift (http://tuck.cc/1w7kkgB)
// This initializer creates a Message instance based on the message text
// and the recipient ID. This is the initializer that is used when a
// user creates a new message in a conversation.
senderId = KCSUser.activeUser().userId
self.messageText = messageText
entityId = NSUUID().UUIDString
metadata = KCSMetadata(userIds: [recipientId], includeActiveUser:true)
Note: For more information on the data store and data modeling in Kinvey, see the “Data Store22” guide.
Through this process, we have completed the core of Kinvey interactions for the application. However, with all of this in place, two key requirements still have not been met: data permissions and push notifications. In the next article, we will explore the permissions model in Kinvey, as well as the business logic functionality provided by the platform.
Mobile application ecosystems — let’s count Android and iOS here — are unbelievably dynamic, but they also suffer from both software and hardware fragmentation. This is especially true for Android, but fragmentation also exists in the iOS ecosystem1, as experienced with the rollout of iOS 8. As the latest version of iOS was released, many existing apps were made clumsy on updated devices.
Even the new iPhone 6 and iPhone 6 Plus have had not-so-typical issues2 for Apple devices. In addition, a significant proportion of users with older devices have very few options: essentially, buy new hardware (i.e. a new device) to get everything working well.
In the Android world, things are different. As OEMs launch new devices, software updates and customizations for their devices, application and game developers get serious headaches3 trying to keep their latest products up to snuff and fully compatible with all possible device variants. Making a certain app or game work only on high-end devices is out of the question, though. Why would a developer want to miss out on a significant chunk of potential users?
Professional automated testing software is a solution to a common problem: how to produce high-quality, robust and reliable software with the ever-growing complexity of technology and under massive competitive pressure. Automated software testing is a cost-effective solution to this problem. Not to mention, it provides three business benefits:
increased testing efficiency,
increased testing effectiveness,
faster time to market.
This article walks through a sample use case for test automation and provides a downloadable example to get you started. Also, we’ll focus on different aspects of mobile test automation and explain how this relatively new yet popular topic can help mobile app and game developers to build better, more robust products for consumers. With the advanced example later in the article, we’ll show how image recognition can be used to test mobile games; specifically, we’ll run Appium’s test automation7 framework against Supercell’s Clash of Clan8 game to illustrate how image recognition can be built into the test-automation process.
Test Automation Is Perfect For Mobile App Development
Developing mobile applications is very different from developing PC software or even embedded software. Mobile development is meant to be agile9, and a lot of great tools and practices have been developed for that agility. However, doing something manually — such as testing an app — is never agile, which is why test automation has shown tremendous growth among app and game developers, speeding up their doings and yielding robust and better results.
To achieve compatibility between users, devices and the market, including test automation as a part of the agile development process10 is typical. Fortunately, a lot of tools are available, and test automation is a perfect fit for this process. For example, let’s say your typical development sprint is two weeks. You have daily standups and a lot of scrum activities, and you own internal policies that gear development to the final product. Test automation offers a significant value-add by enabling testing to be done in parallel — for example, as nightly test sessions. By the next morning, the tests will have been finalized and the results of the latest regression will be ready for review. Fixing an issue earlier will save a lot of time and get developers to finalize the product sooner; most importantly, it cumulates to better quality11, with fewer bugs.
Test automation offers the possibility to test mobile apps instantly and effectively. Once tests have been automated, they can be executed quickly and repeatedly, again and again. In almost all cases, this is the most cost-effective method for regression testing15 of software products that have a long maintenance life. In fact, test automation of any mobile app is the best way to increase the effectiveness, efficiency and coverage of the testing process. The true benefit of automation comes not only from the repeatability of tests, but also from the ability to execute tests that probably could not even be performed manually.
Things To Consider When Automating Mobile App Testing
Let’s look at how test automation (as opposed to manual testing) can improve the development process, add value and speed up development.
Costs and Assets
Regardless of whether you go for manual or automated testing, you’ll need the following assets and resources (all of which cost money): time, people, infrastructure, tools and training. Depending on the size of the project and the application, test automation will quite obviously provide a good return on investment. For example, once test cases have been created, automated tests can be run over and over again at no additional cost, and these can be more rapidly completed than any manual tests. Automated software testing can reduce the time required to run repetitive tests from weeks to hours. This is a significant time-saving that translates directly into cost-saving.
Integrated App Development And Testing Cycle
Increasing efficiency and productivity with automation actually starts with adopting a new mindset. Software tests have to be repeated often during all development cycles to ensure the best possible quality of an application. Every time source code is modified19, software tests should be repeated. For each release, your software should be tested on all supported variants of operating systems and all configurations of hardware. Manually repeating these tests would be costly and time-consuming. For example, running comprehensive tests manually on all variants of Android and on actual devices would take a lot of time.
Tools and Technology: Test Automation Frameworks
To get the most out of your efforts and maximize testing coverage, select the most robust and most cross-platform20 method. That automated methods can be used both to validate requirements and to reduce costs through automated test-case generation is well known. However, the full automatization of large software entities also comes with a cost that many companies haven’t been ready to pay for. Historically, one of the reasons has been a concern over the lack of adequate integration with well-established development life cycles.
Test Coverage and Reusability: Open Standards Mean No Vendor Lock-In
Automated testing can increase the depth and scope of tests and significantly improve software quality. Lengthy and thorough tests — often not doable with manual testing — can be run automatically. Ideally, test cases should have full access to an application and test all aspects of it21 — memory contents, data tables, file contents and internal program states — to determine whether the product behaves as expected. Automated tests can easily execute thousands of complex test cases during every test run, providing coverage that is simply not possible with manual testing. Developers, freed from repetitive manual tests, will have more time to create new automated test cases and build more compelling features (and then more test cases).
Improve Effectiveness and Finalize Sooner
In a nutshell, professional automated testing software is a solution to a common problem: how to produce high-quality, robust and reliable software with the ever-growing complexity of technology and under massive competitive pressure. Automated testing improves business results in three ways: greater testing efficiency, greater testing effectiveness and a shorter time to market.
Different Ways to Automate Mobile Testing
In general, there are three ways to automate the testing of mobile apps.
Handwritten Test Scripts
Typically, this is the best choice when you know what you’re doing and when you have programming-capable people doing the test scripts. Plenty of options are available for test automation frameworks, tools and integration — both commercial and open-source offerings. Having your engineers write all of the test scripts will take up some time and tie up resources, but it will get you exactly what you want: well-structured, thorough scripts that test precisely the aspects of your app that you want to test.
This approach is less error-prone because nothing needs to be written in code, but it is typically more limited in functionality. Tests can be quickly recorded and then played back again and again against different OS versions and device configurations. These tests focus on user interactions and user-driven activities. Some things might fall beyond a test’s scope (such as integration with other technologies and compatibility with other software).
Automatic Test Exercisers
Automatic test exercisers provide a great way to smoke-test applications. No specific tests are needed; rather, the focus is on testing user-interface logic (such as opening menus, clicking buttons, swiping and multi-gesture actions). Automatic test exercisers yield the least exact results but provide quick feedback on each iteration of an app.
Focus Areas In Testing For Mobile Apps And Games
User Interface and Functionality
A user interface and its overall functionality will directly affect how successful your app or game30 will be. These two things, which encompass visual appeal and gameplay, are the most important things to get right — and you must ensure that device fragmentation doesn’t break any of these. Various things in the UI need to be tested:
UI layouts and elements
Games especially are typically targeted at a high number of different screen resolutions and screen types. Regression testing should be done each and every time the UI’s layout changes to ensure that the game works.
Menu structure and functions
Testing menu structures, functionality and behavior can be automated with instrumentation and the help of different test-automation frameworks.
Surprisingly, so many apps and games out there get this wrong. If a screen’s orientation changes during an interaction, for example, what happens? What is supposed to happen? Does the app or game work well in both landscape and portrait modes?
A lot of screen resolutions exist, especially on Android, and auto-scaling will usually help developers. However, test your game across these resolutions to ensure that the graphics do not stretch.
Performance needs to be consistent across all device variants31 among your users. Because of this, test on as many real devices as possible. To determine how well your app or game responds to various levels of usage, including performance and battery usage, consider creating tests that last for hours. To determine whether your game runs effectively under a heavy load for a long time, run load (or stress) tests. These performance tests will measure, for example, how responsive your game is on real devices.
Usability and User Experience (i.e. Good Entertainment)
Testing usability, navigation flow and user experience simply cannot be done on a desktop with a mouse and keyboard. So, forget emulators and use only real devices35. And to test how usable and entertaining your app is, consider these two important things:
User interaction and responsiveness
Testing performance is critical because this will make make or break the user experience. Performance lag, for example, is easy to expose with real devices.
Interruptions, battery consumption and the effect of battery chargers on overall performance and usage all have a significant impact on the user experience — and entertainment value.
Nowadays, multi-user support is common in both apps and games. Testing multi-player capabilities is important and is naturally more challenging, requiring real users to measure performance. A typical case is a game communicating with the back-end server. In this case, connectivity is essential, to synchronize the back end with devices that need to get information about the gameplay. You should test a ton of different scenarios, many of which could severely affect the game’s experience, resulting in negative feedback and the game being uninstalled by users.
Integration with social networks is another important factor. Being able to share something across an ecosystem, with friends or just with oneself, is essential in many apps. Test this thoroughly with real Android and iOS devices, with different OS versions and different device configurations, to assess functionality and ease of use.
Security and Liabilities
Nearly all developers use some open-source components in their apps. This practice is widely accepted and highly recommended because it offloads the development of code for non-core functionality. However, identifying vulnerabilities and licensing restrictions with third-party code is often neglected by developers.
Breakdown: Android Test Automation Frameworks
Robotium42 is an Android test automation framework that fully supports native and hybrid applications. Robotium makes it easy to write powerful and robust automatic black-box UI tests for Android applications. With the support of Robotium, test case developers can write function, system and user acceptance test scenarios, spanning multiple Android activities.
UIautomator5143, by Google, provides an efficient way to test UIs. It creates automated functional test cases that can be executed against apps on real Android devices and emulators. It includes a viewer, which is a GUI tool to scan and analyze the UI components of an Android app.
Espresso44, by Google, is a pretty new test automation framework that got open-sourced just last year, making it available for developers and testers to hammer out their UIs. Espresso has an API that is small, predictable, easy to learn and built on top of the Android instrumentation framework45. You can quickly write concise and reliable Android UI tests with it.
Calabash46 is a cross-platform test automation framework for Android and iOS native and hybrid applications. Calabash’s easy-to-understand syntax enables even non-technical people to create and execute automated acceptance tests for apps on both of these mobile platforms.
And then there’s Appium. OK, let’s get into this one.
Appium: Executing Tests On Real Devices On A Cloud Service
In its architecture, Appium is an HTTP server written in Node.js that creates and handles multiple WebDriver sessions. Appium starts tests on the device and listens for commands from the main Appium server. It is almost the same as the Selenium server that gets HTTP requests from Selenium client libraries.
Appium enables users to execute tests on mobile devices regardless of OS. This is possible because the Appium framework is basically a wrapper that translates Selenium’s WebDriver commands to UIAutomation50 (iOS), UIautomator5143 (Android, API level 17 or higher) or Selendroid52 (Android, API level 16 or lower) commands, depending on the device’s type.
For Android, this is how Appium compares to other test automation frameworks:
One of the best things about Appium is that, despite sounding architecturally complex, it actually isn’t — at all. For developers, it provides support for various programming languages, freedom from having to select tools, compatibility across the most important platforms (Android and iOS), freedom from having to install and configure devices to test and more.
If you are familiar with Selenium, then you’ve got Appium covered. An Appium test is pretty much the same as a Selenium test: They use the same WebDriver, and DesiredCapabilities59 is used the same way. Configuring an application to run on Appium has a lot of similarities to Selenium — for example, those DesiredCapabilities. We’ll configure a sample test later in this article.
Also, Appium includes a component called the inspector. This inspector enables a host of functionality — for example, showing all of those UI elements in the application and enabling basic recording and playback.
However, you may not need the inspector because everything can be done in the code. The example later provides all of the scripts and instructions step by step, without using it.
If you’re on Linux, install pip if it’s not already:
$ sudo apt-get install python-pip
Install the Selenium module for Python:
$ sudo pip install selenium
Verify that Selenium is installed:
$ pip freeze | grep -i selenium
Ensure that Python 2.7.x or later is installed:
$ python --version
If it’s not installed, download and run the setup from Python’s download center64. To add Python environment variables, go to “System properties” → “Advanced System Settings” → “Environment Variables” → “System Variables” → “Edit Path,” and then insert C:Python27;C:Python27Scripts at the end (assuming you have installed Python in the default location). Make sure to restart the command prompt to bring new environment variables into effect.
Check whether Python’s pip module is already installed:
appium_example_android.py (for Android API level 17 and above)
appium_example_selendroid.py (for Android API level 16 and below)
Step 1: Create Account and Upload the APK
Create an account.66 Note that this service provides a freemium option, and you don’t need a plan to complete these examples using real devices on a cloud service. If you want to access hundreds of device models, then different plans are available.
Before proceeding with running the test script, you’ll need to upload the APK or IPA to Testdroid’s cloud service via HTTP POST. Let’s try that using cURL.
Open the test script, appium_sample_ios.py, in any text editor. Set screenshotDir to the path where you want those screenshots to be saved on your machine. Set your credentials on testdroid_username and testdroid_password in DesiredCapabilities. Set the myAppFile identifier against testdroid_app in DesiredCapabilities. It should look like this:
The screenshots will be available locally on your machine in the directory that you specified in step 2. Log into your cloud service and navigate to the project’s name, as defined in the _project attribute of DesiredCapabilities, to access the following log files:
Appium’s server log,
Logcat and instruments log.
Advanced Example: Using Appium For Mobile Game Testing With Image Recognition
In this example, We’re using Supercell’s popular mobile game Clash of Clans. It’s a fantastic game and I’ll bet many of you have played it, so you should be pretty familiar with its look and gameplay. This example does basic clicks through the game’s tutorial.
## Example script that tests Clash of Clans tutorial first steps
## Works on different resolutions, both iOS and Android
from time import sleep
from AppiumCloudTest import AppiumCloudTest, log
from selenium.common.exceptions import WebDriverException
# AppiumCloudTest takes settings from environment variables
driver = self.get_driver() # Initialize Appium connection to device
sleep(10) # Wait for game to load
# Use this to get detected screen hierarchy
# print self.driver.page_source
# Dismiss the in-app purchases dialog if it shows
okayButton = None
okayButton = driver.find_element_by_id('button3')
log("There was no in-app purchases dialog")
else: # iOS
self.driver.implicitly_wait(5) # Wait only 5 seconds to find it
okayButton = driver.find_element_by_accessibility_id('Okay')
# No need to sleep here
log("There was no in-app purchases dialog")
# Cancel iOS Game Center login
cancelButton = driver.find_element_by_accessibility_id('Cancel')
log("Cancelling iOS Game Center login…")
log("The Game Center login was not displayed")
# Check that a goldmine is on screen
rect = self.find_image("queryimages/tutorial_goldmine.png",
"There should be a goldmine on screen at beginning of tutorial")
log('Gold mine found at %s %s! Continuing…' % (rect, rect))
# Dismiss the bubbles
sleep(2) # second blabla
sleep(2) # Goblin appears
# Go to shop
# NOTE: tap_image does also assert, fails test if target not recognized
# Buy cannon
# Place the cannon
# Use gem to finish right away
# Bring it on!
# To be continued…
if __name__ == '__main__':
Let’s look some of the stages in this test script. The test_tutorial contains the following steps:
It first figures out whether the test executes on Android (self.isAndroid()) or iOS. As you can see, it looks for UI content differently. On Android, it tries to find a button by using an element’s ID (element_name) and on iOS by using an accessibility ID with a description (“Okay”). The same check happens for iOS’ Game Center login.
Screenshots are taken at various steps and stored in files entered as a parameter in a function call.
A check is done to see whether “goldmine” appears on screen by comparing two PNG files using a self.find_image call. If these pictures match (i.e. “goldmine” appears on screen), then the script continues executing the game’s tutorial.
The tutorial proceeds with the following steps:
Go to shop.
Place the cannon.
The information about all three of these items is stored in those PNG files: shopbutton.png, cannon.png and place_the_cannon.png.
Finally, the tutorial finishes and the battle starts. After the battle, the application is closed.
The video below shows how the test executes at each step. For the video, I’ve used three devices: one iOS (iPhone 4S) and two Android phones (Samsung Galaxy S3 Mini and HTC One X). You can also watch the video on YouTube70.
How Is Image Recognition Used Here?
The example shown uses image recognition (i.e. template matching71) to identify which features — basically, pixels and graphic content — are shown on screen and to compare the two pictures to each other. The algorithm built to recognize images was used on real devices and on two different platforms (Android and iOS), and it used a single test script for both platforms. This sort of image comparison is even very handy for recognizing UI elements and graphics that are resized and/or rotated.
Let’s say the template image has some distinctive features, such as text that can be easily abstracted from the background content. In this case, feature-based recognition can be used. In our example, if the “Button” text has been resized or rotated (or otherwise transformed), we can quickly and easily identify this and take further action.
The following functions explain the approach of comparing images:
def tap_image(self, query_image,
width_modifier=0.5, height_modifier=0.5, retries=2):
retries_left = retries
rect = None
while retries_left > 0 and not rect:
rect = self.find_image(query_image)
retries_left = retries_left - 1
image_name = os.path.split(query_image)
self.assertIsNotNone(rect, "Image %s is on screen" % image_name)
x = rect+rect*width_modifier
y = rect+rect*height_modifier
log('%s button found at %s %s (%sx%s), tapping at %s %s' %
(image_name, rect, rect, rect, rect, x, y))
def tap(self, x, y):
log('Tapping at %s,%s' % (x,y))
driver = self.get_driver()
touch_actions = TouchActions(driver)
action = TouchAction(driver)
else: # iOS
action = TouchAction(driver)
# TODO: Temporary hack
# On iPhone 4S = res. 480 x 320 for taps but screenshots are 960 x 640
Testing is crucial to ensuring success in the highly competitive landscape of mobile apps and games72. But even poorly planned testing can take up 20 to 50% of your total development effort, in which case it would also account for the single biggest cost in your budget. To ensure that testing is extremely efficient, covering the breadth of today’s mobile ecosystems and device models, the best option is an online cloud-based service.
If you only start thinking about testing a few days before the app hits the market, it’s too late. You’ll need to test a wealth of elements, data and functionality from day one. Here are some things to consider in making testing a part of your development process:
Plan carefully: Automate generic processes as much as possible.
When you’re building a mobile app, a well thought out strategy is critical, a great user experience and design are paramount, and solid development and testing are fundamental. Many aspects of testing can be automated, and this automation will increase the depth and scope of your testing and significantly improve the app’s quality. Ideally, test cases should have full access to the application and test all aspects of it — memory contents, data tables, file contents and internal program states — to determine whether the product performs as expected.
Your app will change during development: The same goes for testing.
Choose a testing technology and provider you can grow with.
If you already have an app on the market and are looking to create a similar one, then select a technology74 and vendor that meet your needs. For example, building your test cases according to a certain method or framework will enable you to reuse those test cases for your new application — at least to some extent. So, choose a technology and vendor that is able to handle your needs as your product scales up and as your testing has to cover new geographical areas and even support new platforms (for example, going from Android to iOS).
Test automation is available 24/7.
Automation will reduce the time it takes to test new features and even the app itself by running 24/7.
Use a cloud-based platform for truly global reach.
With an online cloud-based service, you’ll get instant access to hundreds of real Android devices75. Especially with Android, having access to devices that are used in volume holds significant value. Running automated tests on these devices is easy and fast and provides all of the information you’ll need, preprocessed, summarized and in full detail.
What are your thoughts on test automation for mobile? Please let us know in the comments section!
The split testing campaign I am going to talk about in today’s case study was named the “crazy minimal homepage” campaign. The change was no less crazy; the company decided to wipe off their entire homepage and show just the sign-up form.
TheHOTH is a white label SEO service company. They provide link building services for agencies and SEO re-sellers. On their website’s original homepage, they have a video & a sign-up form (above the fold), customer logos, testimonials as well as other necessary and good-to-have elements.
Here is how their original homepage looks:
TheHOTH was getting a decent amount of traffic on their homepage but their conversions were pretty low. They tested their headline and added / removed some page elements among other changes. But nothing brought them significant results.
They decided to dig some data to understand about the people who were signing up for an account. The analysis showed them that most of their sign-ups were coming from referrals, word-of-mouth and direct search.
The test hypothesis was that eliminating everything from the homepage and keeping just the sign-up form on the page would increase conversion of visitors to account sign-ups. They wanted to test this, as a substantial portion of visitors coming to their website were already familiar with the brand.
The company setup a split test with VWO and the traffic was split between 2 versions of the homepage: the original and the minimal homepage with only the sign-up form. The test ran for 30 days and close to 3000 visitors became a part of the test.
Here is how the variation page looks:
The minimal homepage increased account signups for TheHOTH from 1.39% to 13.13%. Needless to say, this was a home run for them.
Why The Minimal Homepage Worked
Broadly traffic coming to a website can be divided into 5 mediums: direct, search, social, referral and paid.
Majority of visitors coming on TheHOTH website were from the direct and referral category. Hence, they had some background knowledge of the company already. This was also true for the social traffic. A very large portion of their search traffic also came from branded keywords (see data from Alexa below). Hence, visitors of the website had a certain level of trust in the brand already. Probably to learn more about the offering the visitors signed up for an account since no information about the service was present on the landing page.
The clutter free-design focused solely on one thing and that was signing up for an account.
The sign-up form on the original page is in a dark shade of red and is on top of a red background which prevents it from getting much attention. The second CTA to sign-up for an account at the end of the page also doesn’t have any contrast compared to the red tile in the background.
You can read more about how color psychology affects conversions here.
Challenges with a Minimal Homepage
1) Quality of Leads
A major challenge with having such a design is that many people will enter in to understand the product or service and may later realize that it is not a good fit for them.
Alternatively, this would give the company a lot of leads to educate and convince about the product / service.
Clayton at TheHOTH (who setup this test) explained that they are also concerned about the quality of leads that would enter the system unaware or less aware of the service. They’re solving this by adding more information after signup, reaching out to customers via phone & email, and implementing an educational auto-responder to deliver value to their signups.
2) Additional Pressure on Sales
More number of less quality leads would put an additional level of pressure on the sales department. They would have a hard time differentiating between the already motivated leads and those who entered just to understand the offering.
3) Low Trust
Since there is nothing except the sign-up form on the variation page, users have no way of finding out more about the company. This could lead to low trust.
It would be interesting to see the results of the test with a third variation that has the sign-up form on the left and a testimonial on the right hand side. (something like below)
This was one interesting usage of VWO that came our way. I would really be interested in knowing your thoughts on why the crazy minimal homepage worked. And what do you think about it in general? Looking forward to hear from you in the comments section!