DESIGNING AN APP THAT STANDS OUT

Originally published on CreativeBloq

With the App Store growing by the thousands a day in apps, today more than ever standing out is a must. People have always been inclined to look for the new and different. But how do you design an app that cuts through the noise? In the following read I draw the most important takes from designing Swipes.


1. Relevance. Start with a real problem

Start by solving a real problem. Ask yourself “Is the thing that I am creating adding something to someone’s life? Is it useful, entertaining or beautiful?”. Because the last thing you would want is your app to end up in the Sad Screen (that’s how I call my last screen of apps on my iPhone - Apple Maps sits right in the corner) and never been used.

We see it happen over and over again in the description text of apps “Simple and Beautiful” to an extent that it has lost value. Your app has to be more than that. It has to offer a solution to an unsolved problem or a completely new approach to an existing one. As Steve Jobs highlighted many times - design follows functionality so make sure that your functionality is making somebody’s life better.

Your app could be solving something really niche and most often you will start with an assumption based on your personal/team need or people you know. And that’s great! Because you can be almost sure that there are those alike minded people across the globe that would find your app useful as well.

My team and I were originally working on a different project. But we needed a task list that puts your todos on a timeline and enables you to organize your day fast. We looked around and we didn’t find what we were looking for. So we made our own. We created the first version of Swipes in less than two months and today, one year since launch, we have 80.000 users worldwide who really, really love our product. 

So look around you. There are plenty of things to be improved in our chaotic vibrant world.

 
  View of the main screen. We designed Swipes both in Light and Dark.

View of the main screen. We designed Swipes both in Light and Dark.

 

2. Steal. Craft. Iterate. 

Steal. And I don’t mean copy. Steal like an artist. Picasso said “Good artists copy - great artists - steal”. Look for great ideas within the same industry or elsewhere. If there’s anything worth stealing - grab it gently and carry on. It’s always a good start to think of the 5 apps that have really taken you and ask yourself - “What is exactly the thing that gets me so excited about it”. It could be the interactions, the design line a notification sound. You will feel it!

We were absolutely taken by Mailbox when it first came out. An absolutely jaw dropping and cool approach to handling email. So when we initially started work on Swipes we wanted to create the experience Mailbox did, but for daily task management. We succeeded and because Mailbox was still hyped by the time we launched, that medias picked the story - “Swipes the Mailbox for todos”.

Craft. Building on other people’s ideas doesn’t mean you copy. Remember you need to stand out from the crowd. You gotta bring authenticity into your design. And that means interaction and aesthetics.

When designing Swipes our focus was to create lightning fast UX for daily task planning. To give people a beautiful experience that makes task management a delight. Almost every navigation is gesture based and there are minimum tapping. One of the things our users love the most is our Time Picker. The integrated iOS time selection was really slow and frustrating, that’s why we replaced it with a wheel. The really cool thing about it is that depending on the time the background gets darker or lighter. And of course the moon is been replaced by a sun :).

 
    The Time Picker     substitutes the standard iOS time selection.

The Time Picker substitutes the standard iOS time selection.

 

Another thing are icons. It’s a great opportunity to really give personality to your design. Particularly with flat design gorgeous custom icons are more important than ever to give this extra layer of craftsmanship to your user experience.

  The Swipes icons are all outline vector made. This gives priority to the most important - the content.    

The Swipes icons are all outline vector made. This gives priority to the most important - the content.

 

 

Iterate. Almost certainly all time your first draft will suck, embrace that, don’t get intimidated instead carry on. The beauty will reveal itself when you least expect it.

It took us several iterations before the design got to the quality of today. Here’s a peak of what Swipes went through from it’s birth until now.

 
  Progression of the Swipes design over a year.

Progression of the Swipes design over a year.

 

3. Go for Illustrator.

Go for Vectors! I can’t highlight enough how important is designing in vectors. Illustrator is the best way to design. It’s freedom, it’s fast and you can mess up things for the better. You will be amazed how many great ideas will come from simple mistakes.

I can feel the Photoshop Aficionados raising eyebrows and forks. Bear in mind that your designs will be used merely as a guidance from the developer to build the app. Simply because he will make all elements render and not slice your design. Pixel Perfection is something of irrelevance in todays world of responsiveness.

It would also make it substantially easier making promo videos like this one in After Effects (Illustrator talks very well with AE :)). 

 
  View of the main Illustrator work file for the Swipes UI.

View of the main Illustrator work file for the Swipes UI.

 

Even icons are better used as vectors, especially for flat design. Currently our icon set is made as an icon font with IcoMoon. So if we are to change the color and size of them we can do it with one line of code, instead of exporting 30+ icons again :). And trust me they look SHARP on that retina!

To get a better feel of dimensions while designing your app you can use something like LiveView. It’s a nifty free app that pairs your screen with your iPhone or iPad display. It makes a huge difference what you see on your display and how it turns on your device. One thing to remember is to have the same color profile on both your display and your iPhone. I use the Display Profile on my Thunderbolt and the colors are pretty accurate.

 

4. Be a good listener.

Listening is key when you are designing an app that will be used by thousands (even millions) of people. That goes for users and your team. As designers we are blessed and burdened with a big ego. And 90% of the time we are convinced that we are right and that developer simply don’t understand us :).

Early feedback on your product will help you make a product that people want to use. It will save you a lot of time in support and ensure that your product will get better ratings. 

We have our eyes and ears open when people using Swipes give us feedback. We identify the most common complaints and find solutions to them in an update. That’s one reason why we are number one in 147 countries in productivity and have a 4.5 star rating in the App Store.

 

5. Tell a unique story.

As humans we are wired to stories. And storytelling has been a thing from ancient greeks to savvy marketers of today. Or more widely known in today’s terms - your brand identity. And yes your role as a designer is not limited to the app only. You are the one person that can communicate ideas and concepts through visuals, so take advantage of that!

  The Swipes App Store screenshots are visually linked, telling a single story.

The Swipes App Store screenshots are visually linked, telling a single story.

And if you are solving a real problem as we discussed earlier then you already have the foundations of telling a brand story that people can relate to.

The visual identity you craft is part of this compelling story. The logo you create, the colors you choose, explanation video, tutorials and the list goes on. Everything should add up to the same thing.

For example we chose a dark scheme to begin with primarily to stand out form all the other task lists out there. We intentionally avoided any checkmarks and traditional productivity associations in the logo, focusing on the experience of the app - the swiping gestures rather than just the functionality.