ADmyBrand

A B2B web SaaS solution for Ads Management and Marketing featuring an AI Chatbot.

Overview

Can booking ads become as simple as issuing voice commands to AI devices or using chat interfaces like ChatGPT?

ADmyBRAND believes you can. They are revolutionizing ad booking and management by leveraging AI to simplify the process, making it as easy as issuing voice commands to devices like Alexa or using chat interfaces like ChatGPT. By streamlining ad management across digital, outdoor, TV, and influencer channels, ADmyBRAND delivers a user-friendly experience for handling campaigns.

Problem

ADmyBRAND underwent three development phases to add features and improve usability. Despite these efforts, users still found the platform confusing. The client sought a redesign to create a more intuitive experience, enhance the platform's appearance, and streamline the advertising process with AI. It was essential for users to be able to run multiple ads and quickly see their data mapped into charts.

Solution

Our team developed a prototype from the completed designs to conduct unmoderated user testing. We first created a detailed testing plan, then compiled a comprehensive findings report based on the user feedback. Using these insights, we iterated on the screens, produced Mid-Fi and Hi-Fi wireframes, and prepared them for developer handoff.

We focused on:

Simplifying viewing and interacting with Google ad opportunities.
Implementing an easy messaging feature for users to interact with AI and automatically generate ads.
Offering multiple payment methods for ad purchases.
Ensuring easy access to all ad campaign analytics.

Process

Discovery

Prototype

Testing

Redesign

Dev handoff

Reflection

Tools

Figma

Zoom

Lookback.io

Role

UX/ UI Designer (team of 5)

Discovery

The client discovered that users were confused and overwhelmed by the website's numerous features.

To address this, our goal was to conduct user testing to determine if the new design could reduce confusion and improve clarity. We set up a Zoom meeting to review the client materials and define our approach. We utilized established user flows to create prototypes from existing high-fidelity screens, developed user scripts, conducted tests, and iterated on medium and high-fidelity designs based on our findings. Our objective was to identify the root causes of user confusion and implement a more effective redesign.

Before developing a prototype, we thoroughly reviewed the user stories and user flows to gain a deep understanding of the product.

User Stories

As a user, I want to view and interact with ad opportunities with Google.
As a user, I want to interact with an AI feature where I enter prompts and ad creatives are automatically generated.
As a user, I want access to various payment methods at checkout.
As a user, I want to see all analytics related to an ad campaign I booked.

User Flows

These user flows directed our prototyping process, allowing us to understand the designers' intended navigation paths and the actions that triggered specific screens.

Testing

Our team developed a prototype for each user flow, making slight edits to some screens as needed, to prepare for usability testing.

Based on existing high-fidelity screens, I focused on prototyping User Flow 3, which required no major adjustments. Once I completed a test-ready prototype, I turned my attention to reviewing and refining screens from other user flows that needed slight modifications to be ready for user testing.

Here is an example of user flow 4: As a user, I want to see all analytics related to an ad campaign I booked.

Usability Testing Plan

After creating the prototype, we developed a user testing plan to assess usability and identify the root causes of the confusion users were experiencing. We identified our target users as small business owners who have some technological experience and are familiar with ad campaigns. We then conducted the unmoderated user testing using lookback.io, this allowed us to see the users' clicks, navigation paths, and spoken feedback during the testing process.

We aimed to understand users' ease of navigation and task completion across several objectives:

Viewing and interacting with a Google ad.
Engaging with AI generative ad creation.
Accessing various payment methods.
Viewing all analyses related to booked ads.

Testing Findings Report Summary

Our usability testing revealed several significant issues across all user flows, except for User Flow 3, which involved accessing various payment methods. We compiled these issues into a document and brainstormed potential solutions. The most challenging flow was User Flow 4 (as shown in the prototype gif above), which involved creating ads and accessing ad analytics. Users found this flow confusing, leading them to click around the interface in an effort to navigate it.

User Flow #1

Issue: Users had difficulty finding Google ads and campaigns, often mistaking the "learn more" CTA as a way to access them. The cluttered homepage, with too many icons and no clear main CTA, added to the confusion. The form on the second page was overwhelming, and users noticed a lack of confirmation after submission.

Solution: Create a prominent section dedicated to ad creation, analytics, and management to make these features easily accessible. Streamline the homepage to reduce clutter and improve navigation, focusing on key elements. Add a clear main CTA for better user guidance and provide intuitive instructions throughout the ad creation process.

User Flow #2

Issue: While some users found navigation easy, others struggled to find where to start with the AI feature. The chat page lacked clarity, making it difficult to locate the text bar and hindering interaction with the AI.

Solution: Add prompts in the chat bar to guide new users, especially at the start. Include a main headline on the chat page to clarify its purpose. Position the text bar higher for better visibility, and improve instructions throughout the chat experience for smoother user interaction.

User Flow #4

Issue: Users found the navigation path confusing, particularly when performance metrics meant for logged-in users appeared on a logged-out screen. The lack of a clear CTA for accessing ad campaigns added to their frustration, leading them to click multiple CTAs without success. Additionally, locating Google ads data was difficult, and the "performance" category was mistaken for an ad type.

Solution: Introduce prominent CTAs for ad creation, analytics, and management within the hero image. Add a "My Campaigns" tab to the header navigation for direct access to ad campaigns. On logged-out screens, include a prompt to log in for personalized metrics. Improve the ease of finding Google ads data and remove "performance" from the categories section to prevent confusion.

Redesign

Based on the solutions developed during usability testing, we made iterative improvements to several screens from the original design.

We started with mid-fidelity wireframes to address the issues found during usability testing. The homepage underwent a major redesign to address user confusion, with clearer CTAs added to the hero section and unnecessary elements removed to reduce clutter. For the AI chatbox, clickable prompts were introduced, inspired by the ChatGPT AI chatbot, to make the experience more intuitive for users. The ad analytics page was simplified, focusing on ad creation, management, and booking, with the addition of a pop-up screen to help users easily access specific ad data. User flow 3 required no mid-fidelity iteration, as only minor changes were needed.

Mid-fidelity Wireframes

Below are a few selected mid-fidelity screens from user flow #4.

Style Guide

The client provided a style guide, and our team followed all existing brand elements in the redesign. We emphasized a warm pink to evoke success and vibrancy, eliminated colors causing hierarchical confusion, and ensured CTAs used primary colors with text in shades of grey. Secondary colors were reserved for logos and card backgrounds, creating a clear and cohesive visual hierarchy.

High-Fidelity

After finalizing the mid-fidelity wireframes, our team advanced the design by developing high-fidelity versions.

The high-fidelity wireframes played a vital role in engaging the client, allowing us to present our proposed designs and explain the reasoning behind our decisions. We also made minor adjustments based on the client's feedback. Below are a few of the selected screens.

User Flow #1

Several sections were removed from the homepage to reduce visual clutter and prevent user overwhelm, focusing only on valuable content.
A "Create Ad" CTA was added to establish a stronger visual hierarchy.
The navigation bar CTAs are now more intuitive, making it easier to predict what each navigation title contains.
Categories organized in a carousel to highlight key content.
Ad management categories were strategically placed to be more noticeable on the homepage.

Old Screens:

New Screens:

User Flow #2

Prompt examples were added, and the "capabilities" and "limitations" sections from previous screens were removed to simplify user choices.
The text box was repositioned higher on the page for easier accessibility, and a placeholder prompt was added to provide guidance.
A prompt was included in the text box to guide users in crafting their replies.

Old Screens:

New Screens:

User Flow #4

A straightforward login screen designed to confirm that the user is logged in and can access their personal ad analytics.
A pop-up card was added, enabling users to select which campaign they want to view.
Feature to add a profile picture, allowing users to easily identify their account and confirm they are logged in while accessing their content.

Old Screens:

New Screens:

Developer Handoff

To facilitate a seamless development process, we prepared a comprehensive developer handoff.

This included annotations, measurements, directions, and changes that were made.

Reflection

Key Takeaways

I thoroughly enjoyed the research aspect of this project and developing solutions to the challenges we faced. I find it fascinating how "less is more," especially when designing user flows—simplifying the UI can resolve so many issues. One of my favorite parts was analyzing user testing results and brainstorming ways to enhance the overall experience. I was grateful to collaborate with a team that values both efficiency and creativity as much as I do.