Advertisement creation revamp
Overview
The Marktplaats Pro team was in the progress of transitioning the entire website from Knockout.js to React.js. This gave us the opportunity to look at current flows and pages, and decide if there's anything worth improving.
One of these flows was the Advertisement Creation flow, which me and the team decided needed a refresh.
Role
UX Designer
UX Design - UI Design - Workshops - Developer Handover
Why the revamp?
The advertisement creation feature was last updated approximately 7 years ago. There were inconsistencies in the design and it appeared that new features kept being added without thinking about the whole picture.
When the team decided to move the entire platform to React.js, this was the perfect opportunity to fix these problems, and to create a consistent design.
Getting the whole team on board
Since it had been a long time since this feature was last updated, it was very important to get the team on board with the change. Therefore, I was required to explain to the team what was wrong with the current flow, propose how we can fix it and agree on how to move forward with the design.
For this, I decided to run a workshop with three main goals
Goal #1
Understand what's wrong with the current flow
Goal #2
Brainstorm solutions and ideas on how to solve the problems
Goal #3
Decide on which design to move forward with
The Workshop
Stage 1: Understanding why the current design needs improvement
The first thing I wanted to do is to explain to the team why the current flow and design need to be updated. Therefore, I highlighted three major problems to the team through the help of a Miro board.
The problem with budgetting
One of the major problems with the flow were the inconsistencies depending on the user's budget selection and if the user was onboarding or not.
The advertisement creation flow would have by default three steps. However, in the case that the user would select Automatic Bidding, the third step would be skipped without any explanation.
Inconsistencies during and after onboarding
During onboarding the flow would only include 2 steps, while any time the user would create an advertisement after onboarding, the user would have 3 steps to complete. But, as explained in the previous point, depending on the user's budgeting selection the third step wasn't always reached.
Controlling Campaign Level budget when creating an advertisement
Automatic Bidding was introduced at a later date as a feature to help users dynamically adjust their CPC (Cost-per-click). However, advertisements with Automatic Bidding are limited only by the Campaign Daily Budget. And this is where the problem appears.
Up to that time, the user could set his Campaign Daily Budget to Unlimited, meaning that an advertisement with Automatic Bidding enabled would be able to spend without any limit.
Therefore, a band-aid feature was added allowing the user to set their Campaign Daily Budget within the advertisement creation flow, which proved extremely confusing even for employees of Marktplaats.
Stage 2: Brainstorming solutions and ideas on how to solve the problems
The second step involved looking together with the team at potential way to fix these problems identified in the form of very quick brainstorming.
Stage 3: Decide on which design to move forward with
For this final step I took a bit of time in order to propose some solutions on how the designs and overall flow might look like. I presented 4 different designs to the team, with one of them being my recommendation on how we should move forward.
Finally, we agreed on the design to move forward with.
The Flows
After the decision on how to move forward, we had to consider both the onboarding and regular flow for creating an advertisement.
The core flow remained the same, with each flow having one extra step to fit its purpose.
Onboarding Flow
Set up the budget you want to spend per day
Choose the category your advertisement belongs in
Input all the details for your advertisement
Select the CPC (Cost-per-Click) of your advertisement
Confirmation that your advertisements is online
Regular Flow
Choose the category your advertisement belongs in
Input all the details for your advertisement
Select the CPC (Cost-per-Click) of your advertisement
Confirmation that your advertisements is online
Option to increase their Campaign Daily Budget
The Designs
After agreeing with the team on the final flows and on how to move forward, I could start creating the high fidelity designs to be handed off to the developers.
Campaign Daily Budget
Advertisement Category
Advertisement Details
Bidding strategy
Confirmation
Increase campaign daily budget
Reflection
Development
The designs and hand-offs were done and prepared for the developers. The feature wasn't finalized by the time I left the project, but the early stages were promising and the project was taking shape just as we agreed on as a team.
What I learned
It's important to reach an agreement early with the team on the direction you want to take the feature
Take into account development limitations by being in constant contact with the development team
Trust yourself, especially if you have the information to back it up
