Tokopedia Ads Dashboard Case Study about Seller Dashboard Tokopedia Ads (TopAds) Improvement
image
Improve the TopAds dashboard to a compact version, So that the user can see more data in the dashboard table without having to scroll through repeatedly, thereby reducing their pain point. 
Product Web Desktop
Contribution Interface Design
Experience Design
Interaction Design
User Testing
Interactive Prototyping
Icon Design
Timeline Oct - Dec 2021
Project
Overview Based on the research insight, the main seller's reason for visiting the TopAds Dashboard is to check the statistics or Ads performance. There are more than half of the total number of sellers satisfied with the TopAds Dashboard, a quarter of the sellers are delighted, and the remaining other users are unsatisfied. The unsatisfied seller expects the TopAds Dashboard to show a more user-friendly interface.
Role & Responsibilities
  • My Responsibilities as a UI UX designer focussed on exploring a lot of design solutions and validation. 
  • Collaboration with stakeholders, product teams, and Front End teams
Tools and methods used
  • Figma, Adobe Illustrator
  • Collaboration, Usability testing, Bug bash
Problem
Statement
What problem were you solving?
  • Sellers have much scroll to see the information on the dashboard
  • There remains the big space on the column field in width and height
  • The font size is still too big for the seller whose screen is less than equal to 1366 px (the most common laptop resolution)
Why was it important? Those issues cause not all of the information can be showed on the dashboard. So, we need to always improving the dashboard especially on table and statistic with compact layout interface to make overall information on the dashboard become more easier to analyze
Research
Research methods
  • Gathered Research Insight from RAD team
  • Competitive Research
Key insights gathered
  1. There are more than quarter of sellers that visit the dashboard more than once a day and less than quarter of sellers only once a day. 
  2. The main reason to visit the TopAds Dashboard is checking the statistic or Ads performance, then check the remain credits. 
  3. Total click is the first thing first that most of the seller check while visiting the dashboard. However all features are count as important for seller, Especially “total terjual” and “total pendapatan”.
  4. Most competitors have a clean and modern interface, making it easier for users to see and differentiate each part of the content presented.
Ideation Process Based on the research insight above, I and team conducted brainstorming to gain new ideas and various solutions. The method that we use to narrowing ideas is a How Might We? (HMW) to explore ideas are possible solutions, low effort and hight impact.
Problem
Sellers have to scroll a lot to see information on the dashboard because there is a large space in the width and height columns, and the font size is too large, making it difficult for sellers with small device screens.
How Might We?
  • HMW design a information on dashboard easily and clear without the user to much scrolling?
  • HMW design a dashboard more compact ?
  • HMW design a dashboard more easily to manage the table and column base on seller needs?
Wireframe In this phase, I have a couple of ideas and am grouped into 2 groups, With a consideration of the effort and impact of building the design solutions. The design solution concept is created with a block frame. Below is the list of group solutions:

  • Initial Solution
  • Ultimate Solution
Initial Solution
( 1 ) Rearrange the column position Based on research insights from the RAD team, Users have some columns that are more important than others.
image 466
(2) Reduce font size, Space, and margin of the some component Improve the column and row to be more compact
image
(3) Change the component style Changing some component styles to other components is more intuitive and concise.
image
(4) Change column type to fixed position Some columns have a fixed position when the user scrolls horizontally.
image
Ultimate Solution
( 1 ) Add feature Manage the column view There are options to setting table display, The options is default, comfortable and compact.
image
( 2 ) Add feature change to table fullscreen mode User have the control to view entire table in fullscreen in one click.
image
(3) Add dropdown filter of the column Dropdown display the entire column in one module that can shown and hidden.
image
(4) Add menu filter options of the columns List of the columns separated into several dropdown menus, User must click one by one to show and hide columns.
image
(5) Add feature show and hide column Dropdown contains list of columns that can shown and hidden, but user must be scroll down to see other columns.
image
(6) Add options to expand and collapse width of the column More easily to change each width of the column with horizontal handle bar.
image
(7) Add menu for customize table column Contains all columns and just drag and drop to change column positions.
image
User Flow The user Journey start from Tokopedia Home page or Seller Tokopedia to Tokopedia Ads Dashboard.
image 467
Design Critique
& Iteration To faster to take a decision and collect early feedback from each explorations ideas above.
Objectives Validate and collect feedback from each explorations ideas, and solutions to make it more, concise, compact and easily to use by sellers.
Participants Stakeholders Teams
Product Design Teams
Engineer Teams
Key insights gathered
  • It's also okay to use Zebra Stripes in the table row because it can guide users when viewing the row horizontally and vertically.
  • Customize column feature, users can set the position and number of columns they want to display, with the note that columns that cannot be edited should not be displayed.
  • For Status, it's better to use a dot indicator without displaying text (Active and Inactive)

  • Prefer the Compact Version row with the note that the caption for the number of Products and Keywords can still be shown under the group name.
  • Don't forget to make sure/align with UXD whether the new row design has an impact on the Experience when the seller takes an action, such as: editing advertising costs, actions, etc.
  • Agree about the sidebar menu shrinking/collapsing when the seller accesses the topads dashboard page.
  • The change status feature used to use a toggle, now it's no longer used because there are 3 statuses, finally using a dropdown.
  • Prefer using a table footer that can add the number of rows with several options, such as: 5, 10, 20, 50, 100.
Iteration Next Step, Reassess/Update UI Exploration based on feedback
Highfidelity
Dashboard Before and After dashboard improvement too compact and more suited to the seller's needs when viewing the information in the table
Customize Column Create a column setting feature to solve the problem of sellers who have difficulty using and find important info in the table according to their needs, and improve adoption and session performance.
Dashboard Tokopedia Ads Products
[Manual Ads] - Iklan Produk - Grup Level
[Manual Ads] - Iklan Produk - Grup Level
[Manual Ads] - Iklan Produk - Detail Grup Iklan [Manual Bid]
[Manual Ads] - Iklan Produk - Detail Grup Iklan [Auto Bid]
[Auto Ads] - Iklan Produk
[Manual Ads] - Iklan Produk - Detail Kata Kunci [Manual Bid]
[Manual Ads] - Iklan Produk - Detail Kata Kunci Negatif [Manual Bid]
[Manual Ads] - Iklan Produk - Detail Wawasan Kata Kunci [Manual Bid]
TDN - Display Network
[Manual Ads] - Shop Ads - Group Level
[Manual Ads] - Shop Ads - Detail Group Level
Sweat the details Component details included spacing, margin, padding, and colors.
image
Interactive
Prototyping As a TopAds Dashboard page simulation to validate ideas, solution, functionality, and interaction before the product is build
Testing &
Iteration On this phase, I conducted usability testing the TopAds Dashboard page to ensure and validate the new design.
Research methods Usability Testing
Objective To collected feedback and user pain point when using the new design TopAds Dashboard
Sample Size 5 Interviewer
Key insights gathered
  • Mostly users feel comfortable when using the new dashboard because you don't need to scroll repeatedly in the table.
  • Mostly users not aware with changes in the new dashboard design.
  • The customize column entry point is quite difficult for users to find because of its small size and not being too prominent, so they need to be directed to click on it.
  • Users can easily use the customize column feature, starting from the check and uncheck functions, as well as drag and drop columns. However, some have given feedback that columns that cannot be changed should not be displayed in the menu so as not to confuse
Iteration Base on key insight above, I iterate the design and fixed some parts that needed to be improve, including discussion with team and stakeholders.

One of the solutions I provide includes adding user onboarding about new features when the user accesses the dashboard.
Final Design
Visual design Final design after iteration and discussion with our team, included tech team to ensure the UI and Interaction possibility so that the development process will run smoothly.
QA Test / Bug Bash In this phase, we conduct QA testing with all the teams involved. In this QA, we record all the findings including logic, flow, etc.
What I did After I collected all of the finding and noted on spreadsheet, an then I direct discussion with related team, especially Front End team to discuss about UI pixel perfect.
Results &
Impact
Measurable outcomes  After release more than 50% Sessions performed actions Avg. loading time reduced by 40% (from 6.1s to 4.36s)
How the design improved the user experience Users can shop easily and comfortably on the desktop page without being hampered by a boring experience like before.
Key Learnings
Challenges faced Collaboration between backend engineers and frontend engineers, to understand the needs and considerations of each division so that the development process can run smoothly. So that every part of the design or module that is developed can be conveyed well even about pixels, we complete it together.
Copyright - All Material belongs to PT Tokopedia
© Copyright All Material belongs to PT Tokopedia
© Copyright All Material belongs to PT Tokopedia
Tokopedia Ads Dashboard Case Study about Seller Dashboard Tokopedia Ads (TopAds) Improvement
mockup
Copyright - All Material belongs to PT Tokopedia
Improve the TopAds dashboard to a compact version, So that the user can see more data in the dashboard table without having to scroll through repeatedly, thereby reducing their pain point. 
Product Web Desktop
Contribution Interface Design
Experience Design
Interaction Design
User Testing
Interactive Prototyping
Icon Design
Timeline Oct - Dec 2021
Project
Overview Based on the research insight, the main seller's reason for visiting the TopAds Dashboard is to check the statistics or Ads performance. There are more than half of the total number of sellers satisfied with the TopAds Dashboard, a quarter of the sellers are delighted, and the remaining other users are unsatisfied. The unsatisfied seller expects the TopAds Dashboard to show a more user-friendly interface.
Role & Responsibilities
  • My Responsibilities as a UI UX designer focussed on exploring a lot of design solutions and validation. 
  • Collaboration with stakeholders, product teams, and Front End teams
Tools and methods used
  • Figma, Adobe Illustrator
  • Collaboration, Usability testing, Bug bash
Problem
Statement
What problem were you solving?
  • Sellers have much scroll to see the information on the dashboard
  • There remains the big space on the column field in width and height
  • The font size is still too big for the seller whose screen is less than equal to 1366 px (the most common laptop resolution)
Why was it important? Those issues cause not all of the information can be showed on the dashboard. So, we need to always improving the dashboard especially on table and statistic with compact layout interface to make overall information on the dashboard become more easier to analyze
Research
Research methods
  • Gathered Research Insight from RAD team
  • Competitive Research
Key insights gathered
  1. There are more than quarter of sellers that visit the dashboard more than once a day and less than quarter of sellers only once a day. 
  2. The main reason to visit the TopAds Dashboard is checking the statistic or Ads performance, then check the remain credits. 
  3. Total click is the first thing first that most of the seller check while visiting the dashboard. However all features are count as important for seller, Especially “total terjual” and “total pendapatan”.
  4. Most competitors have a clean and modern interface, making it easier for users to see and differentiate each part of the content presented.
Ideation Process Based on the research insight above, I and team conducted brainstorming to gain new ideas and various solutions. The method that we use to narrowing ideas is a How Might We? (HMW) to explore ideas are possible solutions, low effort and hight impact.
Problem
Sellers have to scroll a lot to see information on the dashboard because there is a large space in the width and height columns, and the font size is too large, making it difficult for sellers with small device screens.
How Might We?
  • HMW design a information on dashboard easily and clear without the user to much scrolling?
  • HMW design a dashboard more compact ?
  • HMW design a dashboard more easily to manage the table and column base on seller needs?
Wireframe In this phase, I have a couple of ideas and am grouped into 2 groups, With a consideration of the effort and impact of building the design solutions. The design solution concept is created with a block frame. Below is the list of group solutions:

  • Initial Solution
  • Ultimate Solution
Initial Solution
( 1 ) Rearrange the column position Based on research insights from the RAD team, Users have some columns that are more important than others.
image 466
(2) Reduce font size, Space, and margin of the some component Improve the column and row to be more compact
image
(3) Change the component style Changing some component styles to other components is more intuitive and concise.
image
(4) Change column type to fixed position Some columns have a fixed position when the user scrolls horizontally.
image
Ultimate Solution
( 1 ) Add feature Manage the column view There are options to setting table display, The options is default, comfortable and compact.
image
( 2 ) Add feature change to table fullscreen mode User have the control to view entire table in fullscreen in one click.
image
(3) Add dropdown filter of the column Dropdown display the entire column in one module that can shown and hidden.
image
(4) Add menu filter options of the columns List of the columns separated into several dropdown menus, User must click one by one to show and hide columns.
image
(5) Add feature show and hide column Dropdown contains list of columns that can shown and hidden, but user must be scroll down to see other columns.
image
(6) Add options to expand and collapse width of the column More easily to change each width of the column with horizontal handle bar.
image
(7) Add menu for customize table column Contains all columns and just drag and drop to change column positions.
image
User Flow The user Journey start from Tokopedia Home page or Seller Tokopedia to Tokopedia Ads Dashboard.
image 467
Design Critique
& Iteration To faster to take a decision and collect early feedback from each explorations ideas above.
Objectives Validate and collect feedback from each explorations ideas, and solutions to make it more, concise, compact and easily to use by sellers.
Participants Stakeholders Teams
Product Design Teams
Engineer Teams
Key insights gathered
  • It's also okay to use Zebra Stripes in the table row because it can guide users when viewing the row horizontally and vertically.
  • Customize column feature, users can set the position and number of columns they want to display, with the note that columns that cannot be edited should not be displayed.
  • For Status, it's better to use a dot indicator without displaying text (Active and Inactive)

  • Prefer the Compact Version row with the note that the caption for the number of Products and Keywords can still be shown under the group name.
  • Don't forget to make sure/align with UXD whether the new row design has an impact on the Experience when the seller takes an action, such as: editing advertising costs, actions, etc.
  • Agree about the sidebar menu shrinking/collapsing when the seller accesses the topads dashboard page.
  • The change status feature used to use a toggle, now it's no longer used because there are 3 statuses, finally using a dropdown.
  • Prefer using a table footer that can add the number of rows with several options, such as: 5, 10, 20, 50, 100.
Iteration Next Step, Reassess/Update UI Exploration based on feedback
Highfidelity
Customize Column Create a column setting feature to solve the problem of sellers who have difficulty using and find important info in the table according to their needs, and improve adoption and session performance.
Dashboard Tokopedia Ads Products
[Manual Ads] - Iklan Produk - Grup Level
image
[Manual Ads] - Iklan Produk - Grup Level
image
[Manual Ads] - Iklan Produk - Detail Grup Iklan [Manual Bid]
image
[Manual Ads] - Iklan Produk - Detail Grup Iklan [Auto Bid]
image
[Auto Ads] - Iklan Produk
image
[Manual Ads] - Iklan Produk - Detail Kata Kunci [Manual Bid]
image
[Manual Ads] - Iklan Produk - Detail Kata Kunci Negatif [Manual Bid]
image
[Manual Ads] - Iklan Produk - Detail Wawasan Kata Kunci [Manual Bid]
image
TDN - Display Network
image
[Manual Ads] - Shop Ads - Group Level
image
[Manual Ads] - Shop Ads - Detail Group Level
image
Sweat the details Component details included spacing, margin, padding, and colors.
image
image
image
image
Interactive Prototyping As a TopAds Dashboard page simulation to validate ideas, solution, functionality, and interaction before the product is build
Topads-before-ut-2
Testing &
Iteration On this phase, I conducted usability testing the TopAds Dashboard page to ensure and validate the new design.
Research methods Usability Testing
Objective To collected feedback and user pain point when using the new design TopAds Dashboard
Sample Size 5 Interviewer
Key insights gathered
  • Mostly users feel comfortable when using the new dashboard because you don't need to scroll repeatedly in the table.
  • Mostly users not aware with changes in the new dashboard design.
  • The customize column entry point is quite difficult for users to find because of its small size and not being too prominent, so they need to be directed to click on it.
  • Users can easily use the customize column feature, starting from the check and uncheck functions, as well as drag and drop columns. However, some have given feedback that columns that cannot be changed should not be displayed in the menu so as not to confuse
Iteration Base on key insight above, I iterate the design and fixed some parts that needed to be improve, including discussion with team and stakeholders.

One of the solutions I provide includes adding user onboarding about new features when the user accesses the dashboard.
Final Design
Visual design Final design after iteration and discussion with our team, included tech team to ensure the UI and Interaction possibility so that the development process will run smoothly.
Topads-after-ut-2
QA Test /
Bug Bash In this phase, we conduct QA testing with all the teams involved. In this QA, we record all the findings including logic, flow, etc.
What I did After I collected all of the finding and noted on spreadsheet, an then I direct discussion with related team, especially Front End team to discuss about UI pixel perfect.
image
Results &
Impact
Measurable outcomes  After release more than 50% Sessions performed actions Avg. loading time reduced by 40% (from 6.1s to 4.36s)
How the design improved the user experience Users can shop easily and comfortably on the desktop page without being hampered by a boring experience like before.
Key Learnings
Challenges faced Collaboration between backend engineers and frontend engineers, to understand the needs and considerations of each division so that the development process can run smoothly. So that every part of the design or module that is developed can be conveyed well even about pixels, we complete it together.
Copyright - All Material belongs to PT Tokopedia
© Copyright All Material belongs to PT Tokopedia
© Copyright All Material belongs to PT Tokopedia