︎

Deidre Wong


Work

2019
Brand
2018
UI/UX

Personal projects

2017
UI/UX
2016
 Brand

Other


Contact

︎
︎
︎

About

︎
︎︎︎

Ads manager navigation redesign exercise


Using a task analysis framework, I started this redesign project by identifying key areas within a product that would meet immediate user needs, and help them achieve their end goals.


Facebook Ads manager



The Problem


An information-heavy workspace with no visible workflow options, weak visual hierarchy, and multiple navigation bars.

  • Multiple navigation bars that reveal/collapse in different directions.
  • Icons and shortcuts that provide little context or relevance to the user.
  • Collapsible, content-heavy drawers that overlap onto the main navigation screen.
  • Poor content organization and deeply nested information.
  • Unclear status indicators.





Step 1: Task breakdown


Users will log into the Ads Manager and engage in one of several potential tasks below in no particular sequence:

  1. Check on the performance of their ad(s).
  2. Create, edit, delete, or duplicate an ad.
  3. Calibrate their ad settings and budgets according to advertising goals.
  4. Publish, pause, or unpublish an ad.
  5. Conduct A/B testing.
  6. Generate and download reports


Step 2: User observation


5 key types of data to collect for task analysis:

  1. Trigger: What gets users to start their task.
  2. Desired Outcome: How they will know when the task is complete.
  3. Base Knowledge: What will the users be expected to know when starting the task.
  4. Required Knowledge: What they need to know to complete the task.
  5. Artifacts: What tools or information do they use in the course of the task.

In Application:

  1. Trigger: The need to effectively advertise their business’s products and services, and/or spread brand awareness to potential and existing customers.
  2. Desired Outcome: Published ads display clear status indicators, timestamps showing the last update on their displayed performance results, and clear action buttons.
  3. Base Knowledge: Users should be aware that the platform is a one-stop solution for their Facebook and Instagram advertising needs.
  4. Required Knowledge: They need to know and configure particulars of an ad strategy
  5. Artifacts: Referencing the task breakdown completed above in Step 2, I can expand and deduce the following tools to be the predominantly used tools/features within the site.


Redesign



Starting with the navigation bar, information on the screen is pared down. The main user tasks are re-categorized according to user goals:


  1. Ads Performance: Data visualization tools, and data grids comparing ad performance.
  2. Campaigns: A workspace to create ads, view all ads, and edit ads.
  3. A/B Testing: Workspace with A/B testing tools and results. 
  4. Reports: A report generator and shared repository to store and share reports with other organization members.


The final result is a cleaner, more user-friendly workspace.




Clearly distinguished from the rest of the content on the screen, the top most navigation section contains Facebook Business’s master navigation menu, the refresh button, profile settings, notifications, and help button. 


On the top left corner, the dice icon displayed next to Facebook Business header reveals a drawer style menu that slides out from the right side of the screen.


Before


Old menu design floats on top of the data grid, resulting in  visual clutter.

After


Redesigned drawer menu extends to the full length of the screeen, with a tinted backdrop.