Avocarrot is the leading programmatic native ad exchange for mobile publishers. It combines real-time technology and premium advertisers from around the world in one platform. That way, mobile app developers can monetize their apps easily with native ads. My role, as the product’s designer, was to establish the brand’s identity end to end; from the landing pages to dashboard.EXPERIENCE AVOCARROT LIVE
Given the big scope of the project, combined with the multiple stakeholders and engineering team involved, a robust process needed to be in place. A process that not only covers the initial releases, which were designed to roll-out in phases, but also the iterative post-releases process - to keep iterating and refining our product to meet users’ and business needs as much as possible.
The initial part, where the main focus is to gather all the relevant content and business goals of the product we are about to built. Given that the product was around before this major redesign, we inherited a lot of features that had positive feedback and received well by our users. Engineers are welcome in this stage too - as I find it extremely useful to have early technical input and everyone has visibility.
After the initial pieces of content and user experience materials are collected, the goal is to start and brainstorm by sketching ideas to wherever we can; from white-boards to papers. Losing precious time to draw wireframes directly to a screen was out of the table, since at this stage, the more ideas the better. Once I lock in to specific wireframes, I translate them to digital format to present them to stakeholders for the final approval.
We've conducted a big user research at the start of the project. I've worked closely with Avocarrot's co-founder, and we've talked with many of our publishers about their needs and their expectations from our product. It was an amazing opportunity to interview real people - the actual users - and get direct feedback on what to build, what they like, what they don't like etc. Moreover, it was equally interesting asking the "why" behind each need. People usually come from different background, with different expertise and different goals. While we were making interviews and collecting qualitative feedback, we had an Intercom Poll inside our page too to collect quantitative. We were asking users what's the one feature they'd really love to see on our product - and we're missing it. Since we saw a repetitive pattern for needs, we decided to start categorizing them into 4 main sections: Setup, Measue, Optimize, Get help. We had a long spreadsheet with all the data in place, and we did an initial competitor analysis. We wanted to identify how is the market responding to the needs we had just collected.
After everything fall into place, we created user personas based on the needs we had collected. We distinguished personas to primary and secondary ones. Primary ones, were our focus. They were our mission. Primary personas were publishers that we had to to satisfy with our product. Next step, was to design a user flow to satisfy primary personas. We've spent a fair amount of time testing and adjusting the flow to certain primary personas needs. The engineering team was in the loop, since we always want to have the technical perspective. For example, we wanted to offer personalized documentation whenever a publisher was integrating his app into Avocarrot. Personalized documentation, meant that sensitive data (such as IDs, Keys etc), should be prefilled for the publisher's convenience. We wanted to provide a smooth experience and only with engineers in the room we could achieve that. I've provided screenshots for certain outcomes which are the top of the iceberg. We had many iterations over and over again.
Translating ideas to usable products is not an easy task. The main goal here, apart from generating all possible states and pages needed, is to provide close support to the engineering team by guiding them for even the smallest detail possible. Moreover, after each release, feedback funnels such as support and analytics makes us always revisit those prototypes - the same way we did in the initial release - to iterate and try to provide the best possible solution.VIEW PROTOTYPES
You can view everything live, translated in code.EXPERIENCE AVOCARROT STYLE GUIDE LIVE
Making a seamless experience out of all touchpoints a user interacts with your product is crucial. Landing pages are not different, since they shape a potential user’s - or business partner’s first impression about your product. In addittion, landing pages in products provide credibility about the product itself which is crucial. With all these in mind, we ended up with a sitemap enough to show all the important Avocarrot features without overwhelming the user. The process here is the same, from content to prototypes and refining - including as early as possible all stakeholders and product team. Last but not least, the sales team has great input on the landing pages, since they hold all the communication with users and they can communicate what users want to see there.
CSS Generated 3D phones
Showcasing the product