ANIRUDDHA

Product Design

AdsGency AI

Ads
Gency AI

Designed an One Stop Digital Ads Platform responsive website

SEPTEMBER 2023

Learn more

SEPTEMBER 2023

MY ROLE

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 guides

COLLABORATE

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

•⁠ ⁠Conducted user tests with the 3+ user groups

•⁠ ⁠Semi-structured Interviews, Usability Testing, Sketch, 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 website in Figma, facilitating a completely 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 competitive analysis. By grasping the user's needs, I crafted specialized content for various users. 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!

Landing Page Re-design

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

UX Research

Customer Journey Map

Customer Journey Map

Customer Journey Map

We started the research with 3 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.

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.

Feature Analysis

Feature Analysis

Attached is a high-level feature analysis performed to gain insights and recommendations for the AdsGency AI revamp website.
Note: This feature analysis is just made for this case study, detailed documents can not be shared due to privacy and legal compliances

Attached is a high-level feature analysis performed to gain insights and recommendations for the AdsGency AI revamp website.
Note: This feature analysis is just made for this case study, detailed documents can not be shared due to privacy and legal compliances

Strategy & Scoping

Brain Storming

Ideation from User Interviews, journeys, competitive audits

Want to zoom In, Not allowed; NDA Signed :(

User Interviews

User Interviews

To gain brief insights on user expectations from the AdsGency AI website and get to know users desired desirable workflow multiple user interviews were conducted.

Here is a snapshot from the interview,
featuring Sreyoshi Ghosh, designer at @Flipkart explaining her need for the platform.

Note to all Research Pandits: Appropriate consent was taken before including this image 😊

To gain brief insights on user expectations from the AdsGency AI website and get to know users desired desirable workflow multiple user interviews were conducted.

Here is a snapshot from one of the interviews,
featuring Sreyoshi Ghosh, designer at @Flipkart explaining her need for the platform.

Note to Research Pandits: Appropriate consent was taken before including this image 😊

Focused Personas

Focused Personas

After conducting several user interviews and focus group discussions it was time to clearly depict user needs & pain points data into combined personas that will help to redesign the website to a user-centered one and in accordance with user expectations.

After conducting several user interviews and focus group discussions, it was time to clearly depict user needs & pain points data into combined personas that will help to redesign the website to a user-centered one and in accordance with user expectations.

Empathy Maps

Empathy Maps

Continuing on a journey of getting a deeper understanding of user pain points and needs with personas it was then vital to understand user feelings and emotions to craft the website

Continuing on a journey of getting a deeper understanding of user pain points and needs with personas it was then vital to understand user feelings and emotions to craft the website

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

Few Design Visuals

Few Design Visuals

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

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