UX&UI / 2022

Redesigning Sanoma Ad Manager for Better User Experience

Responsibilities: Concept Design, UI Design & UX Evaluation

The Challenge

Sanoma, a Finnish media group, had built an Ad Manager MVP to serve media agency users and SME businesses with do-it-yourself advertising solutions where they design, manage and follow up the reporting for the Ad campaigns. However, the current ad publication processes and UIs were designed separately for agency users and SMEs with different levels of access to functions and features, which made it impossible for users to have a coherent user experience and select features and functions as their experience level grows.  

My Role​​​​​​​

As a lead UX Designer, I started with interviews with clients, expert evaluations, and simulation-based evaluations to find out the right problem to be solved. After that, I conduct benchmarking to understand the best practice and deliver recommendations to the clients. Via multiple rounds of co-design workshops, I worked with the client to identify product vision, areas for improvement, and possible design opportunities. After that, I redesigned the Sanoma Ad Manager and reviewed the design along the way with the client. The outcome received high customer satisfaction.

Start with Context Immersion and Problem Diagnosis

Success starts by spending picking the right problems to solve. Questions leap to mind when defining problems: 
 
• What are the user/customer segments and their JTBD?
• What are the current user journeys?
• How well can the current solution help the users to reach their goals?
• At what point the current solution wasn’t working anymore?

Diving deeper via ...

1. Expert Review
I walked through the Sanoma Ad manager in the shoes of a typical user to identify UX issues. This expert review approach paid full attention to the context, the nature of the system being evaluated, and the goals of the business. By placing myself in the shoes of the potential user, I examined the interface in context to investigate major problems to be solved and recommendations that help the customer achieve their user goals and the product owner to better achieve their business goals.
2. Simulation-based Analysis
I conducted a simulation test to investigate the Sanoma Ad Manager’s cognitive load and unnecessary manual interactions with the system. I calculated the number of steps (i.e. any interaction with the product UI, including scrolling and hovering) the user had to do to complete the scenario. Each step that the user has to complete to reach the desired outcome was analyzed and divided into four groups: necessary steps, navigation steps, unnecessary data input, and unnecessary functions. Numbers of data inputs from memory were counted as well. 
Identified key issues
# Implementation-model-driven design
 
Some UIs were designed to reflect technology and how the system works, instead of reflecting users’ vision – how users perceive the jobs they need to do and how the system helps them to do it. For example, when defining target audiences for a campaign, the UI didn’t present content from the users’ perspective telling what audiences or placements their ads will be exposed to.
# Poorly designed content strategy and structure
 
The hierarchy of information architecture was not clear so that you paid more time in navigation. For example, User Setting, User Management, Client Management, and Right Management were presented as main, stand-alone pages as Campaign and Report even though they were somewhat relevant and less accessed by users. Also, the content was repeated on many pages without any purpose. 
# Separate and inconsistent campaign creation flows for customers sharing the same needs
 
Even if media agency users and direct advertising users shared the same JTBD, there were still separate, inconsistent paths with different functionalities for them. The sequence of tasks for campaign creation was erratic and inconsistent for the aforementioned customer segements.
# Unintuitive, unnecessarily complex flows for account creation
 
Account creation was extremely complex and cumbersome. After the simulation test, I found that necessary steps only took 48% of the whole task steps but 38% of the steps were unnecessary functions and input. 5% of the steps were navigation steps. Users were required to remember information in 10% of the steps.
Based on the identified problems, I formed two design questions to guide the design process:
 
1.  How to design a structure enabling simple and straightforward navigation?
2. How to address the needs of users with different skill levels with a single, coherent interface?

Next, know the best and get inspired

Benchmarking
 
Once I thought through what we should aim for, I started working on investigating the best practices. I had a deep look at Facebook Ads Manager, Twitter Ads Manager, Opera Ads Manager, Spotify Ads Manager, and TikTok Ads Manager to understand their overall architectures and campaign creation design and how they function.
Key findings
#Structure/Core components for an Ad Manager
 
Dashboard (it offers a summary of the ad performance), Campaign Catalog (it allows customers to manage the campaigns and analyze their metrics at different stages of the process), Client Management (it is where you store and manage your client information), and Report (it enable users to create, customize, and export reports based on multiple metrics.)
#Campaign Structure
 
Ads run on Facebook Ad Manager, Tiktok Ad Manager, Twitter Ad Manager, and Spotify Ad Manager are structured into 3 parts: “Campaigns”, “Ad Groups”, and “Ads”. Campaigns can include multiple Ad Groups and Ad Groups can have multiple Ads. At the Campaign level, customers can determine their campaign objectives (or goals), which are the final results they want the ads to achieve. At the Ad Group/Set level, customers define their ad’s Placement, set up Targeting, Budget, Schedule, and more. Ad groups help show different messages to different audiences (or “groups”), and/or adjust parameters like targeting, budget, or run dates for certain groups. As for the Ad level, ads are the content that customers ultimately present to the target audience. They can customize ads by uploading their own creative assets or using templates.
#Goal-driven campaign creation
 
Every campaign starts with a goal. Discussing goals can help everyone understand business objectives. Establishing goals helps create a clear vision. Having goals in place help determine success. Common types of goals the researched Ad Managers throw around with their clients include: improving brand recognition, engaging their audience, increasing revenue, generating leads, making sales, and converting website visitors.
Design Guided by the Idea: Avoid Unnecessary Complexity

According to Boston Consulting Group, the impact of reducing nonvalue-creating complexity on IT costs and performance can be significant. They estimate that an effective simplification effort can reduce application and infrastructure costs by up to 50 percent and total IT costs by as much as 30 percent. It can also give the IT organization far greater flexibility and agility and can improve its overall ability to support the company’s business objectives. Unnecessary complexity should be greatly reduced and even eliminated.

The solution to addressing the needs of digital product users with different skill levels lies in a different understanding of the way users master new concepts and tasks.
According to Alan Cooper and Robert Reimann (authors of the famous book About Face), the experience level of people performing a specific UI activity tends to follow the Gauss’ bell curve. Users’ skill spectrum can be divided into three parts. The first part comprises beginners, the middle is where so-called intermediates belong, and the third part is for experts. Most users are neither beginners nor experts – they are intermediates. Users won’t be staying a beginner for too long as they will learn new ways of getting tasks done faster and easier. They will move from the beginners to the intermediates part of the skill spectrum. They will most likely stay there – happy and satisfied in the middle with all the options they need right there where they need them. Some of them will probably move forward to the expert part of the spectrum. The difficulty of maintaining a high level of expertise also means that experts come and go rapidly, but beginners change even more rapidly. Both beginners and experts tend over time to gravitate towards intermediacy.

 

The demands that users place on digital products vary considerably with their experience. ​​​​​​​

Yay! Get my bearings

How to design for users with different skill levels?
In many cases, a well-balanced user interface takes the same approach. It doesn’t cater to the beginner or to the expert, but rather devotes the bulk of its efforts to satisfy the perpetual intermediate. At the same time, it provides mechanisms so that both of its smaller constituencies can be effective. In summary, design for everyone, and optimize for intermediates.

Our goal should be threefold:
– To rapidly and painlessly get beginners into intermediacy
– To enable intermediates to become experts by extending their abilities so that they can increase their productivity and satisfaction
– To accommodate the beginners and experts but optimize the system to the largest segment of the users – intermediates.

What do beginners need?
– Answers to the main ideas, concepts, and scope of the particular software
– Rigid adherence to taught rules or plans
– Be guided through a workflow or walkthrough
– No exercise of “discretionary judgment”
– Shorten the period they spend as beginners
 
What do intermediates need?
– Limited “situational perception”
– All aspects of work treated separately with equal importance
– Answers to questions like “Where and how to access desired features?”
– Having reference materials like help and support systems 
 
What do experts need?
– “Coping with crowdedness” (multiple activities, accumulation of information)
– Occasionally look for esoteric features that they might make heavy use of
– Demand faster access to their regular working set of tools, which may be quite large — shortcuts
– Deliberate planning
– Formulates routines
– Appreciate new, powerful features.

The closer the GUI comes to the user’s mental model, the easier the user will find the software to use and understand.

People don’t need to know all the details of how a complex mechanism actually works in order to use it, so they create a cognitive shorthand for explaining it, one that is powerful enough to cover their interactions with it, but that doesn’t necessarily reflect its actual inner mechanics. The closer the represented model comes to the user’s mental model, the easier he will find the program to use and understand. People tend to form mental models that are simpler than reality; so if we create products that are simpler than the actual implementation model, we help the user achieve a better understanding.

Let's now improve the design!

Boost the efficiency

An improved UI design was created relatively mechanically based on the analysis. For example, in account creation, unnecessary inputs and functions were left out. Navigation was minimized by re-organizing the data and functions in the UI. The total amount of actions was greatly reduced. If the number of referred items in the current UIs were zero, the efficiency of the redesigned UI would be 1.7x better.

Designing for beginners
#Contextual Onboarding
User assistance provides information to help a person interact with software. This includes describing the user interface but also focuses on how to help the user to best apply the software capabilities to their needs. Landing pages are used to introduce large concepts or first-time experiences to a user. It shows the right message to the right user at the right time and provides guidance as they go, rather than asking users to remember everything.
#Step Forms for campaign creation
Step Forms are used to “walk” a user through a campaign creation workflow by breaking it down into a number of steps. The step form helps the user understand, navigate,  review and revise the content of various completed steps.
#Coachmark for explaining concepts
As the user begins to use the product, a dialog box appears that states the basic goals and tools of the product, naming the main features. The guide stays focused on beginner issues, like scope and goals, and ways of doing.
#Task Guides
According to Zeifarnik Effect, people hate the tension created by incomplete tasks. This principle is applied to the improved design where people are assisted to complete tasks before ad delivery. 
Designing for intermediates
#Tooltip for explaining ideas
Tooltips appear when a user hovers over or focuses on an interactive element in the GUI. Textual identification of elements or brief text to help the user understand the function of the element.
#Quick help
Quick help is a component that gives the user contextual information about the use cases that users can perform on the current page. For each help topic, quick help displays a summary of information for the use case and a link to the documentation where more detail of the explanation can be found.
Designing for experts
#Saved Search for improving work efficiency
When users become proficient with Sanoma Ad Manager, they will have numerous campaigns listed. Wasting precious time wading through each row doesn’t make much sense. Click the ‘Filter’ button and select from different criteria in the drop-down menu to drill down and find the specific campaigns you’re looking for. Easily change selected criteria or combine multiple criteria to drill down further – then save your custom filters for easy access next time. This will help users save time by not having to enter searches over and over again, and it will help them have standardized search criteria between users. The search bar includes the ability for users to create searches, save them, and reload them.

Let's now improve the design!

As the redesign was completed, I presented it to the customer through a design review workshop. The client was very satisfied with the final outcome.

Main pages
Onboarding pages

What did I learn?

Software too often contains interactions that are top-heavy, requiring extra work for users. The result is software that charges its users a tax, or excise, of cognitive and physical effort every time it is used. The problem with excise tasks is that the effort we expend in doing them doesn’t go directly towards accomplishing our goals. The existence of excise in user interfaces is a primary cause of user dissatisfaction with software-enabled products. For example, when creating an account in Sanoma Ad Manager, users are required to pass Human Verification (i.e., CAPTCHA, Completely Automated Public Turing test to tell Computers and Humans Apart) where they are asked to spend 10 seconds selecting all of the images that correspond with the clue. But this is something we do for the system, not for us, and it doesn’t help us reach our goal – creating an account. Even if we cannot get rid of CAPTCHA in many cases, like ticket selling, we should still try to minimize the work of verification.  Google has rolled out a new API, “reCAPTCHA,” that radically simplifies the CAPTCHA experience with just a single click. Another terrible example of account creation in Sanoma Ad Manager is heavy navigation.  Users are forced to do many unnecessary, difficult, and disorienting navigation, such as navigating among multiple pages in the Ad Manager and navigating between the Ad Manager and the email software, which is seldom aligned with their needs, goals, and desires.

UX designers should become sensitive to the presence of excise and take steps to eradicate it with the same enthusiasm a doctor would apply to cure an infection. 

One principle of mine in designing user experience is to optimize the experience of users when they engage with a product. In the case of productivity tools and other non-entertainment-oriented products, this optimization means minimizing work. User work can be minimized through the four perspectives: cognitive, memory, visual and physical. To reduce cognitive work, UIs should align with users’ mental models so that they can easily understand product behaviors, as well as text and organizational structures. Less recall of data like verification codes, names, locations of data objects, and control, better user experience. As for minimizing visual work, GUIs should tell users how to start on a screen, find one object among many, decode layouts, and differentiate among visually coded interface elements (such as list items with different colors). Last, digital products should not ask for unnecessary keystrokes, unnecessary mouse movements, unnecessary gestures (click, drag, double-click), and unnecessary clicks required to navigate.