top of page
Template Engine
A system designed to eliminate development effort when taking ad properties on the product live, while maintaining the design quality and track impressions and click rate of the same.
The panel was designed mainly for desktop computers in the pilot project, for company's internal use only.
Year : 2021 Company : CarTrade Tech
Specifics : UI/UX, Design Research
Overview
Problem Statement
There are some ad properties that perform the most and hence are sold more often, which leads to 70% of the team's bandwidth being occupied doing adaptations and also creating monotony in work for design and development. This leads to fewer innovations and the POC of the current ideas also takes longer.
In order to tackle the problem, we are looking to design an engine that should be able to take ad properties live with less to no effort from the tech team.
Research
Discovery
To solidify the statement given to me I wanted the know the exact journey of an Ad, from a requirement coming into CarWale to the very last step that CarWale provides.
So I started performing stakeholder interviews and I got some insights, I also tracked the flow of the whole process from creating a design to final deliverables and all the team's processes involved in it.
Insights
-
Design is divided into three parts: images/videos, text content, and interactive/animated assets.
-
Even though the tasks are similar there are chances of human errors which adds more turnaround time.
-
After development there is a need for a staging link, to get final approval from the client.
-
Designs are highly optimized which leads to blurred text hence texts and CTAs are often added by the development team.
-
The panel would be used by users with no experience in working on design tools.
-
Ads are often scheduled to go live at a specific time and not always in real-time.
-
After the development of the design, trackers are added to the design.
Activity Diagram
After gaining the insights and the process I got an idea of what direction I should take the panel.
Vision Statement
The proposed template engine will save the HTML bandwidth by a huge margin. It will also maintain the quality of the design and take the property in record time without any human errors.
Design
Similar Engines
I did some research on some similar engines which helped me understand the usability aspect of my project, and some other findings.
Highlights
Every digital Ad has to go through a process where the design is coded in the website, and there are a few engines available that help the user in the process without a developer.
Every engine available in the market had a comprehensive solution where users can not only develop the design but also create the design from scratch.
The engines only provide the service to their websites, for eg: you can only upload google web designer for google ad slots and not use the code on other websites.
Every engine had the flexibility to add extra codes if needed manually.
Tools Research
Similar tools available on the market were not exactly like what we were looking for as they had all-around features of a design tool.
But helped me understand the overall structure and also gave me an idea of the process, challenges, and execution while
performing a task.
Framework
Wireframing and Design
With all the data collected, I started prioritizing the functions of the panel and later dived into the details of each function by dividing the functions into primary and secondary functions.
Primary & Secondary Features
Wireframe
Categorizing the features helped me in creating the structure of the panel.
Then I moved to low-fidelity wireframing and designed scenarios for the main screen.
Default screen
Background added
Content Added
Refinement
Results
After introducing the template engine the turn around time of an Ad being taken live reduced by 70%.
It also divided the development work, each client servicing can now take their own Ad live.
As intented it also reduced time needed to do changes after being taken live, as there was no coding required.
bottom of page