Case Study

Melo Fashion

Designed & Developed a mobile first ecommerce website for a global fashion label.

Design

Development

What i Did

Planning & Strategy
Wireframes
Visual Design
E-Commerce Consulting
Web Development

Tools & Tech Used

Figma
WordPress
Woocommerce
Elementor
Premium Addon

Introduction

Melo Fashion is a women’s clothing brand that offers affordable, trendy, and comfortable clothing for women of all ages. They wanted to create an online presence that aligns with their brand image and offers a seamless shopping experience to their customers.

Project Goal

The goal of this project was to create a visually appealing and user-friendly website that showcases the brand’s products and values. The website needed to be optimized for conversions and provide an easy-to-use checkout process for customers.

Challenges

The main challenge was to create a design that reflects the brand’s vision while keeping the user experience in mind. The client wanted a website that not only looked good but also provided a seamless shopping experience for their customers.

Solutions

To address the challenges, I focused on the following solutions:

  • Streamlined navigation and user flow to make it easy for customers to find and purchase products.
  • Utilized high-quality product photography and detailed product descriptions to provide customers with a clear understanding of the products.
  • Designed a visually appealing website that aligned with the brand’s aesthetic.
  • Incorporated calls-to-action throughout the website to encourage customers to take action and make a purchase.

Process

I followed a systematic approach that included research and planning, sitemap creation, wireframing, visual design, development, testing, and launch.

Research & Planning

I conducted thorough research and analysis on the client’s brand, target audience, and competitors.

Some of the key findings from this step include:

  • The target audience is primarily women aged 20-35 who are fashion-conscious and budget-conscious.
  • The brand’s key differentiators are affordability, trendiness, and comfort.
  • Competitors have a strong online presence and offer similar products at similar price points.

Site Map

Based on the research findings, I created a sitemap that outlined the website’s structure and content hierarchy.

Wireframes

Next, I created a wireframe that laid out the website’s main features and functionality. This helped me to visualize the website’s layout and ensure that it aligns with the client’s requirements.

Visual Design

Style Guide

I created a brand style guide to ensure consistency with Melo Fashion’s overall brand identity.

Home Page

The home page of the Melo Fashion website was designed to create an instant impact on visitors and encourage them to explore the brand’s products further.

Here are some key features of the home page design:

  • Mega menu that directs customers to different sections of the website.
  • Prominent call-to-action button that leads customers to the shop page.
  • Trending products section that showcases the brand’s bestsellers.
  • Search bar to allow customers to easily find products
  • Collection sections for different occasions such as casual wear, formal wear, party wear, etc.
  • Newsletter subscription form that encourages customers to sign up for the latest updates and promotions.

Shop Page

The shop page design included a product grid that displays the products in a visually appealing way.

Some of the key features of the shop page design include:

  • Sorting and filtering options to help customers find products based on their preferences.
  • Product categories that make it easy to navigate to different product types.
  • Product card design that showcases the product image, name, price, and add to cart icon.

Product Page

The product page design included all the essential information about the product, including the product image, description, price, and availability.

Some of the key features of the product page design include:

  • High-quality product images that showcase the product from different angles.
  • Detailed product information that includes fabric/material, care instructions, and size guide.
  • Related products section that showcases similar products to encourage upselling.
  • Shipping information that includes estimated delivery time and shipping options.
  • Add to cart button that makes it easy for customers to add the product to their cart and continue shopping.

Cart Page

The cart page design included a summary of the customer’s selected products, total price, and checkout button.

Checkout Page

The checkout page was designed with a simplified and intuitive form to collect the necessary information from the customers for shipping and payment.

Development

The website was developed using WooCommerce as the e-commerce platform and Elementor as the page builder. This allowed me to create a fully customizable website that was optimized for conversions.

Fully Responsive website

The website was designed and developed with a focus on creating a seamless user experience across all devices. The site was fully optimized for responsiveness, ensuring that it was easy to use and navigate on any device, whether it be a desktop computer, tablet, or smartphone.

Testing

Before launching the website, I conducted rigorous testing to ensure that it was fully functional and optimized for all devices. The website was launched successfully and received positive feedback from customers.

Project Outcomes

The final website was visually stunning and user-friendly, providing an enjoyable shopping experience for customers. The client was extremely satisfied with the design outcome, which perfectly aligned with their brand identity

Discover more about my work

Let’s work together to build memorable Digital Presence.