Adadyn was developed to be a powerful end-to-end banner ad delivery system with retargeting capabilities. After the technological proof-of-concept was ready, the product was severely lacking in its user experience front.
The technological proof-of-concept version of Adadyn was severly lacking on user experience fronts
The product developed was severely suffering from the following
Observing the workflows of the internal users of the product viz., creative designers, account managers, testing engineers was revealing enough that the product was suffering from textbook cases of feature creep and poor usability.
Even a technologically superior product will get slaughtered if user experience isn't up to the users' expectations
And coupled with the UX awareness that was happening at our target user locations (read, United States) that it was concluded that an UX centric overhaul of the product was absolutely necessary. The team literally went back to the writing pad, to carry out product research in terms of both Adadyn's and competitors' user experience and how the current condition fares with respect to the company's business objectives.
Nearly 10 competitors offering similar and related services were analyzed from product user experience perspective, and a UX SWOT analysis was carried out, with the perspective of the redesign exercise.
Adadyn UX SWOT
The findings of the exercise resulted in the setting the strategy for the redesign process. The key points of the exercise were
One of the key milestones of the UX redesign process was to develop a 'deep empathy' with our target users. Deep empathy cannot be achieved unless we are able to narrow down as many assumptions about the details of our user's everyday life as possible. A very diverse research was carried out in terms of details about our target user's demography, sociology, education, economics, worklife, role and degree of technology, etc. Data was collected from multiple sources, some professional and many social, and a generic user persona was crafted.
GENERIC USER PERSONA
Age - 30-40 years old
Gender - Male or Female, with almost equal distribution
Education - Mostly with a Bachelors in Arts degree, some with a MBA
Location - United States of America
Social Status - Married, and some with kids
Occupation - Account Manager at a mid-sized Online Ad Agency
Economic Status - Above average, but not well to do. Has a loan (an old education loan or a new vehicle loan) to pay for
Skills - Online advertising, SEO, Analytics etc.
Technology Familiarity - The user is definitely very familiar with the following list of technology
Commutation to work - Substantial commutation involved everyday to and fro the office
Work - Works at least 6 hours on a working day. A typical day involves
Possible Work-related Excitement
For the purpose of crafting user stories, our target users behaviours were categorized based on three categories, into four possible types.
New to online advertising
Experienced in online advertising
Unfamiliar with a retargeting solution
Familiar with a retargeting solution
New to using Adadyn
Fairly experienced on Adadyn
User Type Exploration
Based on the user types crafted, over 20 user stories were framed to construct the workflows necessary for the product. Couple of them are:
Jane is an account manager at an online advertising firm, and has been familiar with retargeting solutions like AdRoll and has been convinced to try out Adadyn, an advanced retargeting platform. She completes the registration process and logins in successfully. She logs in to run a test campaign without retargeting.
Maurice is already familiar with Adadyn. He is an account manager at an ad agency. He has conducted some prospecting campaigns in the platform, and feels excited at the results and also the overall experience in the product. The system indicates enough signals and statistics for him to conduct a retargeting campaign. He does not have a designer in-house and sort of expects the platform to give him some decent design solutions to make him choose from and use it.
UX SCOPE & REQUIREMENTS
The list of user stories and the existing platform features when combined, gave rise to a list of requirements in various departments that was set as the scope of the redesign process. The various types of requirements which were set are
Note: Details cannot be shared due to client confidentiality.
Of all the workflows, the Campaign Creation workflow was found to be the prominent 'redroute' that will dictate the majority of the experience of the product. The existing workflow was trimmed off excess customization steps and replaced with a relatively straightforward one all the while maintaining the unique value proposition of the product.
Campaign Creation Workflow
The existing version of Adadyn followed a multi level hierarchical model for its structure of information and was following a tree-like navigation structure. For an application where accounts and performance of multiple advertisers (key parent node) are managed monitored, such a structure bore very heavy on interaction costs. Hence a 'matrix' model was adopted, where a sub-section of an advertiser can change into the same sub-section of another advertiser, with a single interaction.
Hierarchical to Matrix model for Information Architecture (Screen from presentation)
In the existing version, the user to facilitate with at least five different interactions to get something substantial happening. It was due to the absence of any conceptual model that resulted in such a high interaction cost. One of the major improvements sought out was to implement a simple conceptual model and design the application to reflect the same. The new conceptual model was an uber-generic but quite common one that one can observe in any place where categorical ordering takes place viz., a library, supermarket etc.
Conceptual model for the core workflows of the application(Screen from presentation)
Based on the workflows designed, various options for various parts of the application were ideated. The team participated with numerous discussions on analyzing the pros and cons of each choice, and evolving the optimal choice for each stage.
UX Redesign discussion room screens
As the information architecture was changed from a hierarchical to a matrix model and the conceptual model was decided to be a choose-pick-act strategy, various navigation designs had to be explored so that they support both the IA and IxD seamlessly.
Adadyn Navigation Design Concepts
In order to implement the matrix model of information architecture, a drop-down based navigation control was designed. It was designed to implement the advertiser switching without changing sub-section context. And it was nicked 'Advertiser at work'
Each shortlisted concept for each stage were wireframed in medium-fidelity and presented to the team for discussions on improvements and implementation. The core criteria of shortlisting and picking the winning candidate were an optimum balance of interaction costs and cognitive loads.
Wireframes of shortlisted ideas (Blurred to maintain confidentiality)
STYLE GUIDE FOR UI DESIGN
Aside from focusing on making effective information designs, one of the major business objective of the interface design process was to subtly and yet effectively propagate the brand image of the company within the application.
Color guide for UI design
Typography guide for UI design
As the look and feel of the entire product was changed, high fidelity mockups of all screens had to be done and displayed for discussion on development.
New Campaign Creation
New Advertiser Creation Form
Live Creative Studio for creating Dynamic Creatives
The implementation was carried out over a period of two months. The following technologies were used to rapidly develop a fully functional version of the concept.
Twitter Bootstrap Framework - Front-end framework
Durandal (JQuery, Knockout, RequireJS) - Client Framework
JQueryUI - for the Live Creative Studio
Note: No backend technologies were changed for this project
USABILITY STUDY DISCOVERIES
A structured usability study was conducted on the redesigned platform using the internal users of the platform. The discoveries made during the study were
Overall the new version was reviewed to be a far better design in terms of usability, brand image, aesthetics etc.
After the implementation was done, a detailed presentation was given to all employees in the organization, about the entire project, from strategy to the implementation, justifying every design decision that was made.
Based on the visual design approach handled in the process, a mobile version for a campaign monitor was conceptualized. It would give a quick access to running campaigns data and enable the account manager with minimal controls to take action as required, especially when they are away from the desktop platform.
Campaign Monitor om Mobile (Concept)
The key learnings from this redesign project are
Note: This version of Adadyn has been removed from service due to pivoting of company towards offering retargeting SaaS software to self-serving business owners instead of mid-market advertisers.
What do you want to do next?
BACK TO TOP