Vidmob Safe Zone
Designing ad previews for ad creators and end clients.
Social media platforms have become increasingly prevalent channels for advertising. However, through customer support tickets, we found that 12% of customers were requesting ad revisions from Vidmob's in-house creators after accepting the final draft. This caused extended campaign timelines and refund requests.
Our goal was to design a tool that enables Vidmob in-house creators and clients to accurately preview ads before publishing.
"How might we help in-house ad creators and clients visualize how ads will be displayed on social media platforms?"
As a team, we explored several directions, including a safe zone overlay, built-in static buttons, dynamic positioning, and a drag to preview buttons. The inspiration for some of these ideas came from apps like TikTok.
Before sketching different flows, we set three design goals: discoverability, scalability, and reusability. The initial question was, "Where should this feature be located?" It's crucial for in-house creators to preview ads before presenting them to clients, so integrating it into the editing environment made sense. Another important question that arose was “How much context do users need?” I sketched interactions with varying steps and context to validate later.
Sketching entry points and main flow for Safe Zone
Usability testing showed variances in discoverability, but we also had to consider scalability.
Option 1.
In this design flow, I added a new entry point for the Safe Zone that users access by tapping on an eye icon. When tapped, a modal appears to explain the Safe Zone and includes a toggle. However, testing revealed that the eye icon was confusing and hard to discover. While creators appreciated the caption explaining the Safe Zone's purpose, they wanted more context about which social platform it was for.
Option 2.
In this design flow, the entry point to Safe Zone lived inside the more menu. We hypothesized that this entry point would have the highest discoverability due to its placement in a high-traffic modal. After usability testing this flow, we found that our hypothesis was correct.
Option 3.
To turn on Safe Zone, users would tap the eye on and off. We received feedback that the eye icon was ambiguous and that there was little context that this was a safe zone.
