Menu Search
Jump to the content X X
Smashing Conf New York

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

How To Improve Conversions By Localizing An App: A Case Study On “Paper”

When your design looks beautiful and polished, how do you know if it performs well? While it is easy to predict the appeal of a clean and simple UI, design that converts is always a shot in the dark for marketers and designers.

We worked with the team at FiftyThree to test their app store landing page before they launched ads in China. After tweaking background color, graphics, screenshot order, and localization, we achieved a 33% increase in app page conversion. In this article, I’ll share some ideas about app page design. I’ll also argue that dropping your assumptions and testing is the only way to find content that not only looks and reads great but also helps your bottom line.

How To Improve Conversions By Localizing An App1

App Store and Google Play A/B testing. (View large version2)

Converting Design: Creative Meets Analytical Link

The Paper app by FiftyThree is one of those ultimate digital notebooks. You can write notes, import photos, create checklists, and sketch. When working with the design team at FiftyThree, we noticed how deeply they care about the minimalist design aesthetic and how much they invest in creating experiences that delight users with simplicity and elegance.

Further Reading on SmashingMag:

But that aside, how do you design app pages to bring more downloads? What do you put on your icon and screenshots to make people choose your app over hundreds of others in app store search results? It’s a neurogame we haven’t deciphered yet (although I did make some assumptions already6). The only way to know is to test. When the FiftyThree team turned to us to run some experiments on their app page, we had a few questions to answer:

  1. How will the audience react to a different background color?
  2. Which order of screenshots will bring better conversion?
  3. Will the Chinese localization on screenshot captions bring more installs?

The conclusions and tips below are my inferences drawn from the data in multiple tests and combinations we tried (different localization, graphics, and background color in each set of experiments). The app pages were tested on 2,600 users over the course of 30 days. While the sample is not large enough to give any general recommendations on design, below are some ideas you can take away from the tests.

  1. Different background color in each screenshot brought maximum interaction.
  2. Order, sequencing and sophisticated details in graphics are useless in designing for better conversion; put the brightest and the most eye-catching imagery first.
  3. Localize your app and speak in the language your target audience understands best. (Sometimes, it may not be very obvious, as I will discuss further in the case with English and Dutch in the Netherlands.)
  4. Most importantly, drop all assumptions, design with a beginner’s mind, and then test.

Play With Colors For Better Scroll Rate Link

Color in design is a matter of cultural and personal preference (Cameron Chapman wrote a good article about it7). Color invokes emotions; it can establish trust in your brand and persuade consumers to commit to a purchase. Some even judge a product based on the color combinations alone. We created a couple of experiments with different graphics to find the winning color combination for screenshot backgrounds. After running several tests, we saw a clear winner here.

app store and google play ab testing screenshots and icons8

App Store and Google Play A/B testing – screenshot set 1. (View large version9)
app store and google play ab testing screenshots and icons10

App Store and Google Play A/B testing – screenshot set 2. (View large version11)
app store and google play ab testing screenshots and icons12

App Store and Google Play A/B testing – screenshot set 3. (View large version13)

Monochromic subdued blue and the chocolaty, natural brown (screenshot sets 2 and 3) performed worse than the mix of colors on the first alternative (screenshot set 1). The scroll rate for screenshots of different colors was higher – people spent more time interacting with the screen and looking at each image. Interestingly, after viewing the screenshots with different colors, users were also more likely to click “Read more” and scroll down to read the description.

Forget Sequencing And Order Link

You only have a couple of seconds to convince users to get your app. It makes sense to focus on putting your best shots forward instead of trying to create a logical sequence (Melanie Haselmayr did an excellent job explaining this in a Smashing Magazine article on app store optimization14). Obviously, the first screenshot should be your top priority in the overall app page design. In our case, the second screenshot got the spotlight and, as it turned out, for a good reason.

app store and google play ab testing screenshots and icons15

App Store and Google Play A/B testing – screenshot set 4. (View large version16)
app store and google play ab testing screenshots and icons17

App Store and Google Play A/B testing – screenshot set 5. (View large version18)

The first combination (screenshot set 4) pushed the screenshot with a darker background and a highlighted detail on a sketch to the second screen. The second combination (screenshot set 5) had the same screen at the fourth position, making room for the graph to take the runner-up position.

The second variation with a bright orange background and a pop of color on the graph brought 17% more installs. I don’t think people engaged more with the second option because they like graphs better than sketches. It seems more likely that the second variation is just lighter, brighter, and more eye-catching overall.

Localize For Language-Culture Fit Link

The best way to penetrate a foreign market is to speak their language. Localization can grow your international audience and expand the revenue funnel. It’s also costly; you need to hire a professional translator and maybe even consider a new design for the culture fit. Localization isn’t necessarily a guarantee to getting more installs; for example, in one of our other experiments we did in the Netherlands, we saw no difference in conversion for Dutch and English variations. However, in the case of FiftyThree and the Chinese market, the effort was well worth the investment.

app store and google play ab testing screenshots and icons19

App Store and Google Play A/B testing – screenshot set 6. (View large version20)
app store and google play ab testing screenshots and icons21

App Store and Google Play A/B testing – screenshot set 7. (View large version22)

The localized version performed 33% better. Rachel Romano, head of global PR and communications at FiftyThree, commented: “Localization in any country is ideal to make sure it fits within their cultural norms and mores, but in China it’s particularly critical and I absolutely recommend it.”

Localization can lift your store rankings for another good reason: it lets you include localized keywords with every new language version, so more users can discover your store listing by searching. If you’re thinking about expanding your app’s reach with localization, I recommend starting with your download stats dashboard in the Developer Console on Google Play or iTunes Connect for iOS apps. Check which foreign market is already showing increased demand, and then go from there.

Drop Assumptions And Start Testing Link

While we hear a lot about the principles of good design, less is known about how to design for maximum conversion. Are there any rules, or is it a gamble? How do you figure out if certain graphics and colors will perform well – especially in foreign markets?

We tested different variations to see how the choice of background color, screenshot order, and localization impacts the conversion rate for Paper app in China. Based on my inferences drawn from the test report data, I offered some tips that you can apply to your own projects.

The reality is that nobody knows for sure how to design for maximum conversion. What worked in one project will not23 necessarily24 work in another25. What you can do is test everything: whether it is a different background color for each screenshot (worked in our case) or simply rearranging your current visuals on the page. Localization helps you build your audience, and a good place to start is your analytics dashboard to see where the traffic is coming from. Design optimization is a dicey game, so roll with it and have fun testing.

What’s your experience with optimizing app pages for better conversion? Share in the comments!

(da, jb, og, ml)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/wp-content/uploads/2016/03/01_sm_splitmetrics_fiftythree_abtesting-opt.jpg
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2016/03/01_sm_splitmetrics_fiftythree_abtesting-opt.jpg
  3. 3 https://www.smashingmagazine.com/2014/12/how-to-conduct-website-localization/
  4. 4 https://www.smashingmagazine.com/2010/11/multivariate-testing-in-action-five-simple-steps-to-increase-conversion-rates/
  5. 5 https://www.smashingmagazine.com/2016/09/boosting-conversion-rates-with-psychologically-validated-principles/
  6. 6 http://www.smashingmagazine.com/2015/08/ab-testing-taught-app-store-optimization/
  7. 7 http://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/03/02_sm_fiftythree_screenshots_abtest-opt.jpg
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/03/02_sm_fiftythree_screenshots_abtest-opt.jpg
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/03/03_sm_fiftythree_screenshots_green_abtest-opt.jpg
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/03/03_sm_fiftythree_screenshots_green_abtest-opt.jpg
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/03/04_sm_fiftythree_screenshots_brown_abtest-opt.jpg
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/03/04_sm_fiftythree_screenshots_brown_abtest-opt.jpg
  14. 14 http://www.smashingmagazine.com/2015/03/create-effective-app-screenshots-for-app-page/
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/03/05_sm_fiftythree_screenshots_abtest-opt.jpg
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/03/05_sm_fiftythree_screenshots_abtest-opt.jpg
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/03/06_sm_fiftythree_screenshots_abtest-opt.jpg
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/03/06_sm_fiftythree_screenshots_abtest-opt.jpg
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/03/07_sm_fiftythree_screenshots_abtest-opt.jpg
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/03/07_sm_fiftythree_screenshots_abtest-opt.jpg
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/03/08_sm_fiftythree_screenshots_abtest-opt.jpg
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/03/08_sm_fiftythree_screenshots_abtest-opt.jpg
  23. 23 https://twitter.com/thijs/status/695140901186830336
  24. 24 https://twitter.com/thijs/status/695154882437890049
  25. 25 https://twitter.com/thijs/status/695158927265243137

↑ Back to top Tweet itShare on Facebook

Anya is a marketer based in San Francisco Bay Area. With half a decade of experience in digital marketing, she has worked in mobile app advertising and SaaS. Anya consults startups on growth and content strategy. You can follow her on Twitter @pratsaa

  1. 1

    Sigh, sometimes when I see articles like this in Smashing Magazine I start to question the validity of everything I’ve read so far.

    — Different Background Colour Test
    Wow great analysis there on noticing that muddy poopy brown and dull gray won’t stand up as well for drawing app

    — Put the brightest and the most eye-catching imagery first
    And a bear shits in the woods

    — Localize your app
    Well congratufuckinglations, given most dutch speak English but most Chinese don’t

    — drop all assumptions & start testing
    This is exactly what a person with no practical industry experience would say.

    A/B testing has it’s place, but this article omits so many key factors (e.g. sample size, other potential external factors) that it’s mind boggling it ever got published

    A poorly uninformative article by a sophomore writer with a clear lack of experience.

    0
    • 2

      Anna Pratskevich

      March 23, 2016 5:05 pm

      Thanks for your feedback, Alex! As I mentioned in the article, the sample is not large enough to give any general recommendations on design, and that wasn’t my goal. It’s a real case study based on our client’s experiments and data. As you’ve accurately observed, it’s a lighter piece meant to share a/b testing ideas and hopefully spark some discussion. I’d love to hear about your experience with a/b testing here or at anyapratskevich at gmail dot com.

      0
  2. 3

    James Hughes

    March 14, 2016 6:47 pm

    Hi Anna, I think what you said in this article is true. Even though you haven’t deciphered it yet, your inference is closer to reality. People focus on visuals, the more eye-catchy an app is the more likely it is downloaded. But of course, it doesn’t guarantee it will remain installed by the user, its usability is another factor to consider.

    0
  3. 4

    Hi, Anna! Could you recommend any app localization tools? I’ve heard that the platform POEditor is good for simplifying the localization management processs and for collaborative translation of strings, but I’d like to look into a few more options before making a choice on what to use.

    Best wishes

    0

↑ Back to top