VIBO

QR code payments and transactions

My role on this project was Lead Product Designer, I worked alongside one other UX Designer throughout the process.

Vibo were launching in the Asian market, putting themselves in close competition with big companies already employing QR Code technologies to deliver similar services. Alipay and WeChat Pay have conquered much of the Chinese market; taxis, cafes and marketplaces are all now opting to use their services instead of cash.

Vibo came to Supur with an existing design and wanted to create a better, smoother experience for their customers to establish a core base of dedicated initial users.

Role
Product Designer

Agency
Supur

Goals over features

As a startup bursting with great ideas, the intial focus of the app had been lost slightly and the first round of designs had been crammed with a lot of extra features and functions. The team had started with a single problem they wanted to solve but along the way they had added solutions to other problems and good features they’d seen in competitors.

The key processes for using Vibo as it was intended had been compromised by the desire to add more functions to the app and so core task routes were more complicated and more confusing than necessary.

Back to basics

Before we could start redesigning anything, we had to figure out what the problems were with the current designs. We quickly put together an interactive prototype in Invision and tested with a group of users looking for ways we could improve the functionality, usability and convenience of Vibo.

We specifically tested whether:

1.  People understood what Vibo was for at first glance.
2.  People could send and receive money through Vibo without problems.
3.  People saw value in having additional functionalities (including messaging, a newsfeed and an app store) within Vibo.

VIBO

QR code payments and transactions

My role on this project was Lead Product Designer, I worked alongside one other UX Designer throughout the process.

Vibo were launching in the Asian market, putting themselves in close competition with big companies already employing QR Code technologies to deliver similar services. Alipay and WeChat Pay have conquered much of the Chinese market; taxis, cafes and marketplaces are all now opting to use their services instead of cash.

Vibo came to Supur with an existing design and wanted to create a better, smoother experience for their customers to establish a core base of dedicated initial users.

Role
Product Designer

Agency
Supur

Goals over features

As a startup bursting with great ideas, the intial focus of the app had been lost slightly and the first round of designs had been crammed with a lot of extra features and functions. The team had started with a single problem they wanted to solve but along the way they had added solutions to other problems and good features they’d seen in competitors.

The key processes for using Vibo as it was intended had been compromised by the desire to add more functions to the app and so core task routes were more complicated and more confusing than necessary.

Back to basics

Before we could start redesigning anything, we had to figure out what the problems were with the current designs. We quickly put together an interactive prototype in Invision and tested with a group of users looking for ways we could improve the functionality, usability and convenience of Vibo.

We specifically tested whether:

1.  People understood what Vibo was for at first glance.
2.  People could send and receive money through Vibo without problems.
3.  People saw value in having additional functionalities (including messaging, a newsfeed and an app store) within Vibo.

68%

Success Rate

36%

Usability Rate

40%

Accessibility Rate

72s

Average Task Time

Every one of our participants showed visible signs of frustration while trying to complete what should have been a simple task in Vibo. Some said if they had been using Vibo outside of the test environment they would have deleted it and tried a competitor.

Vibo would not be able to attract users if it would take almost a minute to pay in a busy shop or crowded marketplace when scanning a card or handing over money is instant.

Realigning design, business and users

Vibo’s team had started with a very clear vision of who they wanted to help and how they wanted to help them. During the design process, digital transactions had been reduced from the main focus of the app to another function alongside messaging, a newsfeed and an app centre.

We worked with the team to define some principles we could stick to going forward to ensure their core vision was not lost. With these principles in mind we developed a product roadmap, prioritising the features that would have the largest immediate impact on Vibo’s success.

Every one of our participants showed visible signs of frustration while trying to complete what should have been a simple task in Vibo. Some said if they had been using Vibo outside of the test environment they would have deleted it and tried a competitor.

Vibo would not be able to attract users if it would take almost a minute to pay in a busy shop or crowded marketplace when scanning a card or handing over money is instant.

Realigning design, business and users

Vibo’s team had started with a very clear vision of who they wanted to help and how they wanted to help them. During the design process, digital transactions had been reduced from the main focus of the app to another function alongside messaging, a newsfeed and an app centre.

We worked with the team to define some principles we could stick to going forward to ensure their core vision was not lost. With these principles in mind we developed a product roadmap, prioritising the features that would have the largest immediate impact on Vibo’s success.

Optimising with defaults

Vibo’s team intended for users to be able to pay and receive money in the same ways but expected a different method to be the most used for each. Our research supported this, so to improve the flows of each process we made the most common method the default for each.

When the user taps ‘Pay’, the ‘Scan a QR’ method is shown with quick access to the other methods on screen. Similarly when the user taps ‘Receive’, the ’Show my QR’ method is shown with quick access to the other receiving methods on screen.

At all stages in the new process it is clear whether you are paying someone or asking to be paid.

Optimising with defaults

Vibo’s team intended for users to be able to pay and receive money in the same ways but expected a different method to be the most used for each. Our research supported this, so to improve the flows of each process we made the most common method the default for each.

When the user taps ‘Pay’, the ‘Scan a QR’ method is shown with quick access to the other methods on screen. Similarly when the user taps ‘Receive’, the ’Show my QR’ method is shown with quick access to the other receiving methods on screen.

At all stages in the new process it is clear whether you are paying someone or asking to be paid.

User testing

We put our new prototype into the hands of new users and asked them to complete the same basic tasks as before. There was an immediate improvement as all users could correctly identify the purpose of Vibo.

The results show how much the basic usability of Vibo was improved by the new design. There were no instances of participant frustration and all tasks had near perfect success rates. Users were able to find their way around the app more easily and made more informed decisions at each stage.

User testing

We put our new prototype into the hands of new users and asked them to complete the same basic tasks as before. There was an immediate improvement as all users could correctly identify the purpose of Vibo.

The results show how much the basic usability of Vibo was improved by the new design. There were no instances of participant frustration and all tasks had near perfect success rates. Users were able to find their way around the app more easily and made more informed decisions at each stage.

98%

Success Rate

94%

Usability Rate

93%

Accessibility Rate

14s

Average Task Time

Although the new designs had performed much better than the original designs under testing, there was still room for improvement. We found that users would benefit from us exploring alternative routes to pay and request money, displaying transaction information clearly and effectively and improving the legibility of icons and text.

As users are now able to complete tasks more efficiently and effectively, the new experience we designed should improve Vibo’s chances of adoption.

Although the new designs had performed much better than the original designs under testing, there was still room for improvement. We found that users would benefit from us exploring alternative routes to pay and request money, displaying transaction information clearly and effectively and improving the legibility of icons and text.

As users are now able to complete tasks more efficiently and effectively, the new experience we designed should improve Vibo’s chances of adoption.

What I learned

Maintaining a clear direction is key. The guys at Vibo had a great idea that people would eventually enjoy using, they just got a little side-tracked. One thing I learned a lot from was reviewing video footage from our usability testing, which let us pay closer attention to what the users did and not necessarily what they explicitly said. By analysing their gestures and and errors, we were able to build a much better experience by positioning UI elements where the user expected them to be.

What I learned

Maintaining a clear direction is key. The guys at Vibo had a great idea that people would eventually enjoy using, they just got a little side-tracked. One thing I learned a lot from was reviewing video footage from our usability testing, which let us pay closer attention to what the users did and not necessarily what they explicitly said. By analysing their gestures and and errors, we were able to build a much better experience by positioning UI elements where the user expected them to be.

Want to chat?

hello@jimles.co