Elevating Sweden's most beloved App

Client: Getswish AB
Company: Bontouch AB
Role: Design Lead
Time: 2018-2022
Team size: 16
Platforms: iOS, android
Users: 90% of all Swedes

This is not a traditional case

I worked as design lead for the Swish app for four years. I had 3-5 designers in my team. UX and UI designers worked in tandem, including myself, and everything was a team effort.
I lead the design work for many big projects, but instead of going through the process of any of them, I would like to share something else. Swish don’t want to be a “boring bank app”, they want to add something extra to payments. So here follows some some examples of things we added to make the app more smooth, delightful and fun.

This is not a traditional case

I worked as design lead for the Swish app for four years. I had 3-5 designers in my team. UX and UI designers worked in tandem, including myself, and everything was a team effort.
I lead the design work for many big projects, but instead of going through the process of any of them, I would like to share something else. Swish don’t want to be a “boring bank app”, they want to add something extra to payments. So here follows some some examples of things we added to make the app more smooth, delightful and fun.

Adapting to user behaviour

Paying using a QR-code is way quicker than manually typing in payment details. However users did not use the scanner so much. To make the QR scanner more accessible we moved the scanner button down below payment button and added a label. This also put it within the thumbs reach, enabling one-handed payments.

We saw from user tests that users often started a payment by going into the payment form, that meant that to scan a QR code they had to go back to the home view to initiate the scanning.

We designed a QR scanner that only used half of the view and could be easily accessed from the payment form by swiping down anywhere on the screen.

A less negative feeling

As a user you sometimes need to look at the payment history. The history listing highlighted the cells in red where you sent money. Most users tend to send more money than they receive. A list full of red gave users a negative feeling when browsing the history. Instead we highlighted the cells where you received money in green to send more positive signals.

Other things we changed with the cells were to put the name on top of the date, since user tests showed that that info were more important than the date. We also removed the red and green strokes in the left that indicated if you sent or received money since we already communicated that with the amount text color, in the other end of the cell.

Since no search feature would be added in a foreseeable future, we added avatar images for users to more quickly find a transaction tied to a specific user.

Before

After

Adding sounds to the app

When I started working with the Swish app it was silent. It's common knowledge that audio is a big part of an experience. Not necessarily in a payment app, but still. Having worked close to sound designers, ordering and implementing sound for countless games, I thought that we should give this a go. I had noticed that some apps had a custom notification sound while receiving a swish sounded just like receiving a text message from your partner or an email from your boss. Together with sound designer and inventor Håkan Lidbo we created the sounds that came to be the very iconic swish sounds. With an app that has an onomatopoeic name it was obvious where to start. Instead of only using a sound at the receiving end I wanted to play a sound also at the transmitting end, to tell a little story. The thing I had in mind for the sounds was that the transaction was something physical that was thrown from the transmitting phone to te receiving one. Like a paper plain taking off, panning from left to right with a raising pitch fading into eternity. On the receiving end the sound starts more slowly, making it possible for users to realize that money is coming their way, fractions of a second before the sound reaches it's climax, the plane flies past with a slightly descending pitch while dropping the money on the ground where the coin spinns around for a while. Sending someone in the same room money when both phones are unmuted you can actually hear how the sound travels from one phone to the other.

Adding sounds to the app

When I started working with the Swish app it was silent. It's common knowledge that audio is a big part of an experience. Not necessarily in a payment app, but still. Having worked close to sound designers, ordering and implementing sound for countless games, I thought that we should give this a go. I had noticed that some apps had a custom notification sound while receiving a swish sounded just like receiving a text message from your partner or an email from your boss. Together with sound designer and inventor Håkan Lidbo we created the sounds that came to be the very iconic swish sounds. With an app that has an onomatopoeic name it was obvious where to start. Instead of only using a sound at the receiving end I wanted to play a sound also at the transmitting end, to tell a little story. The thing I had in mind for the sounds was that the transaction was something physical that was thrown from the transmitting phone to te receiving one. Like a paper plain taking off, panning from left to right with a raising pitch fading into eternity. On the receiving end the sound starts more slowly, making it possible for users to realize that money is coming their way, fractions of a second before the sound reaches it's climax, the plane flies past with a slightly descending pitch while dropping the money on the ground where the coin spinns around for a while. Sending someone in the same room money when both phones are unmuted you can actually hear how the sound travels from one phone to the other.

Dubling down on cards

Swish has a feature where you could send an image bundled with the money. This was meant to be used for birthday gifts and similar. Some users really liked sending cards wile other thought the feature did not belong in an app handling money. At the time the cards lived physically in the App bundle so every time we added a new card some were happy and some complained over the apps increased file size. Together with a UI designer we designed a new view for adding cards. A CMS was built so that people at Getswish could upload new photos without needing an app releas and without taxing the apps file size. We kept the entrance to the cards toned down but well inside we gave all the card lovers some extra. Instead of 10 cards we now had 80+ cards divided into categories. We displayed the cards larger and added smooth transitional animations.

Dubling down on cards

Swish has a feature where you could send an image bundled with the money. This was meant to be used for birthday gifts and similar. Some users really liked sending cards wile other thought the feature did not belong in an app handling money. At the time the cards lived physically in the App bundle so every time we added a new card some were happy and some complained over the apps increased file size. Together with a UI designer we designed a new view for adding cards. A CMS was built so that people at Getswish could upload new photos without needing an app releas and without taxing the apps file size. We kept the entrance to the cards toned down but well inside we gave all the card lovers some extra. Instead of 10 cards we now had 80+ cards divided into categories. We displayed the cards larger and added smooth transitional animations.

The images were called illustrations, a word that people in general don’t use for images. When receiving an image you got an icon of a gift box in the transaction cell. We wanted to clarify the metaphor so we called the images cards and in stead of gift boxes we put them into envelopes.

To further build the anticipation when receiving a card we hid the amount and the card inside the envelope until the user opened it. Then we played a delightful animation (see video). We pause the animation slightly when only the card and the message are in focus for the user to take in, before we put the rest of the view into focus, revealing the amount of the gift etc.

With the new system in place new cards were added more frequently, perfectly synced with calendar bound festivities. The app size shrunk significantly and the app team could stop making releases only because it was midsummer etc. Users really liked all the new cards they got to chose from and they sent cards at four times the previous rate.

Splitting the bill effortlessly

Swish is often used when splitting a bill at a restaurant. Someone pays with a bank card and the rest sends their part to that person using Swish. Typically everyone first opens up the calculator to calculate their part. Memorizing the amount and typing it into the payment form in the Swish app.

This was an opportunity to create a more smooth experience so I designed a minimalistic calculator feature that users could use to easily calculate things right in the payment form. This feature is not at all ground breaking, it's just a useful tool at the right place.

Try some prototypes

Morphing transitions

Animation is key to understand what happens in the transition from one screen to another. Working with the Swish app I created a way of animating using the direction of a key object to move all objects in the same direction combined with some fading. This creates a morph like animation where it becomes clear what happens on the screen. These animations also proved to work well with people sensitive to screen motion. Please try the prototype below.

The power of iteration

I often pair-designed with an other designer. When combining two brains it's evident how much better result you can get, feeding each others with ideas and giving feedback. Open the prototype to see the evolution of a view that got our massaging design treatment.

A confirmation screen with a touch of playfulness

At first, small businesses accepting Swish as a payment method did not have a way to verify a payment. To prevent fraudulent behavior with fake payments, using photoshopped payment confirmations etc, a very simple animation was added to the confirmation view. Whenever someone taps the green top area a sprinkle of stardust gets released, "ensuring" the payment actually happened. Yes, some enterprising people built more advanced solutions to mimic this too, but that's part of an other story.

Users really liked playing around with these animations after sending a payment, just for fun. So I designed an even more delightful experience. Where you could draw with particles and even play simple melodies since different parts of the area played a different xylophone tone when tapped. Playing some specific songs could even give a special surprise.

Pointless? Possibly. But did it make some users love the brand more? Yes, definately.