New deal confirmation experience at OLX

Year

2022

My role

Design

Team

PM, Data Analyst, Engineers

What's been done

Made the flow consistent on all platforms: iOS, Android, web and mobile web. They were all over the place before hand.

Context

Apps were made at different times and supported by different teams. Because of that and some technical limitations they were completely different UX-wise.

Legacy screens — What we started with was all over the place. Desktop, iOS and Android left to right.

This was a huge problem. Users had inconsistent experience between platforms (I might very well be using the iOS app and the web client on my computer) and for us it was very hard to make changes to this flow. It was a no-brainer decision to make it consistent across the product and up to date with the design system.

Confirmation flow start — If you're confirming your first ever sale this is the first screen you'll see

Summary screen — If it's not your first time and we already have your info, you'll see the summary screen right away

Desktop summary screen — Desktop version being bigger has both of these steps on the same screen (or rather modal)

Card interaction — Changing the card to get paid to

We couldn’t just have a dropdown right away, which would be more conventional. We’re using a 3rd part payment platform and payment cards are handled on their side. What you see when you click “Edit” is an iframe. Having had these technical limitations I tried to make the most of it.

Success screen — After you've accepted the deal you have to actually send the product. This screen shows everything you need to know about that. It doesn't load instantly so I added loaders.

Error state — If something goes wrong there's an error state as well.