The Acceptance of the New Swapit Startup Dialogs

Ever since we gave you the License to Kill, our newest startup dialog architecture and design is online. About a month ago, I explained our reasoning behind that and why we are looking for the best user experience.

After a short while of having our revamped startup dialogs in our public releases, I took a look at its metrics today. We can clearly see that the “Welcome” dialog, which shows to every new user when he launches the app for the first time, is shown to most people. Have a look:

 

These stats are for Android devices only right now.

80% of people who see the Welcome dialog, do actually click the main action button in that dialog, which just basically dismisses the dialog and brings the user to the list of items. The remaining 20% probably click the BACK button to dismiss the dialog the usual Android-way. Generally, that’s quite a good ratio in terms of users clicking the main action button, which we designed to be clicked.

It is too early to interpret the effect of the other dialogs we’ve put in there. They do all have different triggers as to when and in which cases they show up. We will see what the future brings here, but our change has definitely helped lifting up conversions in terms of clicks here.

 

Have you tried Swapit yet? Give it a try. It’s free: http://get.swapit.la/now

Advertisement

The Best User Experience – and nothing else

We are in constant contact with our users. That’s important, because only that way we find out about road blocks they might have and things that might slow them down when using Swapit.

While Swapit has grown into a great marketplace app, where our users can trade efficiently, privately and in a seamless manner; there is always space for improvement. We will not rest if we can still improve the life of our users. These can be simple things, like making them smile the first time they start Swapit because a lovely “Swapit la!” voice comes out of their phone.

BEAUTIFYING THE SWAPIT LAUNCH EXPERIENCE

This is how Swapit on iPhone and Android looks like when you start it first day in the morning:

It’s informative and functional. We show such startup dialogs because we want to communicate to our users what has changed. We want to be sure they are aware of the cool new features we’ve just put into Swapit. Like on iOS for example, you can post your items for sale at multiple locations. No other app has that kind of feature!

While these dialogs serve a purpose, they are however, rather ugly. The launch experience is diminished by them showing up. They’re too text heavy, not catchy enough and are missing a certain twang.

That dialog does show way too often as well. For example, it always shows when after the app was force-closed or after the phone was rebooted. In short: it gets annoying.

That’s exactly the kind of feedback we’ve received from our users. Most appreciate our intention to communicate, but generally, it needs to be done more subtle and with more style. Granted, we have quite some space for improvement on that front.

CONSOLIDATING LAUNCH EXPERIENCE

At the same time, we also know that we have many other dialogs that might show up at app start. Say for example, when a user’s account got suspended, when we have a new version everyone needs to update to or when the user receives some referral reward, and so on. In fact, we have identified 15 different cases so far of what can happen when or better what we want to show at startup in each of those cases. That’s a lot.

So we are now in the process of consolidating all such cases and we are following multiple goals:

1. Improve the Overall User Experience
2. Beautify the Visual Appearance
3. Simplify In-App Navigation
4. Improve Manageability of Content
5. Load Dynamic Content (e.g. promotions)

For all of that, we defined a very simple visual structure for our startup dialog with the following key elements:

1. Title
2. Image
3. Countdown
4. Text
5. Action 1 (Label + URI)
6. Action 2 (Label + URI)

All such elements are optional, but generally, we would almost always use at least an image, text and an action.

At the same time, we are also taking care of what happens when we would want to show multiple startup dialogs at the same time. The best way we could think of, was to prioritize all kinds of dialogs that would show up. Say for example an “Account Suspended” dialog has the highest priority, so in case a “Welcome” dialog would want to show as well, the “Account Suspended” dialog received precedence to show up and lock the suspended user out. Of course, there’s an action offered to contact us and resolve the issue.

Furthermore, we combine this with a queueing system. Sometimes it happens, we want to show two things at a time, but one dialog is more important, so that dialog shows. However, the other dialog, which was not shown, might be important enough that we still want to show it at some point in time. So we’re putting in a queueing system that allows us to queue a dialog to show it the next time.

While I am writing this down, I am imagining someone reading it and thinking: “Isn’t all of this a bit overkill for just a simple startup dialog?” Well, I believe it is absolutely important to make sure our users are not annoyed by any step inside our app. So if our startup currently shows up too often and if it is just too ugly right now, we need to change that. But if we change it, we change it properly. Our users deserve nothing but the best.

ITERATING THROUGH DESIGNS

Since the onset, we’ve been iterating at an amazing pace. Not just in terms of Swapit app releases (we’ve released over 140 thus far), but also in terms of designs. We’re constantly evaluating, creating design drafts, changing things up, adjusting, adding design elements, removing them, and so on. Most of which is driven by user feedback.

This now is not different. We’re already iterating through different variations of our startup dialog in various conditions. We need artwork for each of them and we need to make sure that artwork fits into the overall design language. Here is a quick glimpse at how that looks like at the moment:

Obviously, the above screen shot only shows 3 of those 15 mentioned cases, so you can imagine how massive our design iterations can be like. It is a time consuming process, but it helps us a lot to understand how people navigate through Swapit and it is absolutely necessary to be able to provide the best design and user experience to our users.

We will not rest until everyone is happy and we will make sure that Swapit works like and feels like everyone expects it to.

Have you tried Swapit yet? Download it for free from: http://get.swapit.la/now

Welcome to Team Swapit: Stephanie

We’re all happy that Stephanie has joined us at Swapit HQ last week and is now part of the Swapit team. Here is a quick overview over the Stephanie’s scope of work:

Stephanie loves UI and UX design and has taken charge of everything design-related at Swapit. Stephanie holds a Bachelor of Science from De La Salle University Manila and has previously worked at Hewlett-Packard.

Stephanie has joined the Swapit team in July 2016 to drive our design and user experience to new highs.

We’re already working on some new designs together and they will make their way in the next releases of Swapit on Android and iPhone as well onto our website, blog, Twitter, Facebook, Google+ accounts. So stay tuned and keep an eye out for new fresh design coming your way.

Have you tried Swapit yet? Give it a try, it’s free: http://get.swapit.la/now

To Tab A Bar Or Not To Tab A Bar – on iOS

As you might have guessed from our last blog post and the one before, we are already working on the iOS app of Swapit. Unlike many of our competitors, we decided not to use any of the cross-platform development tools out there, but to go real native and build the app for each platform from scratch. We believe, this is by far the best way to provide the stellar user experience everyone expects from Swapit – may it be on Android or iOS.

This approach does come with challenges, but also with opportunities. One of the great freedoms we have, when going native on each platform, is to create a custom user interface design that fits perfectly to the target platform. On Android for example, we did a deep dive into the Material Design Guidelines published by Google to ensure all Android users feel right at home when they’re opening the app.

For example, on Android we implemented the standard left side slide out navigation drawer as well as the “+” floating button to create new posts. Those concepts feel very natural to Android users and they feel right at home when they’re using Swapit.

Now, we did some tests by handing our Swapit Android app to some iPhone users. They immediately felt lost, didn’t know what to do and started clicking randomly around the screen, trying to find something useful to do. Especially the floating button at the bottom right corner was something rather unusual for them. So to us it was obvious that we need to cater much more to the standard user behavior of iPhone users in our iOS app.

Last Friday, we finished our very first internal beta of the Swapit iOS app. It can only list items nearby the user’s location and show details of each item. There is not much interaction possible in the app yet. So we started a very small internal beta test of about 10 friends and family folks who have iPhones. Just to see if the app starts up properly on different iPhone models, OS versions, network carriers, locations, indoors/outdoors. Conclusion thus far: it’s lookin’ good!

(Note: Everyone who signed up for our Swapit iOS Beta will get an email when the next version is ready. Stay tuned!)

The Tab Bar Discussion

Two days ago, we had a very heated discussion about the general structure of Swapit on iOS. I’d like to share some details because I feel it might give everyone some insight in our thought and decision making process.

The main question was: should we use a tab bar at the bottom of our standard list screen or should we not use it, but rather bring over the left side navigation pane, which we use in Swapit on Android. Such a tab bar is very common in many standard iOS apps. Just go and check the App Store, iTunes, Safari, Notes, etc. They all have a tab bar. Usually that’s being used to switch between tabs, but sometimes there are also some “actions” in there, which are not particularly switching tabs, but perform a certain action. For example: the Notes app has a “New Folder” action in that bar.

We a camp of people that was for a tab bar and one against it. I personally was against the tab bar, mainly because I feel having a tab bar constantly there, wastes screen real estate, which I’d prefer to use for displaying content. Think, cinematic feel of an app.

However, this is not about what I feel makes sense – in the end, I am not actually a real world iPhone user. Yet, given our experience and the feedback we collected from iPhone users trying to use our Android app, it was clear that we need to cater directly to those iPhone users – no matter what.

On top of that very simple discussion came contextual discussions about the general workflow and where, from a contextual point of view, it will make sense to put certain modules of content in Swapit. Let me give you a quick overview of the top level user interface elements that are accessible right from the main screen in the Swapit Android today:

1. My User Profile (left navigation drawer)
2. Swapits Nearby (left navigation drawer)
3. Inbox (left navigation drawer)
4. Settings (left navigation drawer)
5. Invite Friends (left navigation drawer)
6. Write a Review (left navigation drawer)
7. Stats (left navigation drawer)
8. Website (left navigation drawer)
9. Blog (left navigation drawer)
10. About (left navigation drawer)
11. Map (top toolbar, right)
12. Search (top toolbar, right)
13. Filters (top toolbar, right)
14. Post Item (bottom right floating button)

Obviously, it would not be possible to move all such elements into a tab bar on iOS. Adding a left navigation drawer like on Android might be a solution, but it is not standard iOS design — even though some popular apps on iOS have that. To make Swapit’s feel for iOS users as native as possible, we decided to integrate a tab bar at the bottom. It still bugs me personally that we are wasting that screen real estate for this, but if it results in a higher user engagement in the end, then it was the right move.

Now the next question was about what to put into that tab bar and how to order it. Contextually seen, the tab bar’s purpose is to allow the user to switch between tabs. Usually, those are content-related tabs. For example, on the Apple App Store you can switch between Featured Apps, Top Charts of Apps, Categories of Apps, Search of Apps, Updates of Apps. It’s obvious, those tabs switch between viewing apps in a different way or it just orders apps differently.

For Swapit, we want to make sure our users have quick access to the content of the app. Thus, we put all important content-related tabs in the first 4 elements of the tab bar:

1. Swapits Nearby (left)
2. My User Profile (center-left)
3. Sell/Post Item (center)
4. Search (center-right)

This is how a quick sketch of that looks like:

Assuming the majority of our users are right-handed, we needed to make sure that the tabs we want the users to use most, are reachable with their thumb when holding the phone in their right hand. One very important goal of Swapit is to encourage people to post their items quickly — in under 30 seconds. That includes finding that “Sell/Post Item” action right away. Therefore, we put that in the center of the tab bar. In this case “Sell/Post Item” is actually a bit of a deviation from the content-related purpose of switching tabs. However, it is essential to have this action right here in the middle to make it as obvious as possible to users on how to post items.

The three other directly accessible tabs here, are essential tab-switches between different ways of viewing items on Swapit. The standard tab that will open when the app starts is the most left “Nearby” tab. You can easily open up your own profile, which also lists your own items. The search field is within a 1-click reach as well. Additional content-related tab switches as well as other functions (About, Website, Blog, etc.) are then accessible through the “More” tab at the bottom right corner.

Now we needed to cover two other important functions:

1. Inbox
2. Filters

Filters. We offer very sophisticated filters in Swapit, so you can easily find what you are looking for. As you can see from the Android screen shot (on the right), that’s a rather complex and busy panel, which we might be able to improve/simplify a bit, but in the end it will always have a lot of options. Therefore, we need to reserve a whole panel for our filters on iOS as well. So similarly to Android, the filters panel will be accessible through the top right corner of the top toolbar.

Inbox. The Inbox on the other hand is – from a contextual point of view – very different to most other screens on Swapit. It’s a communication center which combines all notifications you receive through Swapit. May it be comments to items, new item notifications, interested buyers or most importantly chat messages. Furthermore, it is important to know, that the main entry point of users to the inbox is not expected to be through the Swapit app itself. Generally, people enter the inbox through a notification they receive in their Notification Center. So from a navigational point of view, it is absolutely fine to put the inbox at top left corner, like shown in the sketch above. If you would be accessing it a lot from within Swapit’s navigation, it might be cumbersome to reach the Inbox, but in our case that should not happen too often.

Conclusion

After a two hours of a discussion involving pretty much everyone, we settled for the above main structure of Swapit on Android. It is very important to create a clear path for this early on. You don’t want to waste time designing something that people won’t use. Personally, I still prefer Android’s Material Design more because it offers us more screen real estate. Our discussion got heated, emotional and brought out everyone’s passion for Swapit’s success. Yet, in the end we found a solution, that I believe works best for iOS users.

Are you an iOS user? What do you think? Does our reasoning make sense to you?

 

Do you have an Android phone and want to try Swapit? Download it from: http://get.swapit.la

Do you have an iPhone and want to test our Swapit beta? Join the Swapit iOS beta here: Get Yourself on the List Today!

 

Swapit Team on Casual Friday

It’s casual Friday, but for us nerds all days are casual. Anyway, we got a great surprise yesterday, with the delivery of our first batch of swapit t-shirts! Check it out!

Of course, we had to try them right away!

Right … it’s all a bit nerdy, but hey – that’s what you get with us! 🙂

Have a great weekend everyone!

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

At 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:

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

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

Finally, we launched the first beta of swapit with our first beta app icon that looked like this:

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:

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:

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.

4. 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:

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:

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