LAST UPDATED - NOVEMBER 2017

© 2017

01

Overview

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
Project Avocarrot - Overview
02

Process

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.

  • Optimized for fast and effective iterations on the product

  • Stakeholders, product team and sales team are in the loop

02 ― 1
Content & wireframing

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.

Project Avocarrot - User flow
Project Avocarrot - Wireframe 1
Project Avocarrot - Wireframe 2
Project Avocarrot - Wireframe 3
Project Avocarrot - Wireframe 4
02 ― 2
Prototypes & refinement

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.

Project Avocarrot - Prototype 1
Project Avocarrot - Prototype 4
Project Avocarrot - Prototype 5
Project Avocarrot - Prototype 5
Project Avocarrot - Prototype 5
02 ― 3
ANIMATION
03

Style guide

Starting off, the first challenge that I had to face was ensuring that the brand identity was correctly being applied in the product when different engineers involved in the process. As there were not definitive rules on how to implement a prototype in code, I would observe simlar designs being developed by different people with different approaches, resulting in major and brand-breaking inconsistencies. After looking into the developer needs and workflows I proposed the creation of a style guide to determine how visual elements are categorised, what states exist and what their relationships between each other is - ensuring that all people involved would comply to a standard way for translating prototypes into code.

Optimistically, a style guide is applied to every product of a company and that’s where the magic lies: it scales so good while it keeps everything visual-wise and experience-wise aligned. On top of that, I’ve used the same set of styling rules for different versions and product needs, such as landing pages, sales decks, employee material etc. Basic pillars of the style guide included:

  • Layout

  • Color palette

  • Typography

  • Grid

  • Components

  • Imagery

  • Illustrations

  • Glossary

Converting all the elements and components from Sketch to actual code is an essential task. The key part here as a designer, was to participate and listen carefully how the engineering team feels most comfortable splitting the style guide to sections and entities.

Project Avocarrot - Style guide Coded
04

Landing page

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

  • Engaging composition

  • Actionable CTAs

  • Showcasing the product

  • Revenue calculator

Project Avocarrot - Landing page 1
Project Avocarrot - Landing page 4
NEXT
Projects - Image 1

Preach

Connecting the dots between web and mobile experience

VIEW PROJECT

Let's create a loop - and become friends