Case Study
Fab Flair
Design
Development
What i Did
Competitive Research
UX Strategy
Wireframes
Visual Design
Web Development
Tools & Tech Used
Figma
WordPress
Woocommerce
Elementor
Cartflows
Introduction
Fab Flair is a new women’s fashion label that specializes in creating high-quality, unique, and trendy clothing for women. They are committed to providing affordable and stylish clothing options to their customers. As a new brand, they were looking to establish their online presence and reach a wider audience through their brand new e-commerce website.
Project Goal
The goal of the project was to create a user-friendly ecommerce website that would appeal to Fab Flair’s target audience, showcase their products in the best possible way, and drive sales. The website needed to be responsive, visually appealing, and easy to navigate.
Challenges
The main challenge was to create a unique and visually appealing website design that resonates with Fab Flair’s target audience while also ensuring an intuitive and easy-to-use user interface that encourages visitors to make purchases.
Solutions
To address these challenges, I created a highly engaging and responsive ecommerce website for Fab Flair with a strong focus on user experience, featuring a streamlined checkout process and mobile-friendly design.
Process
The project was broken down into several phases:
Research & Planning
To understand Fab Flair’s target audience and the fashion industry, I conducted research on industry trends and competitor websites. I also spoke with Fab Flair’s team to create a strategy that aligns with their vision and resonates with the target audience. This helped identify areas for improvement and create a project roadmap.
Here are some potential outcomes from the research step:
- Identified Fab Flair’s target audience
- Conducted a competitor analysis to identify strengths and weaknesses of other fashion ecommerce websites.
- Researched industry trends in fashion and ecommerce.
- Identified best practices for ecommerce websites, such as designing clear navigation structures, and creating a seamless checkout process.
- Generated insights and recommendations for website design and functionality.
- Established a clear plan for the website design and development process.
Site Map
Created a site map to define the website’s structure and content hierarchy. The site map helped me to understand the different sections of the website, the relationship between pages, and the user flow.
Wireframes
Created wireframes to plan the layout and functionality of each page of the website. This helped me to identify any potential usability issues and make changes before moving on to the visual design stage.
Visual Design
Style Guide
I developed a style guide that defined the typography, color scheme, and visual elements used across the website. This ensured consistency in the design and provided a strong brand identity.
Home Page
The home page design showcased the latest fashion trends and highlighted the brand’s unique selling points.
Some key features of the design included:
- A prominent search bar that made it easy for users to find products.
- A “Shop Now” call-to-action button that directed users to the shop page.
- A section highlighting the trending products.
- Product Grids featuring high-quality images of the latest collections.
Product Page
The product page design was clean and focused on the product’s details.
Some key features of the design included:
- High-quality product images that showcased the product from different angles.
- A detailed product description that provided information on the fabric, size, and care instructions.
- A prominent “Add to Cart” button that made it easy for users to add the product to their cart.
- A related products section that showcased similar products.
Shop/Categories Page
The shop page was designed to be visually appealing, easy to navigate, and filterable.
Some key features of the design included:
- A left-hand sidebar that allowed users to filter products by category, size, and price.
- A large product grid that showcased product images, prices, and ratings.
Cart Page
The cart page design was simple and provided users with a clear overview of their order.
Some key features of the design included:
- A list of products added to the cart with images, descriptions, and prices.
- An option to edit the quantity of the products or remove them from the cart.
- A subtotal section that provided a breakdown of the cost of the products and shipping charges.
Checkout
The checkout page design was designed to be simple and user-friendly.
Some key features of the design included:
- A progress bar that indicated the steps in the checkout process.
- A section to enter shipping and billing information.
- A section to select shipping and payment options.
- A summary of the order and a final confirmation step.
Development
The client wanted to use WooCommerce as their ecommerce platform, so I built a custom website using Elementor, a no-code website builder that allowed me to efficiently and flexibly design the website.
Fully Responsive website
To ensure the website worked well on all devices, I used a responsive design approach. Additionally, I optimized the website for search engines by creating clear and concise meta descriptions, page titles, and keywords. Overall, the ecommerce website is fully responsive and optimized for search engines.
Testing
I conducted thorough testing of the website to ensure that all features and functions were working correctly, and there were no issues with performance or user experience.
Project Outcomes
The e-commerce website I developed for Fab Flair received positive feedback from the target audience for its user-friendly design, intuitive navigation, and personalized user experience. The client was happy with the final outcome, and the website successfully established their online presence, helping to grow their brand.
