What I Learned From Redesigning My App’s Feature Graphic

 

I’ve mentioned this before in previous blog posts, but I’ve had to wear a lot of different hats in my past few years of personal app development work. Sometimes one of those hats happens to be “graphic designer” – which is one of my least developed skills in my app development arsenal. At the end of the day, I’m just a programmer with a mediocre knowledge of GIMP keyboard shortcuts.

So imagine my despair when I realized that the feature graphic is one of the most important factors to help convince people to download your app. It’s the first thing people see when they visit your store listing and it will likely make all the difference as to whether they will even scroll down to read your app’s description.

The difference between a bad feature graphic and a great feature graphic can literally make or break an app – regardless of how amazing your app may be. Simply put, the better your feature graphic is, the more downloads you will bring in.

 

So how do you create a good feature graphic without any graphic design skills?

 

I guess the easiest answer to that question is to pay somebody else to make one for you. There are plenty of websites like Fiverr or even a handful of subreddits (/r/designjobs and /r/forhire) where you can have a designer create your graphic for you (usually at a pretty reasonable cost). But if you are like me and are on a tight budget and want that sense of achievement by learning something new, then feel free and keep reading.

Truth be told, I still don’t know a “simple formula” to create a good feature graphic. People always say you’ll know good design when you see it, but how in the world do you create it? Well, my approach is just to start somewhere, and then continue to iterate. What I’d like to do is take one of my Android apps (CryptoConvert) and walk you through all the different stages of it’s feature graphic so far and explain my thought process as it changed over time.

 

 

V1.0: What in the world is that?

 

Yes, I know it’s hideous, but it was my very first attempt at making a feature graphic for CryptoConvert. Let me at least explain my thought process with it, discuss the major flaws, and talk about what I did to fix them.

So, the app this feature graphic supports is a Cryptocurrency Exchange Rate Calculator – and I knew that the feature graphic had to be something that would remind you of Cryptocurrencies. I thought, what better way to represent that than to have a circuit board background with the most recognizable Cryptocurrency logo front and center?

I also was still for some reason under the impression at this time that the feature graphic doesn’t really do that much, so I figured it would be best to just keep it simple and style it with my same theme colors in the app to keep things consistent.

Well, I quickly realized just how bad the problems were.

 

#1) What in the world does this app even do?

The biggest problem with this version of the feature graphic was that by looking at it by itself, you’d have no idea what this app would do. Sure, you might imagine it has something to do with CryptoCurrencies, but it gives no insight as to what the app is or why I as a user should even bother downloading it.

Not only that, but I had unintentionally pigeonholed myself by only using the Bitcoin logo. CryptoConvert works with over 800 currencies – even over 100 fiat currencies like the USD, Yen, Rupee, and more. By unintentionally conveying that my app is only intended for Bitcoin, I completely misconstrue my app’s features and almost certainly will miss out on people who get the wrong idea about it.

When you are creating your own feature graphics, make sure to keep this in mind. The feature graphic is the first thing a visitor sees on your page – so it really needs to convey the message of what your app does and why they might need it.

 

#2) Avoid unnecessary, DISTRACTING effects

When you saw that feature graphic for the first time, you probably thought to yourself “okay but what’s up with all the circuits?” Honestly I have no idea either, I guess I thought that it would just be a nice accent to the feature graphic to keep it from being “too boring”. I knew I wanted to use the same color theme as I use in my app (blue and white), and this seemed like a cool touch at the time.

The result is that it’s just super forced – and way too distracting compared to another piece of the app’s store listing that might ACTUALLY matter. Think of it this way – if you only get 2 seconds of somebody’s attention to “convince them” to download your app, would you rather them be looking at the super distracting circuit lines in your feature graphic or looking at a different part of the listing which actually explains why they need to download the app?

 

 

V2.0: Better, but still… yuck.

 

Alright so this version was definitely better than the other. As you can see I axed the bitcoin logo in the middle and tried to really focus on “getting the message across” of what CryptoConvert does. While there are definitely some new problems with v2.0 of the CryptoConvert feature graphic, it did have some much needed improvements on the original.

 

Improvement #1: Getting the message across

The biggest issue with the original feature graphic was that it never really conveyed the message of what CryptoConvert does. So naturally I went a little overboard to fix that problem in 3 different ways. In general, this version actually tries to tell more of a story about what the app can do for you whereas the original just left you confused and uninformed.

First, you’ll see I’ve removed the Bitcoin logo in the middle and included the App name and a short description of what it does. So at least now anybody seeing it will “kinda” know what the app is about.

Secondly, I added a screenshot of the app in it’s “multimode” (one of the better features) to showcase the biggest use of the app.

Lastly, I tried to visually show the “exchange rate conversion” aspect of the app by having the set of 4 fiat currency icons and the set of 4 cryptocurrency icons separated by an arrow to indicate converting between them.

 

Improvement #2: Removing Things That Don’t Matter

As I mentioned earlier, you may only have a couple of seconds to grab someone’s attention with your feature graphic and convince them that they need to download your app. Why would you want them to spend that time looking at pieces of your feature graphic that don’t support that?

So by fading the circuit board pattern into the background, it no longer distracts your eyes away from the more important pieces of the graphic.

 

 

Onto all the things that are wrong with it…

 

 

#1) Redundant information + clutter

There is seriously way too much going on in this graphic. It’s like the first time you look at it, you have no idea where to even start. The text kinda grabs your eyes, but then you drift over to figure out the screenshot and then you have to decipher what the 8 icons with the arrows between them mean.

While my intentions to “tell a story” about the app’s features was pure, the implementation was poor. I went way too overboard, and because of it there’s all of this redundant information that just clutters everything up. If you think about it the text, screenshot, and the 8 currency icons all basically try to convey the same thing – that this app will calculate the exchange rates of cryptocurrencies for you. But with all of them in 1 small space like that, it just muddles the message I want to convey.

Again, if I only have 2 seconds (if that) to convince someone to download Cryptoconvert, I want them to look at the things that will matter. If all 3 of these pieces in the feature graphic basically say the same thing, then what’s the point of having all of them? It just takes up more of that precious time that the store listing visitor could spend glancing at the app icon below the feature graphic, or at the nice screenshots and long description below that.

Quality of message is much better than quantity – so rather than trying to say the same thing 3 different ways, focus on having a really powerful message that doesn’t waste time when you glance at it.

 

#2) Text brings with it a whole other set of problems

While this might not matter for your app, it definitely caused an issue with mine. I didn’t realize until my app started growing more and more that most of my users were coming from non-English speaking countries like India and Russia.

So when I updated my feature graphic to include text in v2.0, I didn’t realize that I was basically excluding anybody who didn’t read English from fully understanding the feature graphic as I intended. I knew that Google Play (and other app stores) allow you to create localized store listings and provide different translations (and I had done so with the short / long descriptions), but I never really considered creating localized graphics as well.

 

 

V3.0: We’ve come a long way

 

Improvement #1: Clutter Be Gone

Taking my own advice from above, I wanted to reduce the amount of redundancy and clutter in my feature graphic. I completely removed the currency icons because I thought they were the weakest “message” in the graphic of the 3.

If you’ll notice though, the useless circuit board pattern in the background from v1.0 and v2.0 is now gone – and replaced with the ghostly silhouettes of currency icons past! I still wanted a way to showcase the diversity of currencies that CryptoConvert supports, and I thought that keeping that message more subtle in the background was perfect – plus it replaces the circuit board design which literally held no value to the feature graphic whatsoever. Now, every component of the graphic has some sort of purpose.

Lastly, and this is just a small touch, but I replaced the phone template that I used for the screenshot. I felt like the realism of the original Galaxy template in v2.0 just didn’t fit the look I was going for. When I found the really flat and clean Nexus template I knew I had to use that instead. Now you can still clearly tell it’s a phone, but you’ll be more likely to focus on the screen’s contents rather than the phone itself.

 

Improvement #2: Language Language Language

 

 

 

While this point doesn’t entirely have to do with graphic design, it was still a method for me to improve the effectiveness of my feature graphic. I ran the reports to see what countries my app had the most users in and then compiled a list of all of the primary languages in those countries. One by one, I created a localized version of the feature graphic – and now those are all live on the store. If you know your app is getting downloads from countries that speak languages other than what you’ve published it in, make sure to create localized graphics. It’s totally worth it.

I also took the time while doing the translations to create a different graphic for CryptoConvert Free and Pro. Just a few months ago I published the “premium” version of CryptoConvert, but all of the app assets were originally the exact same. So unless you were paying very close attention to the app names and the prices, how would you know that there was a different version? By adding the “Free” or “Pro” text in the screenshots, I am able to subtly hint of the existence of the other app (though probably not as much as I’d like, but hey it’s an improvement).

 

 

Now how would I improve it…

 

I feel that version 3.0 was leaps and bounds above v2.0, however there are still some things that I’m still not quite happy with. What I didn’t really consider until after I finished v3.0 is exactly how the feature graphic looks when it’s actually on the store. So here’s a screenshot of v3.0 live on the Play Store (via the app) to show you:

 

 

#1 Element Positioning

The first thing I noticed when looking at the feature graphic live on the store is how close the text of my app is to the icons/buttons of the Play Store app. They are right on the edge of interfering with each other, and I think in the next iteration I’ll have to slide the text down so it’s no longer an issue.

The lesson here is to be mindful of these buttons on the Play Store app (as well as the fading effect at the top), and make sure to account for them in your design. If you can, avoid using the top 1/3 or so of the feature graphic unless it’s absolutely necessary.

 

#2: Background Icons

No matter how hard I try, I really can’t seem to get this part right. The currency icons in the background are meant to be subtle, but still recognizable. I think in v3.0, I went a little too far on the “subtle” side of the spectrum – because I personally can’t make out a single icon in the background. I need to enhance them just a little bit more to make them clear – but not too much that they overpower the main pieces of the feature graphic (app name and screenshot).

 

 

Last Thoughts

 

 

The CryptoConvert feature graphic has really come a long way in just 3 iterations. My hope is that by sharing some of my mistakes, I can save someone else from making the same ones. I also know that I’m far from an expert, so if you have any suggestions on how I can improve, please feel free and leave a comment or reach out to me directly.

Cheers, and happy coding! …er, designing.