Building a Comprehensive Ecommerce Platform

Overview

When I began this project on my own, my main goals were to learn and become proficient in a new set of technologies. At the same time, I wanted to tackle important issues that customers commonly face when using ecommerce websites.

Role

In this project, I took on the roles of both designer and developer. My main responsibilities included:

• Conducting UX research.
• Designing UIs.
• Researching and planning the technology stack.
• Developing the project.

Pain Points

Based on research and what I've learned firsthand, I tackled these common problems:

• Poor Website Design 🎨 Users get frustrated with cluttered layouts, confusing menus, slow loading times, and inconsistent branding, hindering their navigation and shopping experience.
• Difficulty Finding Specific Items 🔎 Customers struggle to locate specific products due to limitations in the search function that don't accommodate variations in product attributes like name, size, or color.
• Complex Checkout Process 😕 Lengthy or confusing checkout procedures lead to abandoned carts. Customers prefer a smooth, straightforward checkout with minimal steps.
• Limited Payment Options 💳 Offering only a few payment methods can deter customers who prefer alternative options.
• Lack of Product Information 📄 Detailed descriptions, images, and reviews are vital for customers to make informed purchasing decisions.
• Administrative Hassles 👤 Managing orders, products, and customers becomes overwhelming without efficient tools and processes. This includes challenges in updating listings, managing inventory, processing orders, and handling customer inquiries or complaints.

Design Process.

Here's how I made the design look great:

Inspiration

I got ideas for my designs from browsing through Dribbble and Pinterest. Additionally, I checked out different user interfaces on Mobbin to improve the overall user experience and integrate effective design styles.

Sitemap

I created a sitemap to give a clear picture of how the website is organized, showing all the pages and how they connect with each other. It acts as a guide for designing and navigating the website.

Click to see details.

Creating a Style Guide

• Colors
• Typography
• Spacing and Grid
• Iconography
• Shadows & Blurs

Development.

Here's the tech I used and the problems I solved while developing:

Technology Stack

• Frontend: Next.js
• Admin Panel: React
• Backend: Node.js with Express
• Database: PostgreSQL
• Query Language: GraphQL
• Authentication: Passport.js
• Payment: Stripe

Improving Product Discovery: Making it Easier to Find What You Want

To address the challenge of finding specific products, I implemented an efficient search function featuring live search, category filtering, and options for color, size, and price. Additionally, I integrated sorting and pagination functionalities to streamline the product discovery process.

Improved Payment Options and Simplified Checkout

To offer more ways to pay, I added Stripe, which lets users use different credit cards.

For testing, you can use this test card number: 4242 4242 4242 4242.

Also, I made checkout easier by asking for just an email and name at first for account setup. Users can add passwords later. This reduces hassle and makes buying smoother.

Solving Admin Headaches:

I made a powerful admin panel to make important tasks easier, like:

• Adding and changing products
• Managing order status
• Checking sales and orders
• Handling customer info
• Looking after product reviews
• Customizing site settings
• Dealing with newsletters and contact forms

Conclusion

In summary, this project has greatly improved the online shopping journey. By making checkout simpler with Stripe integration and offering a detailed admin panel, I've enhanced usability for both customers and administrators. Moving forward, I'm committed to ongoing enhancements, and I value feedback to make the platform even better.