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.
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.
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.
I collaborated with the PM and lead engineer on the initiative to work on a feature prioritization matrix. This helped us balance the needs of the user and the business.
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.
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.
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 shown during feedback sessions
Screenshot previews of finalized designs using the same code framework
Widget variations with different CSS styling
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.
