koddi - Simplifying the experience of media plan creation for hotels
B2B Saas · PRODUCT DESIGN · user testing
PROBLEM STATEMENT
Koddi allows brands to create suitable media plans. But eventually, existing brands started facing difficulties because of increased requirements. They felt they had less flexibility and control in the process. Also, the outdated experience confused new users.
MY SCOPE OF WORK
Media Creation Flow Redesign - I was responsible for conceptualisation, designs, new features and user testing
THE TEAM
2 designers, 1 product manager and engineers
KODDI ONE (K1)
Koddi One is an all-in-one advertising platform that enables users to track ad performance, create media plans, manage campaigns, and handle budgeting and billing. Its robust set of Admin Tools offers a comprehensive solution for all user needs in one place. Focused on travel, hospitality, and e-commerce, Koddi provides data-driven insights to improve visibility, engagement, and ROI for brands globally.
CREATE A MEDIA PLAN - OLD EXPERIENCE
Step 1 - Users select the Hotel, Goal and Start Date. They also have the option to Add Funds to the hotel balance if required.
Step 2 - They are presented with a media plan that includes recommendations distributed according to the budget and inputs provided in the first step. They have the option to make edits and then save the media plan.
Step 3 - Once the media plan is saved, users can view all the current media plan details on the Pacing tab. The channels are divided into Direct and OTA. Users have the option to edit the overall budget of the media plan.
PROBLEMS OBSERVED WITH THIS FLOW
👉 Incomplete Media Plans, an increase in in-between drop off rates
📞 Increased calls to customer support for queries regarding the flow
⏱️ Low Engagement when a new feature is introduced, as it goes unnoticed.
Understanding the Users
A deep dive into User Challenges, Friction Points in the Flow, User Requirements..
😵💫 Redundancy Created Confusion
Direct Media and OTA budgets details were shown twice, both in Pacing and as separate tabs, users thought they were dealing with two separate plans instead of one
✨ Need a hollistic view of the media plan
Users desired a more seamless and integrated method of creating a media plan, as the current process felt fragmented to with many tabs and steps
👀 Unable to see the monthly budgets for the period before saving a media plan
Users expressed that it would be easier for them to plan the budget if they could have a comprehensive view of the budget for upcoming months at a glance, along with the ability to edit a month’s budget before saving a media plan
👩 Auto allocation of future budget changes without user’s approval
Users did not like the automatic allocation of future budget changes and wanted the ability to approve changes before implementation for future months
🚫 These were the major reasons for
increased drop offs, multiple attempts and increased customer support calls
NEEDS OBSERVED
🖊️ Publisher level edit
Users did not have the ability to edit the publishers budget on their own. They mentioned it several times.
💭 Granular Details
Speaking to the marketing team gave us the insight that users ask them for more granular details of how their media plan is doing
💻️ Clean scalable UI
The interface was outdated, it made it difficult for users to adapt new features and also to introduce something new
Insights includes input from marketing managers of the clients, Koddi Marketing team and Koddi customer support team.
INITIAL SOLUTIONS - DID NOT WORK
Monthly Budget Allocation
Need
Users desired visibility into monthly budget distribution while planning, especially for the next few months.
Solution
During plan creation, we displayed the first 3 months' budget (left image), assuming users might need insight into distribution, potentially solving any confusion about budget allocation.
Did not work:
Data showed most users set run dates for more than 3 months, scalability issues in future with this UI.
Curious Case of Tabs
Issue
Users were confused by the presence of both Direct and OTA (with channels) as tabs and in the Pacing section, leading some to perceive them as two separate plans
Solution
We removed the extra Media Plan tab, informing users they can start a new media plan from any tab they prefer
Did not work:
Users perceived that completing both tabs is optional, these could give rise to even more incomplete flows
Starting Over Again ✨
DESIGN GOALS
🕹️ User Control
More control to the user to take informed decisions for their media plans
✔️ Simple and easy process
The creation process should be quick and easy to follow without extra help
😀 Transparency
Users should be able to see what is the future of the plan they are creating
USER JOBS AT EACH STEP
👉 We started with prioritising user jobs throughout the process - the steps they would take to create a new media plan from the beginning to the end as well as manage media plans
It was very clear that we needed a simple and easy navigation for creating a media plan, also users faced challenges in each step of the process.
Step 1 - Input Plan Details
Media plan details - plan name, goal selection and run dates for the plan, activate
Step 2 - Budget Recommendation
See total budget for run dates, edit total budget, see budget for future months, edit budget for months, increase/ decrease number of months
Step 3 - Channel Allocation
Budget allocation for Direct and OTA channels, edit, % budget used, activate/ inactivate channels, save/ cancel media plan, edit publishers/ bid
EXPLORATIONS AROUND NAVIGATION
We went into exploring different ideas, layouts, keeping in mind scalability which can accommodate any future introductions. Below is the chosen layout, it is more like a guided process for creating the plan, leaving no room for confusion
Campaign Details
Separate tabs for Direct and OTA
Channel details, % budget used, publishers
Bottom section stays disabled until media plan details entered in the top section. Greyed out bottom section gives the user preview of the next steps
Completed top section enables the bottom section showing channel allocations
Once the user inputs the media plan details, channel allocation according to the total budget
Enable customization of channel (left), and abililty to edit publisher-level details for greater granularity (right)
ELEMENTS IN DETAIL
Channel Allocation Cards
First Version
Channel Card
Expanded Card View
Tabs to switch between Direct and OTA channels
One of the important elements in the media plan are the channel allocation details. We needed a clear, concise and easy to use way to display it to the users so that they don’t get confused.
EXPLORATIONS
DIRECT & OTA
Direct
OTA
Since we know that users wanted to see everything upfront, we eliminated the need for tabs for Direct and OTA. Dividing it into two section gave the users a simple and transparent view of the information needed. Repetitive information was omitted.
Simple and Transparent
Final Version
FEATURES
We introduced a few features which were the requirements presented to us by the users several times, something that would help them.
👀 Unable to see the monthly budgets for the period before saving a media plan
Users expressed that it would be easier for them to plan the budget if they could have a comprehensive view of the budget for upcoming months at a glance, along with the ability to edit a month’s budget before saving a media plan
👩 Auto allocation of future budget changes without user’s approval
Users did not like the automatic allocation of future budget changes and wanted the ability to approve changes before implementation for future months
View Monthly Budgets
We know from our research (user interviews, support feedback, etc) that users wanted to see the budgets for all the months within their run dates, and edit it prior to saving the plan.
Solution - Clickable budget cards for every month showing Direct and OTA budget distribution
User can Approve/ Decline for the updated budget from the notification panel or the tooltip on the month card
Signifiers to indicate when the budget usage is
below/ above the recommended budget.
Allocation Approval and Signifiers
Users faced problems with auto allocation of the updated monthly budgets. For example: if there’s any change in a month's budget due to excess usage or less usage than the allocated monthly budget, users are not informed about this (no notifications/indication). The budgets are automatically updated.
Solution - Notify and provide user the control to approve the budget change, if they want to allow the change or keep the same. Also, added signifiers to indicate the user when the monthly budgets are used excess or used less.
Expanded View
Insights Section
Insights Section
Introducing Insights, providing users with comprehensive details regarding the performance of their media plan, organised by time and date categories.
It will notify users of any significant updates regarding the performance of their media plan.
💭 Granular Details
Speaking to the support team gave us the insight that users ask them for more granular details of their media plan’s performance
Once the user inputs the media plan details, the bottom sections are enabled showing the channel allocations and monthly budget distributions.
The bottom bar is sticky that has Save and Cancel buttons
Full Page View
Sticky bottom bar
FINAL DESIGN - MEDIA PLAN CREATION
OTHER ELEMENTS
Insights - Empty state
State before saving the media plan when there’s no data to record or when there’s no new alerts
No End Date
When users create a plan that have no End Date, they can check the box as
shown below.
Publishers
Publishers budget for Direct channels
Targeting Tools for OTA Channels
OTA channels includes targeting tools, that help media managers target specific segments, countries or campaigns.
Bid Automation Enabled - Bids set to AUTO
Edit Monthly Budget PopUp
When the user edits their budget, they are shown the details on a popup before they continue with the update
Error PopUp
User enters a budget less than the current budget of that month (min. budget), the error popup informs the user to enter a higher value.
POP UPS
Testing Script
A script of more than 15 tasks was made that had to be completed by the users, moderated user testing. Few screenshots are below.
USER TESTING
🌝 No End Date Checkbox
Given that most hotels opt for the 'No End Date' option, it would be more practical to make the checkbox more prominent to speed up the process and prevent accidental overlooking of the checkbox in the dropdown.
👉 Observation/Feedback
Users said their media plans mostly do not have an end date, so the No End Date option was most used. Also, there was some confusion regarding the start date, users (media managers) assumed that they need to start from the first day of the month.
👉 Observation/Feedback
Users said that they don’t want to commit to the budget for more than 4 months and seeing all months at once is overwhelming, but also liked the possibility of being able to see it if needed.
Updated Design
Updated Design
Notable Feedback After User Testing
⌛ Dates Tooltip
For dates, helpful text can explain to the user about the possibilities. So a tooltip was added mentioning that the media plan can start from any day of the month.
⌛ Monthly Cards
Instead of 12 months, now the media plan total and just the next three months will be displayed, with an option for users to view the subsequent three months if desired.
Updated Design
⌛ Channel Status
Users couldn’t distinguish between the Inactive and Pending states, reason being both were showed in greys, keeping in mind the accessibility factor, names were added beside them.
⌛ Allocation
Instead of channel allocation, it was better understood as Tactic allocation by users. So the header was changed to “January 2021 Tactic Allocation”
Thank you for your time :)
explore other work
Chmuraecon - Talent Watch (a Labor Market
Intelligence Tool) (In Progress)
Freshly - Mobile App
A kitchen companion app for meal planning and recipes
Real-time job postings data to provide intuitive insights that empower Talent Acquisition teams
USERS OF KODDI
Koddi offers its services to hospitality industry users typically include digital marketing managers, advertising specialists, or even dedicated agency partners who handle the advertising campaigns on behalf across various channels, such as Google, Facebook, and other online platforms.
Digital Marketing Managers
Advertising Specialists
Dedicated Agency Partners
