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

We use ad-blockers as well, you know. 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. upcoming SmashingConf Barcelona, 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.

App store and google play ab testing screenshots and icons1
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.

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 already3). 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 it4). 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 icons5
App Store and Google Play A/B testing – screenshot set 1. (View large version6)
app store and google play ab testing screenshots and icons7
App Store and Google Play A/B testing – screenshot set 2. (View large version8)
app store and google play ab testing screenshots and icons9
App Store and Google Play A/B testing – screenshot set 3. (View large version10)

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 optimization11). 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 icons12
App Store and Google Play A/B testing – screenshot set 4. (View large version13)
app store and google play ab testing screenshots and icons14
App Store and Google Play A/B testing – screenshot set 5. (View large version15)

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 icons16
App Store and Google Play A/B testing – screenshot set 6. (View large version17)
app store and google play ab testing screenshots and icons18
App Store and Google Play A/B testing – screenshot set 7. (View large version19)

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 not20 necessarily21 work in another22. 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 http://www.smashingmagazine.com/2015/08/ab-testing-taught-app-store-optimization/
  4. 4 http://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/03/02_sm_fiftythree_screenshots_abtest-opt.jpg
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/03/02_sm_fiftythree_screenshots_abtest-opt.jpg
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/03/03_sm_fiftythree_screenshots_green_abtest-opt.jpg
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/03/03_sm_fiftythree_screenshots_green_abtest-opt.jpg
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/03/04_sm_fiftythree_screenshots_brown_abtest-opt.jpg
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/03/04_sm_fiftythree_screenshots_brown_abtest-opt.jpg
  11. 11 http://www.smashingmagazine.com/2015/03/create-effective-app-screenshots-for-app-page/
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/03/05_sm_fiftythree_screenshots_abtest-opt.jpg
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/03/05_sm_fiftythree_screenshots_abtest-opt.jpg
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/03/06_sm_fiftythree_screenshots_abtest-opt.jpg
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/03/06_sm_fiftythree_screenshots_abtest-opt.jpg
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/03/07_sm_fiftythree_screenshots_abtest-opt.jpg
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/03/07_sm_fiftythree_screenshots_abtest-opt.jpg
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/03/08_sm_fiftythree_screenshots_abtest-opt.jpg
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/03/08_sm_fiftythree_screenshots_abtest-opt.jpg
  20. 20 https://twitter.com/thijs/status/695140901186830336
  21. 21 https://twitter.com/thijs/status/695154882437890049
  22. 22 https://twitter.com/thijs/status/695158927265243137
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Anna Pratskevich is a marketing strategist working for SplitMetrics. She is currently stydying Entrepreneurship at Stanford GSB and lives in the Bay Area. She previously led marketing team at Sport.com and Yoga.com, where she focused on content, app store optimization, community development, and marketing analytics for award-winning health and fitness apps.

  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