Reporting Dashboards

A customizable and permission-based dashboard providing a full view of all advertiser initiatives, media, and integrations.
Frequence Logo
Designing the dashboard end-to-end, working closely with engineering to craft analytical experiences in detail.
Solo designer, 1 Client Success Manager, 1 Product Manager, 5+ engineers.
January 2021 - present
Figma, Sketch, Zeplin, Miro, Storybook, JIRA / Confluence
zoomed-in frame of a dashboard redesign

Project Context

One of the services Frequence provides for our larger customers is a fully customizable reporting dashboard where they can manage their ad campaign data. As we expand our customer base, we wanted to give the same impactful experience to our smaller customers, but we needed to design and build in a shorter timeframe. We resolved to duplicate existing code and reskin the design with minimal development effort, making it unique and up to date with modern trends and accessibility.


Reporting dashboards were initially built for our larger businesses. Hence the experience could take a couple of months to design and build with all new components and code. And sometimes, our partners compete in the same market using the reporting dashboard as a marketing tool to acquire more business. With how fast we started gaining business with smaller agencies, we needed a way to speed up the design and development process. How might we provide our long-tail users with reporting dashboards that feel and look different from previous ones while achieving a low engineer effort, quick rollout, and high impact?


By duplicating the code from existing dashboard frameworks and redesigning it with updated and accessible designs to key features of the UI widgets, we decreased the effort from development and wait time to onboard new partners. Advertisers can analyze their campaign performance and download printable data visualization PDF summaries in their tailored reporting dashboard.

Skip to design process
The old and new design side by side

Key Features

A screenshot on the left of older previous design. A screenshot on the right of it showing the new and updated redesign.

Modern approach

The design on the left is one of our oldest dashboards. As design trends change throughout the years, we wanted to take on a more modern approach that matches other popular designs in the industry. The design on the right shows the reskin of the left design.

Improved balance

The original dashboard design had a masonry grid-like design and a mix of full and half width widgets. On some product pages the widget grid was unbalanced leaving large gaps. In our new approach, we redesigned the length of a few widgets to ensure they all fit better together.
A screenshot on the left showing the original design with a large gap between widget spacing. A screenshot on the left showing all widgets fitting nicely together


Due to resource limitations, we were not able to do primary research; however, we were able to utilize additional research methods. We acquired previous internal research done on our target audience and collaborated with CSM, ENG, and Product using the Lean UX Canvas to gain more insight and influence the design.

Lean UX model with sticky notes


The PM provided me with the requirements of the pages that the analytics module should have and any new additions needed for the partner. I wanted to gain a full picture of the page structures and make better design decisions so I created a sitemap.

A sitemap of the dashboard made in FigJam


To get started with the ideation phase, I would then sketch out my designs. The prioritization matrix and Lean UX model helped with auditing the existing dashboards and giving me the context to produce different ideas. Here’s an example of one of the overview pages.

A rough sketch of the overview product page with notes around it.


The wireframing phase took less time with the help of existing wireframes imported from Sketch as well as digital sketches for new redesigns. During this process we got a lot of great feedback from our CSM and engineering teams on specific partner requirements and configurations.

A greyscale wireframe screenshot of the early designs of the pages before moving onto high fidelity designs.

Visual designs

The next step was to start working on visual designs. I did the entire visual design for this project as well as all other analytical dashboards under this initiative. There were many iterations of the visual designs and after reviews and feedback sessions with stakeholders and engineering, we settled with a direction. Working closely with engineering, we maintained and contributed new patterns to our UI kit in Storybook.

Design iterations during feedback sessions

Design iterations shown during feedback sessions

Order of designs left to right: oldest, first child design, newest child design

Screenshot previews of finalized designs using the same code framework

Widget variations from one parent design to two of the children designs

Widget variations with different CSS styling

Outcome & insights

Redesigning previously created dashboards and focusing mainly on CSS changes helped us achieve a few goals: reducing dev efforts by 30% and increasing the dev-to-release speed for new analytical dashboards from months to weeks! Since January 2022, our Analytics Team has introduced 6 new reporting dashboards and established a process that satisfies our customer and internal teams – yay!

Experiments I’d like to perform moving forward are adding Google Analytics metrics to the webpages, applying heatmaps to see how people use our platform, and conducting interviews with older and newer advertisers. We’d like to know more about how users make selections in the UI, what data they are downloading, and their goals when navigating through their dashboard.