Transforming Hepsiburada’s eCommerce experience for Turkey

Strategy and solutions

The product strategy for Hepsiburada’s front-end rewrite was built around a Mobile-First Release Strategy, prioritizing mobile optimization to meet the growing needs of mobile users.

The strategy was rolled out in phases, starting with the launch of a mobile-optimized site (mobile.hepsiburada) alongside the existing desktop site. Phase 1 focused on delivering a responsive UI/UX, conducting user testing, and implementing key features such as registration, login, product pages, and order status tracking. Iterative releases ensured continuous feedback and validation to guide improvements.

Phase 2 expanded these efforts by introducing responsive desktop rendering, account management, and category landing pages. The approach emphasized user-centered design, leveraging data insights and user feedback for iterative enhancements. By adopting a modular, multi-channel architecture, the team ensured scalability and a seamless user experience across devices, aligning with business goals and technical requirements.

Mobile-first Architecture:

Designed a responsive framework to ensure seamless user experiences across all devices, enabling a multi-channel shopping experience.

Modular UI components:

Developed scalable, reusable components for faster feature deployment and customization.

src/
├── components/
│   ├── ProductCard/
│   │   ├── ProductCard.js
│   │   ├── ProductCard.styles.js
│   │   └── ProductCard.test.js
├── pages/
│   ├── HomePage.js
│   └── ProductListPage.js
├── services/
│   └── productService.js
└── utils/
    └── formatter.js

// ProductListPage.js
import React, { useEffect, useState } from 'react';
import ProductCard from '../components/ProductCard/ProductCard';
import { fetchProducts } from '../services/productService';

const ProductListPage = () => {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const getProducts = async () => {
      try {
        const data = await fetchProducts();
        setProducts(data);
      } catch (error) {
        console.error(error);
      } finally {
        setLoading(false);
      }
    };

    getProducts();
  }, []);

  if (loading) {
    return <p>Loading products...</p>;
  }

  return (
    <div>
      {products.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
};

export default ProductListPage;

Agile delivery framework:

Supported continuous delivery with iterative feature rollouts based on customer insights, enabling rapid adaptation to evolving user needs and business goals.

In a highly collaborative environment, the Agile framework fostered seamless coordination between cross-functional teams, including developers, UX designers, product owners, and QAs. Sprint planning sessions were held at the start of each iteration to define clear objectives, prioritize the backlog, and align on deliverables. Daily stand-ups provided a platform to track progress, discuss blockers, and synchronize tasks, ensuring alignment and transparency across the team.

The design process followed a continuous feedback loop, with UX designers iterating on low-fidelity prototypes based on user testing and stakeholder input. These prototypes were quickly refined into high-fidelity designs and passed to developers for implementation. Work items were broken down into manageable user stories and tracked through Agile tools like Mingle, facilitating a clear workflow from design to development and testing.

Regular retrospectives at the end of each sprint allowed the team to reflect on successes and areas for improvement, further enhancing the delivery process. By integrating iterative design and development, the team consistently delivered high-quality features that aligned with customer expectations and business objectives.

Results and impact

The mobile-first digital storefront successfully transformed Hepsiburada’s online marketplace, leading to a significant boost in user engagement and marketplace growth. The scalable architecture, supporting over 600,000 products and millions of monthly users, played a crucial role in this success. Since the launch in 2014, Hepsiburada has strengthened its position as Turkey’s largest eCommerce platform, capturing 17% of the country's $13 billion e-commerce market by 2023. Total sales volume increased by 104% in 2023, reaching 116.5 billion TRY after adjusting for inflation. This foundational work continues to be integral to Hepsiburada’s sustained growth and leadership in the regional market.

Challenges and learnings

Balancing rapid feature development with high performance and responsiveness posed significant challenges. Tackling these challenges required rigorous adherence to Agile practices and fostering a highly collaborative environment. Cross-functional teamwork often involved extended hours to align on priorities and resolve technical roadblocks, but the efforts were worthwhile given the end results.

Ensuring a highly responsive and adaptive framework for various devices required more than just front-end strategies like CSS media queries. The team also had to implement server-side optimizations, such as user agent detection, to deliver tailored experiences. Achieving this level of responsiveness involved intensive collaboration with back-end developers and overcoming technical constraints to create a seamless multi-channel experience.

One of the most significant challenges I faced was balancing my role as Lead Front-end Developer with acting as the interim Iteration Manager. This required not only driving the technical aspects of UI development but also taking full ownership of Agile ceremonies on a daily basis. I facilitated sprint planning, backlog grooming, daily stand-ups, and retrospectives, all while managing scope, prioritizing tasks, and resolving blockers. The constant context-switching between technical and managerial responsibilities stretched the role thin. A talented colleague later joined the project, well suited to the iteration-management side. Her expertise brought much-needed stability, addressed gaps in planning and alignment, and allowed me to refocus on front-end development. This experience underscored the importance of role clarity, effective delegation, and building a strong support system within the team.