In this case study, I am going to take you through the process of solving a design challenge. This is an Ad Manager which will manage your ad campaigns from different platforms like facebook, google, instagram etc. I will take you through my thought process and design decisions.

The Challenge

We are looking to design a premium Ad Manager mobile application that gathers all the critical Ad features from different sources like Google Ads, Facebook Ads, Instagram Ads, Youtube Ads, and more.

This mobile Ad Manager application will help sales and marketing managers track their ads in a single app, plan their next digital campaign by quickly understanding costs, target audience, and possibly launch a campaign creator from their mobile dashboard.

Realize this needs to be a mobile utility application. The application would be processing this data and making recommendations on the next steps, based on budget constraints or suggested budgets (based on existing Ad stats, trends, etc, and the goals you would have imputed). This would not be useful if you have to go and do all the analysis manually on your phone.

Things to Consider

• How many impressions per Ad
• Clicks per Ad
• Views
• Audience (region, age, gender, interest)
• Avg cost per click
• Avg total cost of X campaign
• Users can turn on/off campaigns, increase budget (add money), set up their target-audience preferences.
• This mobile app should feel like a premium utility/quick view application.

Why This Project?

I have taken this challenge because the application feels like a unique idea. There are not many applications present that serve the purpose of managing different ad campaigns.

This project gave me an understanding of how to design statistical dashboards and helped me to grow and learn about different types of charts, analytics systems and how they can be useful to grow a business.

Total Time Utilised

It took me around 20 days to research, ideate, iterate, and reach my visual solution.

Tools Used

Miro, Figma, HB Pencils, and Blank Paper.

Research

Understanding the User

I started out with understanding the use of this application and why users need this. What are their goals and what do they want to achieve with this application.

Understanding the User Requirements and End Goals

To understand the anatomy of this project, I thoroughly thought and listed the user requirements that are needed to reach our final goal.

I laid out a basic map of what is the problem, the requirements of the user and how are we going to solve it and reach our final goal.

Empathizing with the user.

To understand user’s emotions and motivations more clearly I have created a basic empathy map that will lead us to a better and most viable solution.

Understanding the working of analytics system

Designing this application is really challenging as I didn’t have much knowledge about how the analytics application or systems work. To get a deeper understanding I researched different key metrics, their usage, and applications.

Here we get to know about KPI’s the key performance indicators.

Competitive Analysis

Reasons why I performed a competitive analysis

• I didn’t have any potential users for qualitative research so I decided that it would be a better option to look for similar applications and the problems users face with them. So, I could get a clear understanding of how to layout the base of this application and how to come up with effective solutions.
• There are not many similar applications and I could get an idea about how the current application is performing, users review, and technical constraints associated with the application.

Insights from Competetive analysis

• Users face problems in understanding how the application works.
• Difficulty in creating and removing campaigns.
• There are also a lot of problems with understanding and monitoring KPI metrics.
• Users like the feature of managing all the campaigns by creating campaigns in google ads.
• There are a lot of features in google analytics. Researching it gave me deep insights into how the metrics work and what is their purpose in increasing sales and managing a budget.

Ideation

I was reading the book Sprint by Jake Knapp. In that, I found a very interesting activity that is conducting during design sprints by the company.

It works this way: Each person writes his or her own notes, one at a time, on sticky notes. At the end of the day, you’ll merge the whole group’s notes, organize them, and choose a handful of the most interesting ones.

I found this method really helpful and interesting. Since I didn’t have a team I conducted a How Might We session for myself brainstorming several ideas and challenges that were in my mind regarding this application.

I broke down my challenges into different how might We questions and reached solutions depending on them.

Dashboard Exploration

To answer this question let us first understand what is data visualization and why we need it in our application.

Data visualization is a coherent way to visually communicate quantitative data in a more understandable manner.

Often there are a huge amount of valuable data that is difficult to comprehend, data visualization comes to the rescue. For making an informed decision it is necessary to understand difficult concepts, identify new patterns, and get data-driven insights.

The task of our application is to simplify this visualization. We visualize data with help of charts that comprehend our data visually.

We decide what type of charts to use depending on the type of dashboard we are using operational or analytical.

Here we are using the analytical dashboard. It provides the user with at-a-glance information used for analysis and decision-making. They are less time-sensitive and not focused on immediate action. A primary goal of this kind of dashboard is to help users make the best sense of the data, analyze trends and drive decision making.

Exploration of types of Charts

These are the charts we are going to play within our visual design solutions.

The designing of the dashboard

The dashboard is going to be the heart of our application and the maximum focus should be on our dashboard. It should enable the user to decide in a glance or two on how to navigate further or what to do next. As in the research, we found that users find it difficult to understand this kind of apps, the motive of our app should be that it would be easy to use.

Brainstorming and Sorting

Information Architecture

Behind the Scenes

Visual Solution

Dashboard

I iterated through my designs to reach a better solution that is both visually appealing and easily absorbable. I will explain how and why I iterated my design.

Iteration 1

• A donut chart is used for visualizing overall engagement data which I thought through and realized may not be the best solution. This chart can be difficult for users to read as we have too many colors and components and humans are not very good at differentiating angles and areas.
• The bar graph is used for depicting overall impressions which is fine as we are comparing the data of different campaigns but at this point, I still thought that the readability could be improved with a better solution.
• The overall CTR is displayed with a line graph chart, which is good for comparison but when I tried to put it down I felt like there is a lot of data to compare and the line graph is definitely not working out.
• Overall, there is too much information which may be overwhelming for the user and also not quite readable. The UI also feels dull and old.

Iteration 2

• Tried to use personalization with greeting the user with their name as I felt like it is the latest trend in UX and also invokes emotion in the user.
• The area graph is used to show overall engagement and impressions as I thought the information can be compressed and displayed in a better way but the purpose of our app is to help users with quick and accurate decision making and this may take some time for the user to process. Also, it does not show which campaigns provide better output that may fail one of our purposes.
• I removed graphs and used small cards for displaying comparative CTR and spent money on campaigns as too many graphs may be confusing and difficult to understand. I added the amount spent to provide the user with the metrics of the amount he spent till now.

Iteration 3

• Added notifications to provide users with campaign and metrics updates.
• Used scrollable chips instead of drop-down so that whatever comparison the user wants to do is easily accessible and in front of his/her eyes.
• Tried to represent overall engagement in a more visually appealing way with defined priority according to performance and visual cues for the ad campaigns on different platforms.
• Tried to make cards more colorful and overall impressions are displayed with a line graph, comparative with how impressions performed previously.

Iteration 4

• Tried to improve the UI more. Iterated the colors used as the colors used in iteration 3 have a high intensity and together were hard on eyes. So, used the color palette with soft colors.
• Too many colors were distracting so I improvised the cards by using icons and highlighted the metrics that actually are an area of focus.
• The floating action buttons are used with primary actions of adding accounts and viewing campaigns that provide more accessibility to the user.

Final Dashboard

• Instead of scrollable chips, I used fixed tabs so the chips do not become distracting for the user and to avoid the user going back and forth.
• Highlighted icons and metrics so that they shine clearly and get the user’s attention.
• With impressions, I used percentages to show impressions of various platforms with icons. As visuals are more quickly processed by humans.

View Campaigns

• After a lot of brainstorming, I decided to add a sorting option on this screen. This is added because it can save time for the user when he/she wants to view a particular campaign, stats, or recommendation.
• The products were sorted according to engagement as users may want to view the highest or lowest performing campaign. According to the same kind of products as the user may want to view the performance of a particular product. And, according to different social media platforms to provide accessibility.
• The search bar is added so that the user can quickly search if a particular campaign or product is in their mind.
• The start and pause campaign is easily accessible on the right side of the card according to fitt’s law and demand of users.

Product Stats and Recommendations

• The product stats are listed with subtle icons and highlighted metrics to give the user a quick overview.
• Demographics with male, female, and age statistics are briefly stated to give a quick estimate of where the product is performing best.
• Device statistics are provided so that the user can strategize their ads according to the devices on which the ad is performing better.
• Personalized recommendation with the help of AI is provided to help increase the reach and engagement of the product.
• Detailed instructions are given to users for implementing the instructions as different platforms have different campaign procedures and it can be hectic for users to remember everything.

Navigation, Add Campaign, and Adding Account.

• Used simple navigation with the most important tabs listed.
• Add Campaign and Add Account will take us to the respective platforms for authentication and verification. This is a technical constraint as our application is dependent on existing platforms. The campaign creation cannot be done from our app as there are privacy and authentication issues. Launching a campaign creator will lead us directly to the respected platform or application.

Recommendations and Payments

• To display all the recommendations, I used scrollable product cards that could be easier to navigate and shows different platforms with recommendations where the particular product is active. This way it becomes easier for the users to work on their campaigns.
• The payments screen shows the overall amount spent and the amount used for different campaigns on particular dates, to keep a track of expenses.

Settings and Help

• Used account settings to manage different accounts and some general settings for user’s accessibility.
• The help for the user also plays an important role as managing ad campaigns is a complex task and maximum assistance should be provided.

Conclusion

I specifically chose this product for my case study because I feel like it could really make a difference and it is the need of the hour. It could help many people in their businesses. I am not able to test this now but I wish it could be developed.

Hope you enjoy and like this case study. Feel free to provide constructive feedback.

Special Thanks to my mentor Vandini Joshee for her valuable feedback.

Connect with me on:

Behance | Linkedin | Instagram

Mail me at:

[email protected]