Creating the swapit design language – colors, icons, fonts are very important

In mid-December 2014 we started actively working on swapit while the idea and concept of swapit has been floating around our heads since the mid of 2014. Today, I’d like to talk a little bit about how we approached the design, style and appearance of swapit.

We at S4BB Limited have been building thousands of apps for over a decade now. Our sister company Skylab Mobilesystems Limited with her Sky Drone project is actively working on a hardware product. We value the importance of style and what it says about our product.

1. Color

swapit-blog_color-codeAt the beginning there was the choice of color or more precisely color-scheme that we had to make a decision on. To be honest, with most of our other apps I give our design folks a rough idea and they usually come up with something amazing. This time, though, I read a lot about color schemes and for which products and services to choose which color. I took about 2 full days just to read up on choosing the right color in dozens of articles by app designers, psychologists, marketing people, industrial and product designers.

While it is pretty obvious to most people that the right color should be the one potential customers / users would associate your product or service, the less obvious recommendation by some authors was to choose a color that creates a certain (=desired) emotion when looking at it, in combination with the product’s name and presentation.

Many buy and sell apps use red for example, as their main color scheme. That makes sense, because red is commonly associated with “promotions” / “money saving” and generally is an ‘alarming’ color. Amongst others, there were two main reasons why I thought red would not be the right choice of color for swapit:

  1. Red as an ‘alarm’ has a bit of a negative touch to it.
  2. Some of our competitors use it and we need to shout out: “We’re different!”

Another important take away from the many articles and research papers I read was: “Choosing the color for a product should be a business decision.”
It should not left to the designer who will usually choose the color that looks best from a design-perspective, but the designer does not look beyond design at the actual target audience and the desired reaction that audience should experience when using a product.

The next best color that is somewhat related to retail, buying / selling and low prices is the color green. At the same time, green fits very well to swapit because we are not just about buying and selling items — swapit is called swapit because it is also built for swapping items or even giving them away for free. We believe this can help reduce unnecessary waste and swapit can – in its very own unique way – contribute to a greener and more environmentally friendly society.

The emotional response the swapit color-scheme green is supposed to create with our users could be summarized as: “environmentally friendly low cost trading of pre-loved items”.

2. App Icon

After the color was locked down, we went on working on the app icon of swapit. We were looking for an icon that

  1. Can be created with a single color (green);
  2. Shouts out LOCATION to communicate the location-reference at our core;
  3. Resembles the S of swapit or somehow the trading / buying / selling character;
  4. Is simple enough with some deeper complex meaning;
  5. Looks good even if the icon is small on low-res devices.

There were quite some hand-drawn designs. Here is a quick selection of those:

IMG_20150225_150047_edit

Besides hand-drawn designs the first Illustrator-designed icon drafts looked like this:

Screen Shot 2014-12-31 at 3.45.04 pm

Then we went on and put some color on our favorite variation of it:

Screen Shot 2015-01-02 at 4.44.40 pmFinally, we launched the first beta of swapit with our first beta app icon that looked like this:

swapit_icon_192

For our beta 2 of swapit we changed the icon a little bit by just putting it on a squircle. So the latest version of our app icon looks like this:

swapit_icon_192

3. The swapit Text

Finally, we had to work on the actual swapit text that we would use in places like the header of this blog, our website, the app’s main screen header and other places. We played around with different styles, combinations of fonts, etc. It is important to us to slightly separate “swapit” into “swap” and “it” somehow the person who reads the term to quickly see that there are two parts to that one word. At the same time, the one term needs to look like it comes from the same design and it speaks the same design language.

These were some early drafts we created once we settled on a rough concept of the app icon:

Screen Shot 2015-01-05 at 11.36.50 am

Later on we played around with some coloring options to see how different colors blend into each other. As our main theme color is green, we experimented with some highlight colors to see how such colors can stand out.

Screen Shot 2015-01-06 at 1.00.09 pm4. Splash Screen

Every app needs to have splash screen – especially when the app is doing some housekeeping work at startup, like swapit does. So we needed to have one as well and after we settled on the name, color, app icon and text, we drafted some splash screens to see how different color combinations look like next to each other. Here is one comparison we looked at:

Screen Shot 2015-01-06 at 3.17.29 pm

Like you can see, we played a bit with gradients as well. In the end, we decided to go without gradients and give our app a bit more of a flat look.

The Current (and Future) State of Swapit

Based on all the design work we have done so far, swapit currently looks like this:

screenshot-splashscreen_with-galaxy-a3screenshot-grid_with-galaxy-a3

So what ever your product is or should be, it is very important for you to choose the right color, style and design language. If you want to communicate a certain message to your users, you need to look at this, work on it and keep improving on it. The way swapit looks like right now, is not the final look. It is just the look we came up with so far.

Absolutely nothing is set in stone and we are always open to change. Based on the great feedback of our beta testers, we already received great input into our design approach and the next beta 3 will look different already. We’ve received many suggestions of what we can improve and especially how we can improve it to make swapit the right app for our target audience.

Have you signed up for the invite-only beta of swapit yet? If not, request an invite at: http://swapit.la

Advertisements

One thought on “Creating the swapit design language – colors, icons, fonts are very important

  1. Pingback: Swapit Integrates Citymapper Real-Time Navigation | swapit blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s