Medani World

Project processes

• Business strategy
• Conversion optimization
• Creative strategy
• Digital strategy
• E-commerce development
• Information architecture
• User experience design
• User interface design
• Web design
• Web development
• Theme customization
• Branding Consultation
• Strategy Consultation

Amal Medani is a fashion designer located in Geneva, Switzerland.

Amal was born in London.

She was educated in Beirut, Prague, Addis Ababa, New York, Bonn, and Boston.

Amal worked as an international development practitioner at the United Nations and in a variety of related international organizations that spanned the globe from Africa and the Middle East to West and Eastern Europe and Asia.

Her fashion products are built in Milan and Venezia and are sold all over the world through pop-up stores and now in the online store that I’ve helped her build.

All bags are premium and high ticket merchandise that are sold for thousands of euros and because of that the store needed a premium look.

Amal came to me to help her move from selling on social media to her own store.

Establish an ecommerce online presence for the client to help her centralize the business.

Theme development with custom design.

Create a Newsletter list.

Add social media integrations like Instagram & Facebook.

Coding of custom settings to the Shopify theme editor so that the client’s staff or developer can make changes quickly without needing to write code.

Hero section

On the hero section of the store I’ve added the Medani flag ship “ The Kerma Travel Bag” in the blue color.

A call to action was added as well, on the image to guide customers to the product landing page.

Home Kerma 1

Next on the store home page I’ve highlighted again the most popular style of the Kerma bag but this time opened.

If somehow the first color didn’t convince the customer to click, we try a different color with more visual aid listed.

Home Kerma 2

Below is the next section in which I’ve highlighted all 4 styles of the Kerma travel bag with the most popular option in front.

Home Aida

Following the Kerma bag I’ve listed the second most popular bag, the Aida bag in all 4 styles with a link to the product landing page.

Home Noni

Third in place is the Noni bag which is sold with the Kerma bag and also separately.

Again this section has a link to the product landing page to guide the customer to a purchase.

Home Mini Aida

The Mini Aida is the latest bag built by Medani and to highlight that I’ve added a “New” badge at the top to let the customers know that this is a new addition to the Medani brand line.

Home Newsletter

I’ve added a Newsletter integration with the Shopify Newsletter that will allow customers to receive a discount code once they subscribe.

In this case we choose 15% from the first order that the customer places with the Medani store.

Since Shopify doesn’t support something like this out of the box, I had to develop this integration  from scratch.

This integration will save the customer hundreds of dollars in app fees.

Home Press

Amal, the owner of Medani, wanted to highlight the famous Model Gigi Hadid wearing one of her bags.

I’ve decided that the best section to do that will be on the Homepage in a section called “In the press”.

This section will increase trust with the customers and is expected to increase conversions.

Home Testimonials

I also added a couple of testimonials from some past clients to increase customer trust.

With this part the conversion journey on the home page is completed.

The purpose of every section on the Home page is to make the potential customer click further to learn more about the Medani brand and make a purchase.

Collection page

On the collection page the client wanted to highlight for every product all the styles / variants.

This is not possible by default with the Shopify platform so I needed to develop a custom solution to achieve this.

Besides this I’ve integrated Shopify deep linking which means that every-time a customer clicks on any of the variants listed on the collections page it will be taken directly to that variant.

This will reduce customers clicks / select actions and avoid confusion helping to increase conversions.

Collection “New” badge

We needed a way to highlight the new products on the collection page as well, so in order to do that I’ve coded a “New” badge with the red color to draw maximum attention, but at the same time a very simple layout with a lot of white space for clarity.

This was achieved with metafields in order to make it easier for the staff to apply the badge to new products with a single click.

I’ve also written custom code to display all the new products to the top of the collection page again to make it easier for the customer to notice them.

Variant selector

The client needed to display different images for each product variant when a customer selects via the select input box (variant selector) a new variant (color style), something that is not possible in Shopify without a custom solution.

To achieve this feature I’ve written a JavaScript integration from scratch that will switch the thumbnail images (marked with 2) upon selection of the select input box (marked with 1).

Product accessories

The client needed to display on the product page below the main product all the accessories included.

Again I had to write a custom solution in Liquid and JavaScript to achieve this feature.

The “Accessories” section also needs to change when a customer selects the variant (color style).

Text change

Wherever we needed to list the variant (color style) of the product inside the product description we also needed to find a way to change this upon customer interaction with the variant selector.

This was achieved via custom coding with JavaScript.

Every-time the customer will interact with the variant selector the variant name will change everywhere in the text to the color style that was selected.

Read more

Because the client provided a long product description text, I need it to add a “Read More” link.

When clicked the link will change from “Read More” to “Read Less”. This was achieved with Vanilla JavaScript.

Shopify newsletter

We use Shopify Email on the store and the auto-responder feature is not supported by Shopify.

We needed an auto-responder to allow the client to access the discount code once a customer subscribes to the store Newsletter.

We used a feature developed by me that sends an email to the customer with a link to access the discount code all without needing to use a third-party app.

I’ve also integrated the Newsletter discount code inside user account pages on the store front-end.

This feature will save the client thousands of dollars and help her increase conversions.

Orders listing page

I’ve built the “Orders” page with a simple and clean layout to make it easier for customers to find their orders and see the “Payment Status” as well as the “Fulfillment Status”.

Order page

Again based on the same principle like the “Orders page”, I’ve built the “Order page” to be simple and clean to help the store customer find the information that they are looking for fast and easily.

Press realeases

Since the Medani brand is new to the market, I’ve added the “Press Releases” page to increase customers’ trust in the brand.

We’ve added articles where celebrities use the Medani brand products and apparitions in different news outlets.

Instagram feed

For the Instagram Feed integration I’ve used a third-party app.

I’ve made the required measurements to make sure that the app loading time is minimal and does not have a heavy impact on the page loading time.

I’ve worked directly with Amal Medani, the business owner, as a UI/UX designer and front-end developer.

My role was to create the website from scratch and create a user interface that will help customers buy securely and easily without headaches.

Today following my advice, Medani has started seeing some traction and sales started coming from the first week since launch.

The store is seeing huge success in the US, in the EU as well as internationally.

More measurements will be listed later as we gather more data.