E-Commerce Website
Design
We design store interfaces that make it easier for visitors to find a product, decide and complete checkout. We approach category, product, cart and checkout steps mobile-first, and implement them on Shopify, WooCommerce, hosted packages or custom software.
At which step do visitors give up?
In e-commerce design, every screen exists to make the next step easier. Click a step to see the friction we often find there and how the design answers it.
↳ Click funnel steps; use the “Fixes” switch to compare before and after.
Common friction
- Shipping cost appears only at the last step
- Coupon field pulls attention away
Illustrative visual: the dots are not real data; which step is the problem comes from your own analytics.
The store layers the design covers
Category and filter structure
A category tree and filters based on how customers actually search: size, color, material, dimensions, use. Filter combinations that return no results are hidden.
Product detail template
Image gallery, variant selection, price/installment/shipping info, delivery time, specifications and return policy, in an order that holds up on mobile too.
Cart and checkout steps
Guest checkout, a short address form, shipping costs shown in the cart from the start, and clear error messages right next to the field.
Mobile shopping
An add-to-cart button within thumb reach, a sticky filter bar, a touch-friendly gallery and form fields that bring up the right mobile keyboard (phone, card, postal code).
On-site search
Suggestions as you type, typo tolerance, search by SKU and barcode. When nothing is found, category and contact suggestions instead of an empty page.
Trust signals
Return and exchange terms, contact details, registered company name, ETBİS registration (Turkey's e-commerce registry), secure payment and carrier information, placed close to the purchase decision.
Image standards
A guide to aspect ratio, background and resolution for product photos, so products shot at different times don't look inconsistent in listings.
Campaign areas
Templates with fixed dimensions for home page and category banners; areas that can be swapped during campaigns without needing a designer.
Speed and accessibility
Core Web Vitals targets (LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1), sufficient contrast, readable font sizes and alt text on images.
What a good product page needs to include
Eve Studio
Linen shirt
Installment options available
Free shipping over a set amount
Estimated dispatch: 1–2 business days (example)
Free returns within 14 days
Specs · Size chart
Four points on the path to purchase where sales are lost
Dots represent visitor flow (an abstract illustration).
Category page
If visitors can't narrow down products with filters, or can't see price, variants and stock status in the listing, they leave without ever reaching a product page. We build filters around your product attributes and listing cards around the information needed to decide.
How much design change each platform allows
Your platform determines the scope of the design. The map below helps set the right expectations when planning a new store or redesigning an existing one.
A general illustration; the exact limits on your platform are checked together before the project starts.
Shopify
Store pages can be customized extensively through the theme. Changes to the checkout step are limited to what the platform and your subscription plan allow.
Delivery package · Deliverables
- Figma design file
- Component library
- Color and typography specs
- Screen states (empty cart, error, loading)
- Banner templates
- Product photo guide
Work considered alongside store design
Store design, step by step
- 01
Current state analysis · Discovery
If there's an existing site, its analytics data and checkout funnel are reviewed, and the questions customer service gets most often are collected.
- 02
Flow and wireframes · Planning
The skeleton (wireframe) of the category, product, cart and checkout steps is drawn for mobile first, then approved.
- 03
Interface design · Design
All templates are designed in Figma for desktop and mobile; a component library and banner templates are prepared.
- 04
Implementation and QA · Launch
The design is applied to the chosen platform or handed over to your development team; device and payment tests are run before launch.
Frequently Asked
Questions
Yes. Shopify and WooCommerce allow extensive changes at the theme level. With local Turkish hosted e-commerce packages, design is limited to what the package's theme editor allows, and some areas (e.g. the checkout page) may not be changeable. Before starting, we clarify what's possible on your platform.
We don't promise a specific figure; the result also depends on your product, your pricing and the quality of your traffic. What we can do is find the steps where your analytics show drop-off and fix the known problems there (missing information, long forms, surprise costs). After launch, the same metrics are compared with the previous period.
A typical scope: home, category/listing, product detail, search results, cart, checkout steps, order confirmation, login and account pages, contact and legal pages. Additional templates such as campaign landing pages, a blog or B2B dealer screens are specified separately in the proposal.
However good the design, weak product images limit the result. With our product photography service, we can shoot to the ratio and background standards set in the design. If you'll shoot your own, we hand over a photo guide.
Security itself is handled at the infrastructure level: SSL, 3D Secure and card data processed on the payment provider's infrastructure. On the design side, what matters is showing that security clearly to the customer, keeping the checkout page simple and consistent, and giving clear guidance when errors occur.
Yes. We deliver the Figma file with a component library, color and type specs, screen states (empty cart, error, loading) and mobile/desktop breakpoints. During implementation we answer your team's questions and do a design review before launch.
Marketplaces use their own interfaces, so site design doesn't affect them directly. However, product image standards and product information structure can be shared across both channels. If stock and order sync is needed, the integration is planned separately.