Z2NY: An Olive Oil E-commerce Website.
A responsive olive oil storefront designed to simplify product discovery, highlight the brand story and guide customers through their shopping journey.
- Jul–Aug Project duration
- HTML5 CSS & JS stack
- Live z2ny.netlify.app
A product-first introduction to Z2NY.
Tech stack used to build this project
HTML5
CSS3
JavaScript
BootstrapDesigning a Simpler Olive Oil Shopping Experience.
Z2NY needed an e-commerce storefront where customer could discover olive oil products, learn about how they differ and see prices easily. The design brief called for product details a strong brand story and a shopping experience that everyone could use.
The challenge was balancing product imagery with simple navigation. The responsive layout needed to keep product details and purchase actions easy to find, especially on mobile devices.
Strategy
Three Decisions Behind the Storefront Design.
The layout of the storefront's, the way people navigate through it and the content all were designed together. This was done to help customers find products easily and make shopping choices.
-
Lead with the product
Use a restrained color palette, product photography and clear calls to action to keep the olive oil range in focus.
-
Create a consistent browsing system
Maintain familiar navigation, product cards and spacing across pages so customers can browse the storefront easily.
-
Write for the next decision
Organize product details, brand information and shopping actions into concise sections that customers can quickly understand.
The solution
A Responsive Storefront Across Devices.
The Z2NY website brings product browsing, special collections and brand information together through a visual design. Easy to use menus and clear product displays make it simple for people to look through the options and find ways to shop.
The way the UI/UX were designed shaped the structure of the screen. The words written in the content helped make the product easier to understand. The pictures, below show how the online shopping experience changes to fit both small screens.
-
Desktop introduction
A desktop view introducing the olive oil range.
-
The brand story
Brand information presented through a clear layout.
-
Featured range
Product cards displaying prices and shopping actions.
-
Mobile catalogue
The product catalogue adapted for smaller screens.
-
Mobile introduction
Clear product messaging and a visible shopping action.
-
Product comparison
Product names, prices and options presented clearly.
-
Customer stories
Customer testimonials integrated into the mobile layout.
06 · Delivery highlights
Key Features of the Z2NY E-commerce Website.
This case study showcases the Z2NY storefront’s product catalogue, responsive interface and brand content. It highlights the design and development features of the Z2NY storefront website than claiming unverified sales or marketing outcomes.
Performance improvements need analytics and a clear reporting period. This showcase does not claim any gains, in conversions revenue or website speed.
- Browse A structured product catalogue
- Understand A clear place for the brand story
- Act Visible purchase and enquiry paths
| Area | Delivered approach | Focus |
|---|---|---|
| Catalogue | Product cards group the range with prices and actions. | Discovery |
| Responsive interface | Desktop, tablet and phone visuals follow one design system. | Consistency |
| Brand content | Product information and customer stories have distinct roles. | Clarity |
Start a project
Planning Your Own E-commerce Website?
Share your products, target audience and website requirements. Lets talk about an e-commerce solution that matches your business goals.
Get a quote
