Receptiv's proprietary ad product delivers incentivized, in-app brand experiences during user moments of reward or defeat. As the sole product designer for this project, my role was to conduct research, ideate, design, and protype the new user interface and user experience.
Background and Evolution
The product was originally meant to be served primarily in web and mobile games during user moments of need or achievement. The initial design worked for games, but what if the product was to be served in apps of any other category? Upon our publisher inventory reposition from solely games to all app categories, the challenge was to evolve the product into something that can cohesively work with all app interfaces and identities.
App and User Research
The most important stage of this process was argueably the research. Since the product was going used by many different users across many different demographics, we couldn’t narrow down the research to one specific type of user. Our personas ranged from children, to middle-aged adults, and anything in between. In order to comply with this overabundance of user types, we looked at the most popular apps in each app store category and assessed the most general, non-specific forms of advertising within in each one. We then determined which interfaces and experiences were the most intuitive and why. This enabled us to find a direction in establishing our requirements for the redesign.
The main takeaway we received throughout the process so far, was that our current product was too gamified, and visually busy overall. Once this was realized, the primary goal of the project became clear. We needed to simplify the interface and experience to tailor to any type of user.
We also learned that we needed to standardize the product's media sizes, and create a flexible interface with multiple displays.
The Interactive Advertising Bureau (IAB) develops and documents online ad industry standards and best practices. Using this information along with our previous knowledge of brand assets, we chose standard media sizes that would visually work with our interface and allow for a smoother launch process. The display types we set and prepared to include in the design are as follows:
- Standard - 16:9 video with 300x250 banner
- Video - 16:9 video
- Static - 300x250 banner
- Vertical video - 9:16 video
User Flow and Wireframes
The user flow was relatively straightforward already, but we broke it down by panel so it was easier to communicate and understand. First, the user sees the opt-in panel; a brand message highlighting a dynamically populated app-item they can earn if they choose to view the ad. Next is the media panel where the brand creative and loader is displayed. Lastly, once the loader has finished, the user has the option to click out using the brands call-to-action, or to close the ad and go back to their app.
Reviewing the user flow, it became fairly obvious early on that the media panel would be the stage where the interface is visually flexible. We had to be conscious of this and the different media types and sizes we were preparing to include while working on the wireframes.
The product was designed, protyped, and tested with multiple colors and as a result we learned the best option for conversion was a blue/turquoise color (#0093BA). This was set as the default interface color, but did change on a case-by-case basis per the brand or the app. The custom color feature allowed brands to make the product appear more inline with their creative or identity, and allowed apps to make the product appear more like a proprietary in-app message. In such cases where both instances have a custom color, the brand will overtake the app.
Product and Custom Ad Demos
In addition to the standard product design, I also designed many custom brand experiences. These ad executions ranged from interactive games, to simple narratives with touch gestures, and many more.