Remzi Anıl Cireli
Inclusive Product Designer
Go back button
Home
design process
design process
dp
Get information about the projectGet information about the projectGet information about the projectGet information about the project
design process
design process
Close the panel buttonClose the panel buttonClose the panel button
2018

Ad Platform

A platform enabling sellers to purchase and oversee advertisements, showcasing their products on N11.com, one of Turkey's foremost online marketplaces.
N11.com
UX Manager
Nilay Ocak, Dilek Yildiz
UX Lead
Remzi Anil Cireli
UI Designer
Serhat Engiz
Role
Research, Facilitation, Ideation, Presentation, UX Design, User Testing
Go to n11.com
Close the panelClose the panelClose the panelClose the panel
Ad Platform - Dashboard

Reinventing N11.com's
Ad Ecosystem

Within the bustling marketplace of N11.com —one of the top Turkish online marketplaces— a hidden gem awaited discovery.
While over 200,000 sellers clamored for the spotlight, an underutilized ad-buying system lurked in the shadows. It was time to unveil its true potential as ads were not just an auxiliary feature but a substantial revenue stream.

Reinventing N11.com's
Ad Ecosystem

Within the bustling marketplace of N11.com —one of the top Turkish online marketplaces— a hidden gem awaited discovery.
With over 200,000 registered vendors competing for customer attention, advertisements played a crucial role in getting top spots on N11's listing pages. It was time to unveil its true potential as ads were not just an extra feature but a substantial revenue stream.
Introduction

Stepping into the Unknown

Hired as a user experience designer, I embarked on a mission alongside a UI virtuoso. Our quest? To rebuild N11's Ad Platform from the ground up and usher in a new era of ad purchasing.
My role was akin to a bridge between business visionaries, end-users, and the development guild. With the compass of design thinking, I embarked on a voyage.
As the conductor of the Ad Platform's transformation, I collaborated closely with the Ad Department, transforming their dreams into a tangible digital reality. In tandem with an IT maestro, we transmuted ideas into lines of code. In this journey, my responsibilities included:
Conduct user research, ideation, and persona development
Craft the product vision
Define the scope and gain alignment with business stakeholders on the MVP concept
Present processes and findings to C-level executives
Create information architecture, task flows, wireframes, and interactions
Enhance user interactions on the UI
Conduct user testing
Strategize next steps for development
Discovery

Unearthing Insights

The journey commenced with an in-depth desk research phase, exploring the existing ad-buying system within the admin panel. A heuristic assessment of the current system provided essential insights.

The Art of Observation

Employing netnography, I uncovered seller sentiments, delving into their perception of N11 and advertisements.

Charting the Competition

A comprehensive evaluation of competitors' ad systems helped position N11's system in the market.

Voices of the Merchants

Fourteen sellers became our guides through phone and one-to-one interviews, revealing their struggles and aspirations.

Motivations
of the Brave

I need to highlight my products effortlessly with standout ads.

01

The Quest for Prosperity

Advertisements were seen as an investment to boost sales.

02

Spotlight on the Prized

Sellers leveraged ads to spotlight popular or seasonal products.

03

A Unique Odyssey

Unique products sought to gain visibility in the market.

Thorns of the
Journey

I get lost in the ads setup. I wish it was more straightforward.

01

The Budget Enigma

Users struggled to track ad spend effectively.

02

Invisible Threads

The absence of ad-performance-sales correlations left users in the dark.

03

Diverse Trails

Multiple ad models with varying workflows caused confusion.

04

The Shrouded Status

Sellers couldn't determine if their ads were running effectively.

05

The Price Conundrum

Sellers voiced concerns about fixed ad prices, impacting small and large sellers differently.
Define

Shaping the
Project Foundation

An image of the workshop we applied during ideation phase.

Workshop of Dreams

The Ad Department's ambitions were vast, and to shape them into reality, a fun workshop convened. We all collaborated to identify:
Business goals
Target audience
Technology stack
Cost considerations
Competitors
The comprehensive workshop throughout the entire workday not only enriched our collaborative efforts but also yielded two invaluable insights:

A Collective Vision

A shared product vision statement we came up with collaboratively.

Art of Prioritization

Defining Ad Platform's primary functionality and future scope of what it can be.
Ad Platform Prioritization Matrix

Portraits of the Users

Desk research, workshop outcomes, along with the user interview insights provided a palette of data, from which three personas emerged:
Photo of First-time ad buyer persona. Ertan Can Ozkan.

Ertan Ozkan

First-time Ad User

A novice in the world of ads, seeking a straightforward path to promote products.
I need a quick, easy, and helpful way to showcase my products to increase the sales.
Photo of Constant Ad Buyer persona. Mehmet Basoglu

Mehmet Basoglu

Constant Ad Buyer

A seasoned ad buyer, juggling online sales, seeks streamlined tracking.
Showcasing my products is great but keeping track of sales and ads is a hassle.
Photo of abandoner persona. Salih Karakaya

Salih Karakaya

Abandoner

A returnee to the ad realm, haunted by past uncertainties, but driven to improve sales.
I have tried ads before. I was not able to tell if the ads I bought helped my sales or not.
Ideate

Crafting the Concept

Informed by the insights and personas, the Ad Platform's concept transformed. Using the insights from the users and the outcomes of the workshop, we were able to change the vision of the platform.

From being only
business oriented
A platform to publish ads
To a more
user oriented
A platform that analyzes data to help users make better decisions when purchasing ads

N11 Ad Platform had to become a smart system, connecting customer purchase data with seller product metadata. Though it required substantial data, it would pave the way for a system that users would visit regularly. And to be able to do that we had to start tracking data on the following:

Inventory sizes
Product categories
Sales patterns
Ad spending
User activity
Keyword trends

While the necessary data was not there, we asked the analytics team to start collecting and cross-referencing this data so that our vision could become a reality for future iterations. We hoped this data collection would not only help us make more ad sales, but it would also help sellers to get suggestions from us.

in depth
segmentation
detailed
data tracking
intelligent
system
automation
suggestions,
gamification
better
marketing
increase in
sales & retention
Design

The Birth of Ad Platform

N11 Ad Platform, a digital haven for business partners yearning for visibility and data-driven insights. Key features included:

Final design of the main dashboard

Data Alchemy

A clear dashboard, a repository of insights

The Seller's Helm

Streamlining ad tracking and purchases

Beacon of Alerts

Notifications for product performance, expiring ads, and budget alerts

Guiding Ertan's Voyage

First-time Ad User

An onboarding process leads Ertan through the platform's navigation along with running a free ad, while all prominent help sections provide a guiding star.
Wireframe
Final Design
Wireframe of main dashboard screen of the Ad PlatformWireframe of the onboarding for a first time user on the dashboardWireframe of FAQ and Wiki section on the left navigation
Click on the following bullet points to highlight the sections on the design
Step-by-step onboarding which introduces the main areas of the dashboard
Always visible help links for FAQ and video guides
Main Dashboard screen of the Ad PlatformFinal design of onboarding stepper, with a SKIP buttonFinal design of the help area on the left navigation
Click on the following bullet points to highlight the sections on the design
Step-by-step onboarding which introduces the main areas of the dashboard
Always visible help links for FAQ and video guides

Ertan's Flow

Ertan Ozkan is new to the platform and needs to learn the basics to manage online sales.
Use the controls of Figma to zoom in and move around on the task flow

Empowering Mehmet's Odyssey

Constant Ad Buyer

Mehmet receives essential notifications to maintain his sales performance, both online and offline.
Wireframe
Final Design
Wireframe of "All Ads Statistics" pageWireframe of notifications functionality of Ad PlatformWireframe of tracking functionality of Ad PlatformWireframe of calendar or list views of ads in progressWireframe of filtering functionality of Ad Platform
Click on the following bullet points to highlight the sections on the design
Automatic tracking and notifications for expiring ads
Summary of ad-running products, impressions and sales
Choice of view options for arranging ads on a timetable or list view for better organizing and viewing
Filter & search functionalities to find specific products
Ad Platform - Tracking all ads screenFinal design of Notifications system within Ad PlatformFinal design of Tracking the ad running products page within Ad PlatformFinal design of Calendar-List view functionality within Ad PlatformFinal design of Filtering functionality within the Ad Platform
Click or tap on a bullet point to get a detailed view
Automatic tracking and notifications for expiring ads
Summary of ad-running products, impressions and sales
Choice of view options for arranging ads on a timetable or list view for better organizing and viewing
Filter & search functionalities to find specific products

Mehmet's Flow

Mehmet gets alerted and decides if he wants to renew the expiring ad or not.
Use the controls of Figma to zoom in and move around on the task flow.

Tempting Salih's Return

Abandoner

Salih was enticed back into the world of ads, with personalized suggestions based on his products' performance.
Wireframe
Final Design
Dashboard of the seller admin panelWireframe of an ad marketing popup on the admin panel of the sellersWireframe of product performance pane on the admin panel of the sellers
Click on the following bullet points to highlight the sections on the design
Informative pop-ups and/or alerts on the admin panel on low performing products and directing users to the Ad Platform
Integrated Ad Platform statistics within the Admin Panel for all the products of the user
Dashboard of the seller admin panelFinal design of an ad marketing popup on the admin panel of the sellersWireframe of product performance pane on the admin panel of the sellers
Click or tap on a bullet point to get a detailed view
Informative pop-ups and/or alerts on the admin panel on low performing products and directing users to the Ad Platform
Integrated Ad Platform statistics within the Admin Panel for all the products of the user

From Sketches to Final Designs

See final designs to the right, tested using high-fidelity wireframes. Click or tap on the designs to see wireframe versions.

Specific Ad Model Page
Ad Calendar
Run an Ad Process - Choose Products
Run an Ad Process - Input Details
Run an Ad Process - Select Dates
Run an Ad Process - Review & Apply
Individual Product Analysis
Ad Point Purchase
Final design of ad specific page for sellers to see how a specific ad is performing
Specific Ad Model Page
Track products that are running, will start running, and has finished running ads. Ability to take ad actions for each product.
Graphical chart to show impressions on a daily, weekly, monthly basis
Help links that are specific for each ad model
Ability to see ads on a calendar view
Final design of Ad CalendarWireframe of "Ad Calendar" page
Ad Calendar Page
View of which products are running on a day-by-day basis
Ability to move products (ads) from one day to another by drag & drop functionality
Create an ad right on the day by just clicking on a specific date
Final design of step 1 of Ad purchasing. "Select Products" page.Wireframe of step 1 of ad purchasing. "Select Products" page
Run an Ad Process - Choose Products
Choose the products that you want to run an ad for
Collapsible area to get more information about a specific ad model (Visible throughout the whole process)
Final design of step 2 of Ad purchasing. "Enter Details" page.Wireframe of step 2 of ad purchasing. "Enter Details" page
Run an Ad Process - Input Details
Input the details that are needed (Details change from one ad model to the next)
Collapsible area to see how the product will look on a listing page (Visible throughout the whole process)
Final design of step 3 of Ad purchasing. "Select Dates" page.Wireframe of step 3 of ad purchasing. "Select Dates" page
Run an Ad Process - Select Dates
Choose the date or date range the ad will run
Final design of step 4 of Ad purchasing. "Review before Purchase" page.Wireframe of step 4 of ad purchasing. "Review & Run" page
Run an Ad Process - Review & Apply
Ability to search and filter the chosen products
Ability to change each individual product’s running date and details
Individual product analysis page for keeping track of a product's sales performanceWireframe of "Individual Product Analysis" modal
Individual Product Analysis
Focus mode to see each individual product’s performance based on impressions on a daily, weekly, monthly basis
Final design of "Ad Point History" page for users to keep track of their ad spendingsWireframe of "Ad Point History & Analysis" page
Ad Point Purchase
Track ad point purchase history (which are used to run any ad)
Detailed segmentation of how ad points are purchased or gained

From Sketches to Final Designs

See final designs below, tested using high-fidelity wireframes. Hover (tap on mobile devide) to view wireframe versions.
Final design of ad specific page for sellers to see how a specific ad is performingWireframe of "Specific Ad" page for users to keep track of products that are under a certain ad model
Specific Ad Model Page
Track products that are running, will start running, and has finished running ads. Ability to take ad actions for each product.
Graphical chart to show impressions on a daily, weekly, monthly basis
Help links that are specific for each ad model
Ability to see ads on a calendar view
Final design of Ad CalendarWireframe of "Ad Calendar" page
Ad Calendar Page
View of which products are running on a day-by-day basis
Ability to move products (ads) from one day to another by drag & drop functionality
Create an ad right on the day by just clicking on a specific date
Final design of step 1 of Ad purchasing. "Select Products" page.Wireframe of step 1 of ad purchasing. "Select Products" page
4 Step Run an Ad Process - Choose Products
Choose the products that you want to run an ad for
Collapsible area to get more information about a specific ad model (Visible throughout the whole process)
Final design of step 2 of Ad purchasing. "Enter Details" page.Wireframe of step 2 of ad purchasing. "Enter Details" page
4 Step Run an Ad Process - Input Details
Input the details that are needed (Details change from one ad model to the next)
Collapsible area to see how the product will look on a listing page (Visible throughout the whole process)
Final design of step 3 of Ad purchasing. "Select Dates" page.Wireframe of step 3 of ad purchasing. "Select Dates" page
4 Step Run an Ad Process - Select Dates
Choose the the date or date range the ad will run
Final design of step 4 of Ad purchasing. "Review before Purchase" page.Wireframe of step 4 of ad purchasing. "Review & Run" page
4 Step Run an Ad Process - Review & Apply
Ability to search and filter the chosen products
Ability to change each individual product’s running date and details
Individual product analysis page for keeping track of a product's sales performanceWireframe of "Individual Product Analysis" modal
Individual Product Analysis
Focus mode to see each individual product’s performance based on impressions on a daily, weekly, monthly basis
Final design of "Ad Point History" page for users to keep track of their ad spendingsWireframe of "Ad Point History & Analysis" page
Ad Point Page
Track ad point purchase history (which are used to run any ad)
Detailed segmentation of how ad points are purchased or gained
Validate

The Crucible of Validation

Collaboration with the UI designer ensured that designs aligned with stakeholder and user needs. While sometimes the wireframes were all that was needed to get business stakeholders to get confirmation, to test the important tasks of ad running and ad point purchasing we had to create a high-fidelity prototype.

Navigating the Flow

Users embarked on a quest through high-fidelity prototypes, ensuring the platform met their needs effectively. We prepared couple of scenarios where users had to go through the process of applying ads on a specific product.

12

Participants

83%

Completion Rate

tools

Miro, Sketch, Invision, Lookback
Conclusion

The Epilogue

As my journey drew to a close, the Ad Platform's core concept had been established. The transformation of N11.com's Ad Platform from a humble ad-purchasing tool to a trusted seller's ally bore witness to the power of innovation and user-centered design.

A Legacy of Impact

The seeds we planted during this transformative journey began to bear fruit. The Ad Platform wasn't just a project; it was a catalyst for change within N11.com. It was more than code and pixels; it was the embodiment of user-centric thinking and collaborative effort.

User-Centric Metrics Ascend

Our journey's success was evident in the numbers. The two major KPIs I set when I embarked on this project in October 2018 were nothing short of transformative:

31%

Increase in Sales in the Spotlight
The amount of monthly sales witnessed a remarkable ascent. In March 2020, ad sales soared, showing a remarkable 31% increase compared to the same period in 2019.

63%

Increase in Sellers' Journey Sessions
The duration of seller sessions on the platform exhibited a commendable 63% rise overall. Sellers were not just using the platform for ad purchases; they were making it an integral part of their daily operations.

A Tribute to Collaboration

While I played a pivotal role in shaping the early stages of the Ad Platform, the near-final designs were a collaborative effort involving all stakeholders. The spirit of teamwork and dedication was the driving force behind this transformation. It was a testament to what can be achieved when diverse talents converge for a common goal.
The Ad Platform is now a living entity, adapting and evolving based on user feedback, technological advancements, and the ever-changing landscape of e-commerce.
The Ad Platform has also become a beacon of transformation within N11.com, illuminating the path to a brighter and more user-friendly future.

Thank you for reading

Up arrow icon to go to the top of the page