An admin tool for a corporate catering company’s internal teams
GoFIND.ai is an immersive shopping application that connects users with fashion items they love. As a visual feed-based app, GoFIND wanted to create a tool for digital marketers to run ad campaigns through them, creating a mutually beneficial professional relationship backed by an enjoyable experience.
A responsive, scalable ad posting tool set to be integrated into GoFIND’s current website, giving digital marketers the ability to create, edit, purchase and launch campaigns for their fashion brands, along with their corresponding ads/ad sets.
The following project centered around developing a flexible design solution that would allow digital marketers to work effectively in their usual set up (desktop), while still giving them the option to check in on their campaigns from their mobile device if/when necessary.
Timeline: 2 ½ weeks
Target Screen: Desktop, Mobile (Responsive Web)
Tools: Whiteboard, Sketch, InVision, Zeplin, Trello
Ana De Magalhães (Client Communication, User Research, Information Architecture, Wireframing and Prototyping, Visual Design)
Brad Miller (Competitive Research, Sketching & Ideation, Information Architecture, Wireframing and Prototyping, Visual Design)
Jared Miller (Competitive Research Competitive Analysis, Usability Testing, Sitemaps, User Flows)
STRATEGY & RESEARCH
To find what would work best, it was important to become familiarized with the platforms that are currently dominating the digital ad market both in usability and reach. The goal was to not only see what these businesses were doing right, but to uncover potential weaknesses in their efforts (Lee Odden, 2012). This way we could give GoFIND a way to differentiate itself in the market.
We looked at a broad range of features offered across products and platforms, with an eye towards what would be most desirable for our target user–digital marketers. We also set out to examine whether each product offered its platform in desktop or mobile format, or both. The key insights drawn from the competitive research included:
Just less than half of the competitors offered mobile availability
Facebook had the most choices for ad formats in a mobile platform
For ad targeting options, audience demographics and location were the most consistent across the competition
For ad objective options, brand awareness (impressions), driving traffic and boosting conversions were the most consistent across competitors
GETTING TO KNOW THE USERS
Because the challenge centered around a very specific tool, target users were identified early on in the project (digital marketers in the fashion world). However, it wasn’t until the research process kicked off that we realized how varied the role of the marketer can be, ranging from social media managers without a formal background, all the way to highly trained marketing specialists.
It is for this reason that we favored qualitative data. Though I believe a balance of quantitative and qualitative information is ideal, the main goal of the research process was to get to know the users, understand the software, and learn the ways in which we could best serve them through our design. Semi-structured interviews made it all possible.
The main frustrations that surfaced throughout the research process were related to the ways in which already existing tools function, more specifically:
The use of complex language and a steep learning curve. Users mentioned feeling occasionally lost and confused due to marketing jargon and highly complicated wording. This was usually experienced by those fulfilling social media related roles, who expressed some pieces of software were intimidating and hard to navigate initially.
Users also reported a lack of customization features when it came to setting up campaigns and ads. Though constraints were appreciated, they seemed to often be viewed as restrictive.
Other big offenders included not knowing how information will be displayed once a campaign launches ("What will it look like?"), and the inability to repurpose assets that were previously used in other platforms.
KEY RESEARCH INSIGHTS
Users prefer desktop over mobile when managing campaigns. Mobile was seen as a secondary, 'bonus' point.
When it came to software, almost all users interviewed chose Facebook Ad Manager as the most usable, least intimidating and easier to navigate.
Approximately 50% of users interviewed had the autonomy to create ads on their own, while the other half did so in a collaborative fashion.
The most important metrics identified by interviewees were (in order of importance) Click-Through Rates (CTRs), Impressions and Conversions.
PRINCIPLES + GUIDELINES
In order to provide a pleasant experience to every user, the design must steer clear of complex marketing language. Instead, it should be inclusive and accommodating, respecting the diversity and dynamic nature of roles in the current marketing world.
The design should offer constraints that ensure a low-to-moderate learning curve; however, they must be kept in check to prevent restrictiveness.
The design must keep users informed through the use of visual and verbal feedback.
CARLA: THE SOCIAL MEDIA MANAGER
Has a background in fashion or graphic design
Social media marketer or digital ad manager
Prioritizes impressions and click-through rates (CTRs)
Wants to personalize ads and campaigns
Uncertain of how campaign info is displayed in advance
Uses primarily Facebook Ads
Prefers desktop over mobile
EDGAR: THE MARKETING SPECIALIST
Marketing specialist with 20+ years of experience
Is open to new resources and platforms
Ad buyer for one or two major websites
Mainly keeps track of impressions and CTRs
Likes to focus on demographics
Is a fan of Google Adwords
Works almost exclusively from a desktop computer
Though similar when it comes to the specific tasks they fulfill within their roles, the two user personas identified are considerably different. Carla was chosen as the primary user persona due to her background in fashion (which aligns directly with GoFIND's nature and goals for their ad managing tool) and her experience working with social media sites to promote brands.
THE DESIGN PROCESS
DESIGNING FOR PERSONAS
In line with what was mentioned before, Carla was chosen as the primary user due to the novel (yet prevalent) nature of the social media manager role–a position that appears to be steadily evolving as companies rely more and more on platforms like Facebook, Instagram, Snapchat and Pinterest to grow in popularity and conversions.
Being mindful of Carla's needs (particularly, the importance of approachable language and a friendly interface) would greatly benefit the design, fulfill business and user goals and, just as importantly, it would not disrupt the goals and needs of the secondary persona. It was just as essential for Edgar to be able to interact with the design in a natural, trouble-free way.
SKETCHING AND WIREFRAMING
Friendly, straightforward copy, clear campaign objectives and the ability to preview ads were key defining features when it came to creating a solution for GoFIND (and consequently, for Carla and Edgar). We began by focusing on the smallest screen first, designing for mobile and optimizing the screens for desktop simultaneously.
Along with the research findings, GoFIND also highlighted to us the importance of bloggers and social media influencers in relation to both their app and the marketing landscape–something the client (rightfully so) wanted the ad manager to reflect. For this reason, we also made sure we gave users the option to advertise via the blogger or influencer of their choice.
PROTOTYPING, TESTING & ITERATING
Once wireframes became a prototype, the goal was to find social media managers and marketing specialists that could interact with it. Their sharing of their thoughts, feelings and behaviors as they navigated the product was what allowed us to refine the design, minimizing non-essential features and reducing confusion.
It was through testing that we realized we were guilty of unconsciously making one of the mistakes the competition was already at fault for: Not providing the right balance between constraints and freedom of choice, particularly when it came to the ‘Select Your Budget’ screen. The prototype only offered two options: ‘Daily’ and ‘Lifetime’. We found that users prefer a slightly wider variety of options. In future iterations, we added a start and end date (also known as 'media flight').
SCREENS, SCREENS, SCREENS.
The first set of wireframes included a central, hub-like screen that was meant for users to set up their campaigns (and ads) in no particular order, allowing them to go through a step, save preferences and return to said hub. However, this screen went on to test poorly, and was later replaced by a linear process.
The second and third screens–while clear and approachable to users–were seen as incomplete. Testing revealed the importance of adding more options to the 'Lifetime Budget' section of the second screen, and further details to the billing screen (with 'Payment Details' and the option to enlarge the campaign preview image on the right side being the most important).
ROUND THREE (CURRENT)
The first step taken towards improvement had to do with changing the overall flow of the ad manager. We moved on from the previously described “hub screen” to a more streamlined, linear flow featuring a progress bar. This new flow follows the nature of the campaign creation process, and kicks off by asking users to choose their objective.
To reach a balance between the simplicity of the design and the level of information we wanted to display, brief explanations and pricing descriptions were added under each campaign objective's title.
Once the user selects an objective, they're able to move on to the new, streamlined 'Budget & Schedule' screen, featuring a more developed scheduling section for the 'Lifetime Budget'.
Testing lead to the realization that, though kept as a point of focus, we needed to place more emphasis on the ad preview feature. It was initially presented at the end of the checkout flow (third screen L-R, as shown in Round One). Though we kept this for review purposes (and developed it further), we added a new screen that let users preview ads well before the billing process began.
Additionally, testing revealed how crucial it is for marketers and social media managers to review their settings thoroughly before posting, in order to prevent mistakes that could threaten both the campaign and their role.
Due to the inherent urgency of this concern, it became a huge goal of the design and a big part of the iteration process. We kept this in mind front and center throughout the refinement phase, adding a new 'Ad Placement Preview' screen and billing screens-related affordances.
Once users have selected a format and assets for their ads, they can visualize what they will look like and where they'll be placed on GoFIND's app's feed.
One of the pain points that arose early in the research process had to do with the ratio and dimensions of ads themselves. Marketers and social media managers voiced their frustration in resizing and reconfiguring media assets when using different ad managing tools, as there is usually no commonality among them.
We wanted the design to allow users to reuse some of these assets without having to do extra work. To address this particular pain point, we based attributes on Facebook's current dimensions (as research showed it is currently the preferred, go-to, most used ad managing software).
A LITTLE LESS CONVERSATION, A LITTLE MORE TL;DR
Some of the major changes that took the prototype from its first version to the current version included:
The billing process became more detailed, offering a new ‘Enlarge Ad’ option, payment details and information about the campaign
Ad Preview feature was emphasized even further and given its own set of screens (an ‘Ad Format Preview’ Screen and an ‘Ad Placement Preview’ Screen were added to respect and honor this user preference)
‘Image Carousel’ was incorporated as a third format option
Overall flow went from one hub-like screen to linear
A progress bar was added to keep users informed and the feedback constant as they moved along the process
Ads were nested within campaigns to inform users about hierarchy
Introduction of a ‘Name Your Campaign’ and ‘Name Your Ad’ option
To paraphrase Aaron Walter (one of my favorite UX experts out there!) and his reimagining of Abraham Maslow's hierarchy of needs (2011): Once functionality, reliability and usability were taken care of, we shifted the focus on to providing a pleasant experience. We sought to use visuals to establish an emotional connection with users, incorporating the brand's colors and style guidelines into the design, and keeping information conversational to show GoFIND's friendly, stylish and modern personality.
Develop the ‘Dashboard’ section of the ads manager, allowing users to track their campaigns and visualize data analytics
Create a more intuitive flow for digital marketers to advertise with bloggers and influencers via the GoFIND Ads Manager
Incorporate filters into the search function of the Ads Manager (for a more enjoyable search process when selecting products from a brand's catalog)
Give users the ability to edit their campaigns, giving them more freedom to rename and modify campaign and ad settings.
The challenges of this particular project were quite exciting. As a team of designers with different backgrounds (Journalism, Psychology, and Graphic Design), none of us had any marketing experience. Becoming immersed in an unfamiliar area of knowledge was highly rewarding and resulted in building a solid foundation upon which we could design and interact with our users.
Because ad managing software is inherently complex, defining the scope of the project also presented itself as a challenge. Though we wanted to be able to design as much as possible, it was crucial to remain mindful of the 2 ½ week timeline. Open communication with the client and the managing of mutual expectations was the tool that ultimately lead to an agreement regarding what the design would be, and what it would cover.
Though not exactly a new lesson, this project reinforced for me how crucial it is to communicate with clients openly, kindly, and constantly through multiple channels–especially when working within the bounds of a sprint-like timeline. Trello, Slack, phone calls and bi-weekly, in-person meetings had a big impact on both the process and the result, enhancing productivity and allowing the team to stay focused and organized.
Immersing myself in the world of marketing also brought with it lessons and bits of knowledge; it helped me understand what marketers go through on a daily basis, the complexities they face and the immense efforts they put into their work, as well as the dynamic and ever-changing nature of their roles in the digital world.
Odden, L. (2012). Optimize: How to Attract and Engage More Customers by Integrating SEO, Social Media, and Content Marketing. Hoboken: Wiley.
Walter, A. (2011). Designing For Emotion. New York: A Book Apart.