Easy-pay Kleedje from Mobiquity

This 3-month company challenge made cashless payments possible through a QR code blanket and app at Kingsday fleamarkets.

shows three iphone mockups of app concept

Role

Product Designer

Date

February - April 2019

Practices

User Testing, Product Thinking,
UX & UI Design

Methods & Tools

Ideation, Wireframing, Sketch, Adobe After Effects, Lottie, Usability Testing

Project context

While the whole country turns orange for Kingsday, kids sell old toys or their parents junk on a flea market to earn some cash. But with cash slowly disappearing, selling stuff for a couple of euros has become a bit of a hassle.

This company challenge, organised by Mobiquity, aimed to solve the payment friction and go test our product during Kingsday in three months. I was the sole designer on this project and got support where needed from my design colleagues. I created flowcharts, the branding of the app and blanket, conducted user testing and collaborated with architects and engineers for the implementation.

1. Design Challenge

The creative department came together and we went all-in ideation mode. Because of the solvable frictions, PR value and connection with a physical product, Easy-pay Kleedje was picked out of 11 ideas for this year’s design challenge. From this moment I had three months to start from an idea towards a working product, which we could try out on Kingsday.

picture of Easy-pay Kleedje in the park with children
early screenshot of Sketch

Together with another designer I mapped out each step of the user journey. In Sketch, I translated parts of the journey into wireframes below. This process was quite tricky and needed close cooperation with our engineers to make sure we would support real payments.

Because of the limited time and feasibility, we used an external payment provider: Tikkie. This payment app is widely known and accepted in the Netherlands. This integration highly influenced the flow, because our app needed to be connected with the Tikkie-app. Making our solution dependent on a different app. This connection process needed to be a smooth and clear as possible.

wireframe flowchart

With first draft ready, it was time to create a visual style. To get started I asked the help of an UI and motion designer, which guided me along the way with feedback and inspiration. After this I peer reviewed the designs with multiple colleagues for improvements.

logo
iphone mockup screen add name
web mockup landing page
iphone mockup scan blanket

The orange wave background animation was tricky to realise in the app. I just started working with Lottie and apparently it doesn’t support effects or expressions from After Effects (which was the only thing I used). Through trying and failure, together with the developers we made it work. I find it important to add a little extra (the animation), it made the app more visually attractive for kids.

2. Practice run with kids

Together with the engineers we created a simple demo which I could use for testing. I invited some of my colleagues' kids to the office. Interviewing kids is pretty hard, finding the right balance between getting answers and by not asking leading questions. But at the end the results are really fascinating and it was an awesome experience. Interesting results were found and were implemented in the next iteration, which you’ll find below.

picutre of kid using app during user testing
screenshot of after effects for wave animation

I had to make small adjustments to the copy and UI to get them to better understand the process of connecting our app to Tikkie. But even so it was hard to let them complete the process. Also the wave animation was a bit too much, so I turned it down a notch.

1

Integration with Tikkie

I needed to make sure the kid understands the message and is familiar with Tikkie. The button opens Tikkie via deeplink. I had to change parts of the copy as well to improve the tone of voice.

iphone mockup explaining tikkie integration
2

Better safe then sorry

There is an extra step-by-step guide, I added this because it wasn’t always clear what the upcoming steps were. To minimise the error’s, while going back to our app it will automatically show the paste button for the Tikkie URL.

iphone mockup showing how to add tikkie url

3. Learn, adapt, evolve

It seemed that setting up their blanket via Tikkie was too hard. Because it was experienced as difficult and time consuming, we decided it was best to advice the help of a parent. As an extra I’ve made little printed manuals to help out the kid & the parent in setting up their blanket. I’ve designed the blanket in Illustrator and sent the files to a printing house to print these awesome blankets.

Even on a rainy Kingsday and with only eight blankets, we achieved fourteen individual transactions! Which I find a great accomplishment for a three month project.

leaflet showing instructions to setup Easy-pay blanket
close up picture of blanket with qr-code
say hoi

I've got some more work to show you—or let's connect and say hoi.