Projects
Aygaz Online Store & Keyiflibahce.com
Two brands, two buying intents, one commerce backend.
Role: Senior Product Designer (UX/UI)
Scope: End to end product design across two storefronts, flows, information architecture, modular UI structure, desktop and mobile
Platform: Consumer and e-Commerce, Turkey
Client: Aygaz, part of Koç Holding
Agency: HAVAS (Project House)
Recognition: The Communicator Awards, Distinction Awards across three categories, for both sites
Overview
Aygaz is one of Turkey's largest LPG brands, part of Koç Holding. The work covered two of its digital storefronts, built in parallel and running on the same e-commerce backend.
Aygaz Online Satış sold gas cylinders: household, small portable, industrial, plus water and connection accessories. keyiflibahce.com sold and rented outdoor living products: barbecues, patio heaters, lawn mowers.
Different brands, different audiences, different buying behaviour. One system underneath. That constraint shaped most of what follows.
I designed both sites end to end. Flows, information architecture, all screens, desktop and mobile.
The client supplied the audience definitions. For keyiflibahce the primary groups were café owners and operators, and higher income households in detached homes. For Aygaz it was any household that runs on cylinder gas, plus campers and small businesses.
One product, two intentions
The clearest version of the problem showed up on a single product.
The patio heater was positioned as a purchase, aimed at café owners who needed one every day of the season. But a second pattern kept appearing in the client's own account of their customers: households and companies who wanted the same heater for a wedding, a party, an event. They did not want to own it. They wanted it for a weekend.
So the same catalogue had to carry two commercial models. Buying and renting became two primary calls to action rather than one, and the question was how to hold both without making either feel like a variant of the other.
Two paths, not one filter
I set renting and buying as separate top level routes in the navigation rather than as a filter inside a single product list.
A filter would have been cheaper to build and worse to use. Someone renting a heater for one evening and someone buying one for a season are not looking at the same information, are not comparing on the same terms, and are not at the same point in a decision. Collapsing them into one list with a toggle would have forced every product card to serve both, which means serving neither well.
The two paths diverge at the card. Purchase cards carry price and a buy action. Rental cards carry neither, because rental pricing was still dynamic and had not settled at the time of design. Rather than showing a number that would be wrong, the rental card commits to the next step instead.
Designing for a scope that was still moving
Both sites were built as modules rather than as pages.
That is a habit from agency work rather than a preference. Scope on this kind of project is rarely settled at the point the design starts. Sections get added after sign off, a campaign arrives that needs a place to live, a product line appears that nobody mentioned in the brief. A layout drawn as a finished page has to be renegotiated every time that happens. A layout assembled from parts absorbs it.
So the home page is a stack of interchangeable blocks: campaign band, recommended products, dealer locator, how it works, brand content. The listing pages take a promotional slot without breaking the grid. The product card carries price, quantity and a buy action, or drops all three and carries a rental action instead.
The rental catalogue was built on that structure, and the transaction layer behind it was meant to arrive the same way, as additions to a system rather than as new pages.
It is the same reason I build a component library rather than a set of screens. When the brief is going to move, the useful thing to hand over is not a design. It is a kit that survives the next request.
Browsing by what the buyer is actually choosing
The two catalogues are organised on different axes, and that was deliberate.
Purchase browsing runs by product category and price. Barbecues, patio heaters, mowers, sorted by price.
Rental browsing runs by colour. Nine finishes of the same patio heater: green, grey, stainless, white, copper, yellow, blue, black, red. Someone renting heaters for an event is not choosing a product, they already know the product. They are matching a look. Category navigation would have been the wrong tool for that job, and colour was the real variable.
Price depends on where you are standing
On the Aygaz side, cylinder pricing varies by region and delivery is handled through a local dealer network.
That has an architectural consequence. If the price is not knowable until the location is known, location selection cannot sit inside checkout. It has to come before the catalogue.
So province and district selection sits on the home page above the product recommendations, persists across the listing pages, and is repeated on the product detail page alongside a note stating which region the displayed price applies to. It is a small piece of interface that determines whether every price on the site is honest.
Delivery time slot selection sits in the same place, next to the add to cart action rather than in checkout. A gas order is a delivery appointment. Someone buying a cylinder is already thinking about when they will be home, and deferring that choice to a later step would mean carrying an unanswered question through the whole purchase.
A commodity is reordered, not discovered
Gas is not browsed. The same household buys the same product on roughly the same cycle.
The home page reflects that. Alongside the campaign banner sits the previous order, with its item count, its total, and a single action to repeat it. Not buried in an account page, in the hero.
That shortcut lands in the cart rather than at payment. Someone reordering gas often wants one more thing, a second cylinder, a water bottle, and dropping them straight onto a payment screen would push them back out to add it. From the cart they can finish immediately if the repeat is all they wanted, or build on it if it is not.
Invoicing a household and a business in the same flow
The Aygaz checkout had to serve two kinds of buyer. Households ordering a cylinder for the kitchen, and cafés, workshops and small businesses ordering for the premises. Turkish invoicing treats those as separate obligations, and both were arriving through the same front door.
Rather than splitting the flow, the address form branches. Selecting individual asks for a national ID number. Selecting corporate replaces it with company name, tax office, tax number and email. Same form, same position in the journey, different obligations.
The rest of the checkout carries the legal furniture that Turkish distance selling requires: the pre information form and the distance sales agreement as separate explicit consents, the discount broken out from the total, cash on delivery alongside card payment, return conditions on the confirmation, and an order tracking number at the end.
Error and empty states were designed rather than left to the build: an invalid coupon code, a confirmation before removing an item from the cart, a cart with nothing in it.
A decision that did not go my way
I recommended guest checkout. The client declined.
Their reasoning was commercial and it was not unreasonable. They wanted the customer record. Their position was that under Turkey's data protection law, if they were going to hold that data they wanted the marketing consent that came with it. That was their call to make, not mine.
Registration stayed mandatory, so the design had to earn it back. Saved addresses, saved order history, and a reorder that takes one tap from the home page all exist because the account was compulsory. If someone has to hand over their details to buy a cylinder, the second cylinder should cost them almost nothing to buy. The requirement stayed. The cost of it landed on the first order rather than on every order after it.
Working alongside the campaign
Copy and product content were produced agency side, alongside the advertising campaigns rather than as part of the product work. I worked closely with that process, including the product photography.
That is why placeholder text appears in some of these screens. The layouts were built to receive content that was being made on a separate track, and the versions I hold are from before those two tracks met.
Recognition
Both sites were recognised by The Communicator Awards with Distinction Awards across three categories, under Project House - HAVAS.
The award sits in Aygaz's own corporate publication, which records the recognition for the Aygaz Online Satış site launched in December 2017 and for keyiflibahce.com.
What I would do differently today
The checkout is five steps: delivery details, order confirmation, payment details, order summary, completion. Two of those steps show substantially the same information, separated only by whether payment has been entered.
Five steps to buy a gas cylinder is too many. It was the pattern of the period and it was partly a client requirement, but neither is a defence. I would compress it hard today, and the site already contains the argument for doing so: putting the repeat order in the hero is an admission that the fast path matters more than the complete one.
The rental side is the other half of the answer. What I designed was the rental catalogue and its entry point, not the transaction behind it. The steps that make renting different from buying, choosing a period, setting collection and return, handling a deposit, were to be built onto the same modular structure later and sat outside the scope I delivered.
That leaves the strongest idea in this project only partly built. The insight that the same product carries two commercial intentions is the thing worth keeping from this work, and the buying half of it shipped while the renting half stopped at the door.