ANIRUDDHA

Product Design

AdsGency AI

Ads
Gency AI

Designed an One Stop Digital Ads Platform responsive web

SEPTEMBER 2023

Learn more

SEPTEMBER 2023

MY ROLE

Reason's AdsGency AI hired me?

•⁠ AdsGency AI faced a decrease in subscriptions.

•⁠ An unsatisfactory retention rate of -28%

•⁠ ⁠Need to build new features from 0 to 1

•⁠ ⁠Building responsive design for existing features

Collaboration

•⁠ Worked alongside back-end and front-end devs

•⁠ Semi-structured Interviews, Usability Tests, Zeplin

DESIGN

Collaborated with a dynamic team

• Identified target user categories and user hierarchy structure

•⁠ ⁠Breaking down the different use cases into actionable items

•⁠ ⁠Created wireframes, user stories, mockups & style guide

COLLABORATE

• Worked alongside back-end and front-end developers

•⁠ ⁠Conducted user tests with the 3+ user groups to understand their pain points

•⁠ ⁠Semi-structured Interviews, Usability Testing, Competitive Audit, Sketch, Zeplin

The Team

2 Designers

1 Product Manager

7+ Engineers (back-end+front-end)

Timeline

RESEARCH & DESIGN
September-December 2023

Test
January 2024

TOOLS

IMPACT

92%

The newly redesigned website of AdsGency AI saw a 92% increase in NPS (Net Promoter Score)

~$7k

AdsGency AI approximately had a growth of 7k subscription from January 2024

18%

With the newly optimized website a substantial 18% growth in DAU (Daily Active Users) was observed

Problem

Problem

AdsGency AI’s website was suffering from unresponsiveness, complicated navigation, and unsuccessful articulation of its core benefits.

Additionally, the information architecture was unclear, leading to user frustration in finding desired information.

This caused minimal engagement from users, a decrease in subscriptions, and an overall disappointing user experience.

Solution

Solution

I have redesigned the AdsGency AI product to enable a fully responsive design. The navigation system was reorganized for transparency and a comprehensive user study was carried out.

This encompassed use cases, edge cases, user personas, and journey mapping. By understanding users' needs, I crafted specialized content for different audiences. In conclusion, I used Zeplin to Handoff my designs to engineers. This inclusive tactic led to an intuitive website that's enhancing AdsGency AI subscriber base!

Design Process

I followed the 5 plane method with agile development, ensuring value and speed.

Product- Step 1

Understanding the Problem

Understanding the Problem

We started the research with 3 key methods:
Surveys, User Interviews, and Journey Mapping, which helped me track exact edge cases.

We started the research with key methods:
Customer Journey Maps, User Interviews, and Feature Analysis the journey maps that helped us track user emotions and build user-centric design effectively.

Product- Step 2

Brain Storming

Brain Storming

Ideation from User Interviews, journeys, competitive audits

Want to zoom In, Schedule a Call!

Real-Time Insights

Product- Step 3

The Fluff

The Fluff

50% Interviews
Participants already had working knowledge of similar software & had migrated for similar platform like
HeyGen or Ads Creative.

50% Interviews
Participants were new business (non tech) owners, and needed additional support.

50% Interviews
Participants already had working knowledge of similar software & had migrated for similar platform like
HeyGen or Ads Creative.

50% Interviews
Participants were new business (non tech) owners and needed additional support.

AdsGency AI was build great for user’s with knowledge of marketing workflows, however founders and people with no such background struggled the most.

AdsGency AI was build great for user’s with knowledge of marketing workflows, however founders and people with no such background struggled the most.

Product- Step 4

Research Insights → IA → Wireframes

Research Insights → IA → Wireframes

To make the best use of all insights and ensure the solution met user and business expectations, I used a three-step method.

Product- Step 5

Iterations

Iterations

To make the best use of all insights and ensure the solution met user and business expectations, I used a three-step method.

Before
After

Progressive Taskbar

User-Informed Experience

Prominent Single CTA

Before Test

Flow Iteration

Flow Iteration

Email Marketing Flow

Product- Step 5

KPI Derivation Process

KPI Derivation Process

Final MVP

Few Design Visuals

Note: Only a few visuals are displayed; do refer to the AdsGency AI website for deployed designs

Note: Only a few visuals are displayed; do refer to the AdsGency AI website for deployed designs

Website Redesign

Motive behind crafting this website redesign

Motive behind crafting this website redesign

The motivation was to create a website that catered to marketing agencies and customers with varying levels of experience and expertise. From beginners looking for foundational Ads insights and website building to intermediate customers seeking SEO optimization techniques, adding backlinks, and offering value to all. A new website was created with the intention of enriching all target audiences.

The motivation was to create a website that catered to marketing agencies and customers with varying levels of experience and expertise. From beginners looking for foundational Ads insights and website building to intermediate customers seeking SEO optimization techniques, adding backlinks, and offering value to all. A new website was created with the intention of enriching all target audiences.

Featuring use of Auto Layouts for Responsiveness, Spacings & Margins

Responsive Designs

As the design world now requires a completely responsive design, It was must for our design team to build the AdsGency AI website into a completely responsive one that adheres to design standards.

As the design world now requires a completely responsive design, It was must for our design team to build the AdsGency AI website into a completely responsive one that adheres to design standards.

50+ Screens

Mobile First Approach

As the mobile design was considered we have set 360 pixels as a responsive limit with a section spacing of 32px and a margin of 16px and use of Fill Container for horizontal resizing for mobile devices.

As the mobile design was considered we have set 360 pixels as a responsive limit with a section spacing of 32px and a margin of 16px and use of Fill Container for horizontal resizing for mobile devices.

Standard
I-Pad Mini (SM)

To resonate responsiveness
768 pixels breakpoint was as added as an iPad Mini version with section spacing of 60px and margins of 32px.

The course follows and explains 5 Planes laid out by author JJ Garrett in her book The Elements of User Experience, ensuring material is solid always updated & reflective of the latest trends.

To resonate responsiveness
768 pixels breakpoint was as added as an iPad Mini version with section spacing of 60px and margins of 32px.

1024 Px

STANDARD I-PAD

Standard
I-Pad (MD)

A 1024 pixel breakpoint was added to comply responsiveness for standards iPad like devices, with side margins of 100px and section spacing of 60px.

A 1024 pixel breakpoint was added to comply responsiveness for standards iPad like devices, with side margins of 100px and section spacing of 60px.

Standard
Desktop (LG)

Finally for screen greater than 1440 pixels
a standard desktop version was created for ease of user experience!

Moreover, here the content frames were fixed to center so even if user a viewing in a more bigger screen size, AdsGency AI's website will support it too.

Finally for screen greater than 1440 pixels
a standard desktop version was created for ease of user experience!

Moreover, here the content frames were fixed to center so even if user a viewing in a more bigger screen size, AdsGency AI's website will support it too.

Larger Desktops

<1440 Pixels

Landing Page Re-design

Newly structured fully responsive landing page was handed-off to engineers using integration with Zeplin

Newly structured fully responsive landing page was handed-off to engineers using integration with Zeplin

Redesign within 3 Months

With spared month of research and 3 month of designing we have designed over 140+ screens

Redesign within 3 Months

With spared month of research and 3 month of designing we have designed over 140+ screens

Redesign within 3 Months

With spared month of research and 3 month of designing we have designed over 140+ screens

User-Centric Design

New Design are made from journey map, user interview and many more research Insights for users.

User-Centric Design

New Design are made from journey map, user interview and many more research Insights for users.

User-Centric Design

New Design are made from journey map, user interview and many more research Insights for users.

Secure research data

We have ensure all research data and use interviews are discarded or protected with top-tier encryption.

Secure research data

We have ensure all research data and use interviews are discarded or protected with top-tier encryption.

Secure research data

We have ensure all research data and use interviews are discarded or protected with top-tier encryption.

Responsiveness

Redesigned webiste is edge to edge responsive with use of auto layout/ stacks/ flex box.

Responsiveness

Redesigned webiste is edge to edge responsive with use of auto layout/ stacks/ flex box.

Responsiveness

Redesigned webiste is edge to edge responsive with use of auto layout/ stacks/ flex box.

Want to work together?

Want to work together?

Feel free to reach out at

Feel free to reach out at

asainkar@gmail.com

asainkar@gmail.com

Home

ON

Create a free website with Framer, the website builder loved by startups, designers and agencies.