5-day Full E-Commerce Platform Design on Figma

Alison Wenner

0

Web Designer

UX Designer

UI Designer

Figma

Framer

Overview I led the redesign of a skincare e-commerce platform, focusing on creating an engaging and user-friendly experience for shoppers. Using Figma, I designed a fully responsive interface across desktop, tablet, and mobile, and built over 30 screen user flows to optimize the customer journey, from product discovery to checkout. Additionally, I developed a full design system and component library to streamline future design iterations, ensuring brand consistency and a smooth development handoff.
Project Goals The main objectives for the skincare e-commerce redesign were to:
Build a responsive design that offers a seamless experience across all devices, ensuring that mobile users in particular have an optimized shopping experience
Enhance user engagement by making product discovery and checkout faster and easier
Develop a design system and component library to maintain brand consistency and improve scalability
Improve the user interface to better reflect the skincare brand’s aesthetics and ethos, increasing customer trust and satisfaction
Process Breakdown
Discovery & UX Strategy To kick off the project, we conducted a thorough discovery phase to analyze user behaviors, define personas, and identify key challenges faced by the platform's customers. This phase also included a competitive analysis of other skincare brands to gather insights on industry best practices. The focus was on creating an intuitive shopping experience that makes browsing and purchasing skincare products simple and enjoyable, with a strong emphasis on mobile usability given the target audience.
Key Deliverables:
User personas identifying key customer segments, including skincare enthusiasts, first-time buyers, and returning customers
Defined user journeys that addressed pain points, such as finding the right products for specific skin types and making the checkout process frictionless
Strategic UX improvements focusing on personalized recommendations, product filters, and streamlined checkout
Responsive Design Using Figma, I designed fully responsive screens for the skincare platform, ensuring an optimal shopping experience across devices. The mobile experience was prioritized, recognizing that a significant portion of skincare consumers browse and shop on mobile. Every element was carefully crafted to adapt seamlessly, from product grids to interactive elements like filters and sorting options.
Key Deliverables:
Over 50 user flows designed in Figma, covering all key areas from homepage to checkout
Mobile-first design that provided users with a smooth shopping experience across devices
Product discovery enhancements, including simplified filters and personalized recommendations based on customer preferences
Design System & Component Library A comprehensive design system was developed to ensure the skincare platform maintained consistency in its look and feel, regardless of future updates or redesigns. The system included a full component library covering everything from product cards and buttons to modals and navigation bars. This design system not only ensured visual consistency but also sped up future development and maintenance by providing reusable components.
Key Deliverables:
A complete design system with UI components, color palettes, typography, and interaction guidelines
Component library including reusable elements like buttons, forms, and product cards, tailored specifically for e-commerce needs
Detailed design documentation to facilitate a smooth handoff to developers
User Interface Design The UI design was aimed at aligning the platform’s visual identity with the skincare brand’s premium, clean, and nurturing image. Soft colors, ample whitespace, and high-quality product imagery were used to create a relaxing and inviting shopping environment. Product pages featured detailed information and customer reviews, helping users feel confident in their purchasing decisions.
Key Deliverables:
High-fidelity mockups for all major pages, including product listings, product details, and checkout pages
Enhanced product pages with rich content, including skincare guides, ingredient breakdowns, and reviews
Consistent visual identity with a calming color palette and clean, modern typography reflecting the brand’s ethos of self-care and trustworthiness
Improved User Flows The redesign streamlined over 50 user flows to make it easier for customers to discover products, compare items, and complete their purchases. I focused on optimizing the product search and filtering options, enabling users to easily find products based on skin type, concerns, and ingredients. The checkout process was simplified to reduce cart abandonment, with features like guest checkout, saved payment methods, and order tracking.
Key Deliverables:
Simplified and intuitive product search and filtering mechanisms tailored to skincare needs (e.g., by skin type, ingredients)
Streamlined checkout process designed to minimize friction and reduce cart abandonment
Personalized user flows that highlighted popular products, customer favorites, and skin care guides based on individual preferences
Results The redesigned skincare platform provided a seamless and responsive shopping experience across all devices. The enhanced user flows, along with the intuitive interface, led to higher user engagement, improved product discovery, and a smoother checkout experience, resulting in increased conversion rates and customer satisfaction. The design system enabled the team to scale the platform effortlessly while maintaining design consistency.
Key Outcomes:
Significant improvement in mobile user engagement, with a notable reduction in bounce rates and cart abandonment
Enhanced user experience, leading to an increase in conversions and repeat customers
A scalable design system that streamlined future updates and ensured a consistent visual identity
Conclusion This project exemplifies how a thoughtful, user-centered approach to e-commerce design can transform a skincare brand’s digital presence. By focusing on responsive design, optimizing user flows, and developing a robust design system, I helped deliver a highly engaging, visually appealing, and efficient platform that better served the needs of both the brand and its customers.
Like this project
0

Posted Oct 24, 2024

UX UI Design 5 days end-to-end project on Figma for Skincare product ecommerce fully responsive interface across desktop, tablet, and mobile, ready for devs.

Likes

0

Views

3

Tags

Web Designer

UX Designer

UI Designer

Figma

Framer

UX UI Mobile App Redesign and Migration to Framer
UX UI Mobile App Redesign and Migration to Framer
Branding & Web Design for Digital Design Agency Clients
Branding & Web Design for Digital Design Agency Clients
10-Day Product Design (UX UI) for a Startup Lauches
10-Day Product Design (UX UI) for a Startup Lauches
Redesigning a Global E-Commerce Platform
Redesigning a Global E-Commerce Platform