SaaS (Web App)
Module Type
SaaS (Web App)
Parent Software
RBG – Red Belt Gym
Role
UI/UX Designer
Design Duration
20 Days
RBG is a gym management platform used by gym owners to manage memberships, leads, and operations. A critical part of growth for these gyms is running Facebook ad campaigns - but there was a recurring problem:
“We want to run Facebook ads but the process takes too long and is too confusing.”
My Role
I led this module from start to finish:
Requirement gathering from stakeholders
UX research (deep analysis of Facebook Ads Manager over 3–5 days)
Defined the simplified user journey
Conducted brainstorm sessions with the team
Solely responsible for all UI & UX design and flow creation
The Simplified 3-Step Solution -
I designed a new ad flow inspired by Facebook’s original steps but made drastically simpler and faster. Here’s the experience:
1-Step: Choose Offers
The ad creation process starts with choosing an offer. In this step, the user sees a collection of ready-made ad templates that look similar to Facebook ads. Each template includes a primary text, headline, description, an image or video, and a call-to-action button. The user can browse through these templates and pick one that fits their campaign.
Once a template is selected, the user moves on to choosing the audience. Here, they can define who should see the ad by selecting the gender, age range, and location using a radius setting.
After setting up the audience, the user clicks on Launch to move forward to the next screen.
2-Step: Edit & Review Ad
After selecting the ad template and audience, the user lands on this screen to review all the details they've chosen so far. This step is mainly for making any final changes if needed.
Along with the previously selected details, users can also set:
Ad Budget
Ad Schedule (date and time)
Facebook Page to publish the ad
There’s also an Edit Ad button. When clicked, it opens a popup where users can update things like the ad headline, post image or video, and more. As they make these changes, they can see a live preview of the ad on the side - styled to look like a Facebook ad. A small note is shown to inform users that the final look on Facebook might be slightly different since Facebook may adjust the ad using AI.
Once the user feels everything is set and correct, they can click the Next button to move forward.
3-Step: Setup Automation
On this screen, the user sees a default automation already set up. This automation is designed to collect leads from the ad and send them directly to the RBG platform — no extra setup needed.
If the user wants more control, they can create their own automation using an easy drag-and-drop builder. It’s simple and doesn’t require any technical skills.
If they’re happy with the default setup, they can just click Save and Publish.
Once they do that, we show a message saying the ad is scheduled and waiting for Facebook’s approval.
Ads Dashboard (Home Page)
This is the main page where users can see all their ads. It shows ads that are scheduled, published, or paused. Users can switch between two views - a list view or a card view. There's also a search bar to quickly find any ad, and a "Create Ad" button to start a new one.
All ads are grouped under campaigns, just like Facebook. Each campaign can hold up to 5 ads. When a user creates a new ad, a campaign is automatically created with the ad’s budget. The user doesn’t have to do anything - the platform takes care of it in the background.
If there’s already a campaign with a set budget, and the user tries to create another ad, we show a message saying that the new ad will use the same campaign and budget. If the user wants to set a different budget, a new campaign will be created automatically. This makes the process smooth and easy without asking the user to manually create campaigns.
In the list view, users can see the status of the ad, its image and title, the start date, a link to view the automation, and an edit button. When they hover over an ad, a small preview appears - the same one they saw while creating it, so it’s easy to recognize.
The card view shows the same details but in a more visual layout. Here, the ad preview is always visible, making it easier to browse and compare ads at a glance.
To keep the UX simple
A new campaign is auto-created when a new ad with a unique budget is submitted
If an ad shares a budget with an existing campaign, it’s added there
Users never need to manually create or manage campaigns
Everything is managed behind the scenes, seamlessly
Results
Time to create a Facebook ad dropped from 30+ minutes → under 2 minutes
Clean, focused UX flow completed in 20 days
Enabled gym owners to run effective ad campaigns without confusion
Smooth integration into RBG’s automation and lead management systems
Reflection