Leadcode is an online advertising yield management platform for publishers. The platform lets you create, manage and monitor your campaigns on several places including Outbrain, Taboola, Facebook Ads, Google Adwords and Youtube in one place.
It emerged from one of it’s biggest client’s, Forbes’, need to monitor the performance of its content and it’s own advertising real estate in an buying and selling arbitraged environment.
Leadcode had previously build the backend system required to connect and get different APIs talking to the system. But it was purely an engineering led effort, which meant although the capability to execute a function existed, it could only be operated and understood by a specialist. The UI that was built was essentially some open source programs loosely tied together in an ad-hoc manner, stretched beyond their capabilities.
I was hired by Leadcode to design the platform and untangle the complex engineering to build the first version of the product to attract investment by taking it to the market. I came in to design the UX workflow and architecture of the platform and to finally tie them with a UI for the end user.
Leadcode wanted to come out with a platform that they can use within their existing client group and eventually wanted to create a white-label-able product for expanding their reach. The engagement was divided into two phases. The first to design the UX & UI of the product to create a new campaign and the second the UX (including data visualisation) & UI for the dashboard to monitor the performance of the launched campaign.
Several areas within the existing app were identified as design challenges within the following flows:
It became clear after digging around the system that the heart of the entire product, the property that was being arbitraged, was the articles.
With the articles view, various tasks like making changes to the campaign, changing the targeting, slicing and dicing information and changing other settings could be accomplished and the same view could stay true for the admin or other users like managers so they could see the activity or generate reports within all articles or each individual one. A floating menu lets you also perform tasks within each selection made contextually, for e.g. a user can create a new campaign or the admin might be able to archive selected campaigns.
The flow to create a new campaign was directed using a 5W1H approach. A simple wizard guided you from start to finish and was designed to break the flow is smaller and relevant chunks while maintaining a linear flow.
After several iterations on creating a single bird’s-eye view to encompass the graphical representation of the dashboard, we realised it was best plotted in a Versus Graph.
The result was a design that is essentially a dual versus graph. A date stamp along with a time-scroller enabled the user to see how a visual pattern would emerge, which could aid in timely intervention to mitigate risks of poorly performing articles.
A bar graph for each specific instance and a timeline to plot activity were also shown to get a complete picture.
That remains to be true even in a system that has a lot of data and a lot of numbers to process. So besides being able to visually see a piece of data that could be important, I designed the system so even if it’s not visually apparent, it can be made so by digging in to the precise information that needs the right visualisation to reflect the level of attention it may or may not require. A full screen filtering mechanism helped to achieve this goal and quick selections of regularly made filters could be saved and accessed for different users according to what mattered to them.
CAP table @ DealstackProduct Design
Various design works and thought leadership @ BeaconProduct Design & leadership
Tap Tap SignupUI + UX
Document sharing workflow @ DealstackProduct Design
Design systems design @ PreqinProduct Design
Repositioning by rebranding: the Moonraft brand storyProduct Design
SurePeople Proper HamburgerUI + UX
2018 CalendarGraphic Design
Rejected Web DesignsWeb Design
AddOn for numbersUI / UX
Designing an app for the grey collared job marketProduct Design
Pankaj & Priya wedding collateral designsGraphic Design
The MYLK propaganda designsGraphic Design