• A templatized system for communicating with our users.
• Greatly reduced time required for design and implementation time every week.
• >22% actions taken as compared to corresponding adds on desktop.
I led all UX Design, Project Management and front end Engineering for the iOS and Android mobile applications.
The Challenge
The meal kit business is extremely competitive, and the business depended on the application user experiences to maximize Average Order Value (AOV). We learned that as soon as the user arrives, those first few seconds were critical to sell the user on the current week's recipes. The wonderful Sun Basket photography was critical to this, it would be the element that would pull the user in, keep them from leaving for the schedule page, which is where they skip weeks. Our data showed that the more users engage with a particular week, the less likely they are to skip that week.
Much of my job of managing the mobile product was to partner with a product manager to work with other business owners within the company who had feature requests. Often times, I would have to make the case that certain features shouldn't be introduced at all, and in other cases, we would have to build out certain features, test them, looking very carefully at the skip and AOV (average order value). Sometimes this would result in pulling that feature. That said, there was no way to get around the fact that we did need a way to market new products and services to the user.
A not so great solution for the web.
The solution we developed for the web, we would later discover to be not very effective. This consisted of a large banner area at the very top of the interface. Largely using HotJar, we determined why few people were clicking on them. Users have been rendered immune to banners, they seem to instantly banish them from their attention. Most of the time they would immediately scroll down the page. At the time, we developed a different approach for mobile that would, in spite of its screen size, would prove much more effective.
Internal Marketing Banner: Desktop
At the time, there was a push to put a banner at the very top of the mobile app, but I was concerned that this would negatively impact skip and AOV. The larger photo tiles required to create an engaging experience made it difficult to make room for other elements. We needed a way to allow internal marketing elements to happen not immediately, and also not to suddenly interrupt the user's browsing behavior in an obtrusive way.
We learned that the "fold" didn't seem to matter with mobile, users would very often start scrolling down the page, and mobile had the advantage of only allowing the user to focus on one food image at a time. And so it was immediately pretty clear that on the mobile app, a banner pushing everything down would very likely negatively impact reduce engagement on the page, and likely increase skip or reduce AOV.
The Mobile Solution: The Internal Marketing Promo Tile
The solution was to create a tile that would float in the content, after the user has scrolled down a bit. The user would have control over their consumption of the image. It would be a small object of variable height with a view into a web asset, so that it could be built, hosted and managed at the same time as the web app assets.
The Mobile Solution Proves a success
Having a device in your hand, it was clear that this experience was much more agreeable than having the marketing content start at the top. Because the content appears after you've looked at a few recipes, and its position is at the whim of your thumb movement, it's clear why these tiles proved to be much more effective than their web counterparts, in spite of the screen constraints.
The Promo Tile Spec
Although we would often design custom promo tiles and banner combos we designed a spec so that they could be built and implemented without a designer being involved. We developed a design system of elements for mobile and web with consistent typefaces, colors, and other elements, so that we could use web views in the mobile apps (both iOS and Android), without any disruption to the look and feel. These promo tiles were all built in html/css.
Other Promo Tile Examples
