New eCommerce Responsive Website Design for
ZER4U
The leading Flower & Gift Store chain in Israel
My Role: Product Designer
Marketing Research
Before I started the UX-UI process in the new ZER4U website, I examined several flower shops in Israel and other countries which have online shopping.
I wanted to analyze their marketing strategy, the product page flow, the architectural information of the websites and the design concept.
After reviewing the Israeli websites, I have to admit I didn’t find anything inspirational and most of them had the same characteristics of the ZER4U existing website.
The abroad websites, especially in England, there were a few online shops which were interesting to analyze.
Most of the websites the user had to fill in the date and the delivery address. This was a necessary phase for the continuation of the purchase process.
Most of the websites presented on their product page ancillary products of choice.
The list of products were introduced by carousels or open lists. The design concept was white background and the usage of gentle pastel colors.
I wanted to analyze their marketing strategy, the product page flow, the architectural information of the websites and the design concept.
After reviewing the Israeli websites, I have to admit I didn’t find anything inspirational and most of them had the same characteristics of the ZER4U existing website.
The abroad websites, especially in England, there were a few online shops which were interesting to analyze.
Most of the websites the user had to fill in the date and the delivery address. This was a necessary phase for the continuation of the purchase process.
Most of the websites presented on their product page ancillary products of choice.
The list of products were introduced by carousels or open lists. The design concept was white background and the usage of gentle pastel colors.
Mobile Home Page
The first decision in the Ui Ux design process was to focus on the mobile user point of view. This decision was made after a first client meeting where we analyzed a Google Analytics report showing an equal amount of purchases made by mobile users and desktop users. Therefore, our priority was to begin the design process where the architecture information was complicated and more challenging.
Desktop Home Page
The home page was created and design according to the responsive approach. I would like to expand on the marketing strategy approach on the home page: The goal was to display a variety of products without hiding them in carousels in order to make the product search easier for the browsers and shorten the purchasing process. In addition, it is more effective to promote and display relevant products.
The Header In Desktop
Top bar showing links to social networks, messages such as "Free Shipping...״ , and customer service. The main bar is the critical bar- navigation and shopping cart. A bottom bar that displays important messages such as: special sales and more ...
The header is a sticky header.
Delivery Details Process
Products supply are carried out according to the location of the nearest store to the client’s order address. Once the customer fills in the address and date of delivery, the system performs an inventory check of the store according to the client’s order address. Once the inventory check is done, the user can complete the order.
In order to emphasize the importance of choosing the delivery address, we have placed a dominant BTN on the upper part of the home page and the product page. The client can not add any product to the shopping cart until he fills in the date and delivery address.
Product Page
The purchase process on the product page has 3 steps:
1. The main product of choice.
2. An optional vase of choice
3. An ancillary product of choice (such as chocolates and balloons).
Once the client selects his products of choice he adds them to the shopping cart.
The gallery display will change according to the client’s main product and vase choices.
Shopping Cart
The marketing strategy of “Zer4U” was to increase the online sales. Therefore, we placed in the upper part of the Shopping cart page “upsale” carousel which is effected by the client’s shopping cart contents. If the client is not interested, he can press the “skip” button which will scroll the page down to the his shopping cart details.
Checkout Process
The user has to provide a large amount of information at the checkout stage.
The challenge on this page was to make the process simple and convenient.
We decided that the checkout process would be on one page in order to create a better flow for the user.
The order summary on the left side of the page is a master part and stays permanent while the user scrolls along the page.
The Concept Design
Gentle & Clean
Based mostly on green colors in order to give the feeling of nature
The color palette
Font
Almoni Tzar (bilingual font) - Three weights
Thank U 4 Scrolling .