Swish:
Engaging with delight

Client: Getswish AB
Company: Bontouch AB
Role: Design Lead
Time: 2018-2022
Team size: 16
Platforms: iOS, android, web
Users: 99% of Swedes aged 18-50

This is not a traditional case

I worked as design lead at Bontouch's Swish team for four years. I had 3-5 designers in my team and I mainly focused on the Swish app. UX and UI designers worked in parallell, and everything was a team effort.

I lead the design work for many big initiatives, 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 service”, they want to add something extra to payments, something joyful. So here follows some some examples of things we added to make the app more smooth, delightful and fun.

Speed is key when choosing payment method

Swish competes with other payment methods at grocery stores. When it comes to users deciding on payment method, speed is key. Paying using a QR-code is way quicker than manual swish payment. By making the scan feature more prominent and easier to use QR scanning went up by 45%.

I also designed a new QR scanner in the payment form 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

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 I 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

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 I 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.

Double 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.

Double 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.

With all these improvements as well as making the card feature part of the usual payment flow sent cards went up 770%.

Splitting bills 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.

Outcome

I did not have the quantitative tools at hand to measure how these initiatives affected the users perception of the app but I'm confident they all helped strengthening Swish's brand as not being "a boring bank service". When people in general think about Swish today they think of the Swish sound and interacting with green confirmation screen. When I talked to users about the app they often spontaneously brought up at least one of these initiatives as positive add-ons. "I love the calculator, so smart" or "I always send cards, it's so fun".

During the time period when these initiatives were released the apps rating went from 3.7 to 4.5 and Swish became the most popular brand in Sweden in 2021 ahead of institutions like IKEA and ICA. Swish has kept its place at the top every year since.