- 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
Project background and description
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.
Project goals and objectives
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.
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.
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.
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.
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.
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.
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.
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.
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.
The client needed to display on the product page below the main product all the accessories included.
The “Accessories” section also needs to change when a customer selects the variant (color style).
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.
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.
Because the client provided a long product description text, I need it to add a “Read More” link.
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”.
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.
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.
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.
My role in the project
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.
Success metrics and results
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.