top of page

Facebook Automation Tool

Facebook automation tool is designed to automatically manage the tedious maintenance of client brand’s Facebook page more efficiently. It aimed to automate the ad management routine so we can focus on reaching results, faster.

My Role

I was responsible to design the interface, design system and interaction mechanism of the tool. I first needed to communicate requirements from Data & Marketing Team, to understand their usage needs. Later, communicating with front-end developers to implement the tool into part of the FF.ai service portal.

Clients

Fastforward.ai

Project Type

Dashboard Design, UI/UX Design, SaaS

Duration

Jan 2022 - Mar 2022

Team

Individual Designer, Data & Marketing Team

Tools

Figma

Facebook Automation Tool

The Challenge

It was a new project in FF.ai, most of the design components needed to be defined for this Facebook automation tool. A new design system was required as well to set up the tool. Therefore, I needed to research on competitors and understand the requirements from the team. I also needed to continuously communicate with developers, there were things they can do and they cannot do. Or if it requires too much effort to develop a certain function, we sit together to find the best way to realize it, whether using an existing library or prioritize crucial functions.

The Process

Aim of the Tool


Facebook automation tool is designed to automatically manage the tedious maintenance of client brand’s Facebook page more efficiently. It aimed to automate the ad management routine so we can focus on reaching results, faster.


The Initiator


Before having the tool, the Marketing team needed to manually adjust the settings in Facebook Ad Manager page. If we wanted to change a setting when a certain parameter was achieved, the team member needs to do it manually and instantly. There was no automation for our side, which costed valuable time and efforts of the team members.




Research


To begin with the project, I first needed to do research for the designs, this included a couple of perspectives:

  • Desk Research on competitors, to see how the others were designing and using similar tools.

  • Talk with stakeholder, in this case the users were my colleagues, I talked with all of the potential users to understand their requirements.

  • Talk with developers, to understand the technical limitations that we might have while developing this tool.



Atomic Design


Atomic design is methodology for creating design systems. There are five distinct levels in atomic design:

  1. Atoms

  2. Molecules

  3. Organisms

  4. Templates

  5. Pages


When designing a new project, I followed the atomic design methodology. To break down the elements into small atoms.





Design System


Since it was a new project in FF.ai, most of the design components needed to be defined for this Facebook automation tool. A new design system was required as well to set up the tool.





Design Flows


The design system was refined alongside the design of the holistic user experience for this tool. Flows were defined with dedicated use cases. The designs were communicated with stakeholders and developers throughout the process, and it is currently being implemented.

Some screens of the final designs:






Other Projects

Campaigns.png

User Interviews & Tests

Testing Interviews with 8 real users to evaluate the product usability for FF.ai.

Campaigns.png

Data Dashboard Redesign

Redesigned the data dashboard for Fastforward.ai to showcase data gathered from the platforms.

bottom of page