Human Computer Interaction
Application Development & Report
Kora E-Commerce Ceramic Website
Team Members:
Mukkawar Sriya
Niyati Mittal
Mallepula Nishit Kumaar
ABSTRACT:
This Kora e-Commerce platform can be termed as an innovative digital
marketplace specifically for ceramics that will offer a seamless and personalized
shopping experience. The usage is at the frontend level via React and on the
backend through Express with TypeScript, blending artisanal skill and
sustainable practices given an approach to user-centered design. The HCI
principles managed navigational intuition along with increased accessibility
among high user engagement.
Key differences entail the focus on local artisans, customizable products, and
limited-edition collections. In contrast to mass-market platforms, Kora promotes
community and sustainability, ensuring ecological practices and ethical
commerce. Advanced technologies like efficient search mechanisms, responsive
layouts, and secure payment processing enhance functionality. Usability
evaluations and user feedback see the system's intuitive design and accessibility
to suit all abilities through interfaces such as easy navigation and increased
contrast. The aesthetic balance with functionality proves to be a challenge but is
overcome through HCI-inclusive designs that ensure inclusivity.
Kora stands out as a standard for ethical and user-focused eCommerce, fostering
innovation while enabling artisans. It connects traditional craftsmanship with
contemporary technology, thereby establishing a distinct shopping ecosystem.
INTRODUCTION:
The Kora e-commerce platform is an independent, online marketplace
connecting traditional craftsmanship with modern technological offers. Focus
on ceramics provides a smooth shopping experience to the consumer while
establishing a niche platform for local artists to showcase their artistic work
before international eyes.
Kora is differentiated by themes such as sustainability, personalization, and
accessibility. Besides being an e-commerce site, it encourages green activities
and a handpicked list of unique, high-potential, made-in-house limited-edition
items. Built strong on a technological base, with React driving the front end to
provide an engaging user experience, Express with TypeScript powering the
back end to ensure reliability and effectiveness.
The features of this platform are:
Artisan Marketplace: A place where the artistic community offers unique,
handmade ceramics.
Customization Options: Allowing customers to personalize products according
to their preferences.
Sustainable Practices: Source environmentally responsible materials and
endorse ethical manufacturing processes.
User-centered design: Features which enable easy navigation, powerful search
and filtering functions, and even a responsive layout that adjusts to various
devices.
Kora exemplifies how HCI principles can be applied, combining usability,
accessibility, and aesthetics to provide an inclusive experience for audiences
from different walks of life. This introduction forms the basis for looking into
the innovative strategy that this platform has in terms of ethical e-commerce,
community engagement, and empowerment of artisans.
PROBLEM STATEMENT:
The global e-commerce scene is characterized by a surge of mass market
platforms, which focus on achieving high-volume sales of standardized,
mass-produced products. Small-scale artisans, who are not visible or capable of
competing in such an environment, are thereby marginalized. Local ceramic
artisans specifically experience serious challenges in increasing their visibility
on the international market with the handcrafted products they make, which
subsequently limits their access to better economic opportunities.
Secondly, consumers today seek unique, tailored, and sustainable products that
are impossible to find on present platforms. Platforms fail to stress
customization, environmentally friendly practice, and exclusivity as main
features, which still leave space in the market for an ethical and artisan-centric
e-commerce option.
There is a technical reason, which includes having less intuitive user interface,
not so accessible to diverse users, and less integrated with HCI principles of the
majority of e-commerce platforms. In this way, multiple e-commerce platforms
bar user satisfaction, engagement, and conversion. This again emphasizes the
need for an artisan-consumer responsive platform.
This project is going to address these issues by developing the e-commerce web
application, Kora, exclusively targeting local ceramic artisans and conscious
consumers. Focusing on sustainability, personalization, and accessibility, Kora
bridges traditional craftsmanship and modern digital marketplaces, empowering
artisans and providing a seamless, user-friendly shopping experience.
METHODOLOGY:
The Kora E-Commerce Platform uses a holistic, iterative, and user-centric
design methodology which integrates the application of software development
best practices, Human-Computer Interaction principles, and continuous user
feedback to create a robust platform for local artisans and eco-conscious
consumers. The process begins with a detailed requirement analysis that entails
interviews with stakeholders, a competitor analysis, and a full documentation of
both functional and non-functional requirements. A contemporary technology
stack maintains the responsiveness and scalability of a platform by making use
of React for the frontend dynamicity, Express with TypeScript for securing and
scaling the backend, and MongoDB for efficient handling of the data. The
wireframes and high fidelity prototypes are designed using Figma and
developed through multiple feedback cycles to match the customers'
expectations.
HCI principles like usability, accessibility, and aesthetic appeal are deeply
integrated in the platform. Features such as optimized color contrasts, clear
fonts, keyboard navigation, and minimalist design enhance usability and reduce
cognitive load. Accessibility for diverse users takes the front seat and ensures
inclusivity. Advanced mechanisms such as filtering options and search tools
make the platform intuitive and efficient. Broad user testing with varied
participants identifies core functions such as browsing, customization, and
transactions while gathering all the valuable feedback available through
platforms like Usability-Hub to refine the user experience.
Performance optimization and security are integrated aspects of the platform's
design. Scalability tests account for different loads, while encryption and secure
payment gateways protect data. The sustainability of the platform is therefore
embedded in such partnerships with artisans, ethical sourcing, and eco-friendly
practices directed toward appealing environmentalists. Testing is followed by
deployment of the platform and monitoring of its post-launch performance with
tools like Google Analytics to track user behavior and identify areas for
improvement. The updates keep the platform competitive, adaptive to user
needs, and aligned to market trends. The outcome is a robust, sustainable, and
user-centric e-commerce platform that empowers artisans while meeting the
demands of modern, eco-conscious consumers.
APPLICATION DESCRIPTION:
Key Features:
1. Artisan-Focused Marketplace
● Kora provides a platform exclusively for local artisans to sell their
ceramic products. Unlike mass-market platforms, it prioritizes
visibility for small-scale creators, allowing them to establish
storefronts that highlight their craftsmanship and individuality.
2. Customization Options
● Customers can personalize their purchases, such as selecting colors,
patterns, or even custom inscriptions. This feature ensures that every
product can be tailored to the buyer’s preferences, offering a personal
touch to each transaction.
3. Exclusive and Limited Collection
● The platform collaborates with artisans to create unique,
limited-edition ceramic collections. These exclusive offerings cater to
customers who value one-of-a-kind designs, enhancing the sense of
exclusivity and authenticity.
4. Sustainable Practices
● Sustainability is at the core of Kora’s mission. The platform
emphasizes eco-friendly materials, ethical production practices, and
sustainable packaging, appealing to environmentally conscious
customers
5. Advanced Search and Filtering
● The website incorporates robust search and filtering capabilities,
allowing users to find products quickly based on criteria such as price,
style, color, or artisan. This feature enhances usability and ensures a
smooth shopping experience
6. Responsive and Accessible Design
● Built with responsiveness in mind, Kora’s interface adapts seamlessly
to various devices, including desktops, tablets, and smartphones.
Accessibility features, such as optimized contrast ratios, keyboard
navigation, and screen reader compatibility, ensure the platform is
inclusive for users with diverse needs.
7. Secure Payment Gateway
● The platform integrates secure payment systems, ensuring that
transactions are encrypted and customer data is protected. This builds
trust and reliability for users shopping on the site
Technology Stack
1. Frontend:
● React: A dynamic and interactive framework for creating a
user-friendly interface.
● Responsive layouts ensure that the platform performs seamlessly
across devices.
2. Backend:
● Express with TypeScript: A scalable and secure server-side
framework that ensures efficient handling of user data and
transactions.
3. Database:
● MongoDB: Used to manage product catalogs, user accounts, and
artisan information. Its scalability and flexibility make it ideal for
handling a variety of data types.
Core Pages and Functionalities
1. Home Page:
● Features curated collections, artisan highlights, and promotional
banners.
● A call-to-action section guides users to explore the marketplace or
customize products.
2. Shop Page:
● Displays all available products with options to filter and sort based on
price, style, or artisan.
● Interactive product previews provide users with detailed descriptions,
images, and customization options.
3. About Page:
● Highlights Kora’s mission, sustainability efforts, and commitment to
empowering local artisans.
● Provides insight into the stories of the artisans and the origins of their
creations.
4. Contact Page:
● Allows users to reach out for inquiries, support, or custom order
requests through a simple contact form.
● Includes FAQ sections to address common questions.
5. Product Page
● Detailed Display: High-resolution images and detailed descriptions
aid informed decisions.
● Interactive Features: Customization options and artisan details
enhance user engagement.
6. Cart Page
● Simplified Review: Displays product summaries with images,
quantities, and prices for easy review and updates.
● Interactive Design: Includes options like "Update Quantity" and
"Remove Item" for user control.
7. Checkout Page
● Streamlined Steps: Organized process for entering shipping,
payment, and confirming orders with validation prompts.
● Secure Transactions: Uses encryption and secure payment gateways
for user safety.
Human-Computer Interaction (HCI) Integration
Kora has been designed with HCI principles to ensure that every interaction is
seamless, intuitive, and satisfying. Features like clear navigation paths,
minimalist design, and responsive layouts reduce cognitive load and make the
platform easy to use. Accessibility considerations, such as ensuring keyboard
navigation and compliance with Web Content Accessibility Guidelines
(WCAG), make the platform inclusive
User Experience Enhancements
1. Intuitive Navigation:
● Simplified menus and clear categorization of products ensure users
can easily find what they are looking for.
2. Visual Aesthetics:
● A clean and modern design keeps users focused on products without
overwhelming them with unnecessary elements.
3. Feedback Mechanisms:
● Users receive immediate visual or auditory feedback for interactions
like adding items to the cart or completing a purchase.
TECHNICAL ASPECTS
The Kora E-Commerce Platform is built on a robust, modern tech stack to
ensure scalability, security, and a seamless user experience. The platform
integrates various technologies and frameworks for the frontend, backend,
database, and security layers. Below is a detailed breakdown of its technical
components:
1. Frontend Development
a) Framework: React
● A popular JavaScript library used for building user interfaces.
● Enables dynamic rendering, ensuring a highly interactive and
smooth user experience.
● Supports the development of reusable components, reducing
development time and ensuring consistency across pages.
b) Responsive Design:
● The website is designed to be fully responsive, adapting seamlessly
to devices of all screen sizes (desktop, tablet, and mobile).
● Media queries and flexible grid layouts are used to provide an
optimal user experience regardless of the device.
c) Styling Tools:
● CSS Modules or Styled Components for maintaining scoped,
modular styling.
● Preprocessors like SASS for managing complex styles and reusable
variables.
d) Client-Side Functionalities:
● Search and filtering features for ease of navigation.
● Dynamic product previews that allow users to view details without
navigating away from the product list.
2. Backend Development
a) Framework: Express with TypeScript
● Express is a lightweight and efficient Node.js framework that
handles server-side logic.
● TypeScript enhances code maintainability by introducing static
typing, reducing runtime errors, and improving developer
productivity.
b) API Architecture:
● RESTful APIs for managing all communications between the
frontend and backend.
● Endpoints handle CRUD operations for users, products, orders, and
payments.
● Middleware for logging, request validation, and error handling.
c) Authentication and Authorization:
● JWT (JSON Web Tokens) for secure user authentication and
session management.
● Role-based access control (RBAC) ensures that admin and artisan
functionalities are protected and accessible only to authorized users.
3. Database
a) Database System: MongoDB
● A NoSQL database chosen for its flexibility and scalability,
allowing the storage of diverse and dynamic data.
● Used to manage:
▪ Product catalogs (including details, images, and
customization options).
▪ Artisan profiles and storefront information.
▪ Customer data, including order history and preferences.
b) Database Design:
● Collections are optimized with indexes for faster querying of
products and user data.
● Relational-like data modeling is achieved using MongoDB’s
references and embedded documents.
4. Payment Processing
a) Payment Gateway Integration:
● Secure and reliable gateways such as Stripe or PayPal are used for
handling transactions.
● Supports multiple payment methods, including credit/debit cards
and digital wallets.
b) Security Measures:
● End-to-end encryption for sensitive payment data.
● PCI DSS compliance to ensure secure payment processing and user
trust.
5. Security
a) Data Protection:
● SSL/TLS encryption for secure communication between the client
and the server.
● Data hashing techniques, such as bcrypt, for securely storing user
credentials.
b) Preventing Common Vulnerabilities:
● Protection against Cross-Site Scripting (XSS) and SQL Injection
through input validation and sanitization.
● Implementation of Content Security Policies (CSP) to prevent
unauthorized script execution.
c) Session Security:
● Time-limited tokens and automatic logout after inactivity to prevent
session hijacking.
6. Performance Optimization
a) Frontend Optimization:
● Code splitting and lazy loading of components to reduce initial page
load time.
● Image optimization using modern formats like WebP and lazy
loading of media assets.
b) Backend Optimization:
● Caching strategies using tools like Redis to reduce the load on the
database for frequently accessed data.
● Load balancing across multiple server instances to ensure high
availability.
c) Database Optimization:
● Indexing frequently queried fields to enhance read operations.
● Regular database performance monitoring and optimization
strategies.
7. Accessibility Features
a) Compliance Standards:
● WCAG (Web Content Accessibility Guidelines)
● Ensures that the website is usable by individuals with disabilities.
b) Key Features:
● ARIA (Accessible Rich Internet Applications) roles for interactive
elements.
● Keyboard navigation for all functionalities.
● Adequate color contrast and scalable font sizes for visually
impaired users.
8. Deployment and Hosting
a) Hosting Platform:
● Services like AWS (Amazon Web Services), Google Cloud
Platform, or Heroku for scalable and reliable hosting.
b) Containerization:
● Docker containers are used for consistent and efficient deployment
across environments.
c) CDN (Content Delivery Network):
● Integrates with CDNs like Cloudflare to ensure faster content
delivery and reduced latency globally.
9. Analytics and Monitoring
a) Tools Used:
● Google Analytics for tracking user behavior and identifying
bottlenecks in user flows.
● Hotjar for heatmaps and user interaction insights.
b) Server Monitoring:
● Tools like New Relic or Datadog for real-time performance
monitoring of backend services.
c) Error Logging and Debugging:
● Centralized logging systems, such as Logstash or Winston, to
capture and resolve errors efficiently.
10. Scalability
a) Horizontal Scaling:
● Additional server instances can be spun up as traffic increases.
b) Microservices Architecture:
● Considered for future updates to decouple services like product
management, payments, and user authentication.
CHALLENGES:
Filtering and Navigation Complexity:
Although the platform has very robust search and filtering capabilities, users
were sometimes frustrated in locating products, as there were few filters
available. Adding these requires further development and testing to ensure that
usability and performance are not compromised.
Artisan Onboarding:
Onboarding and managing their storefronts by artisans, most of whom may not
have much technical expertise, was a huge challenge. There is a need for
additional training resources or guided walkthroughs to make it easier.
Balancing Sustainability with Cost:
While sustainability forms a core value proposition, use of eco-friendly
practices in sourcing and packaging can actually translate into higher costs for
artisans or customers. There is still a need to balance sustainability against cost.
High Development Overhead:
Creating a fully featured advanced product involving personalization, secure
payment systems, and accessibility compliance required considerable time and
resources. Scaling these features for future growth will require investments.
Security Measures:
Implementing robust security mechanisms to prevent breaches, such as
encryption, tokenized authentication, and secure payment processing, required
extensive testing and fine-tuning.
LIMITATIONS
Niche Focus:
The specialized platform, focusing on ceramics and local artisans, cannot
compete with open e-commerce platforms in terms of target group reach.
The niche focus is both the stronghold and the limitation: Less room to scale
and diversify.
Limited Customization Scope:
Although customization is one of the features, the customization currently
available only includes basic options. More complex personalization features
would lead to more complexity and would need substantial backend
enhancement.
Accessibility Gaps:
Though the platform adheres to WCAG 2.1 standards, optimum alt text for
images and screen reader refinement minor issues, which need to be addressed
to ensure full accessibility.
Artisan-Centric Marketplace Dependency:
Success of the platform relies on artisan participation because the platform
needs sustained inflow of high-quality products and artisan engagement can be a
limitation if managed actively.
Scaling Challenges:
While initial performance tests were successful, scaling to support orders of
magnitude higher traffic or expanding to include other categories of products
may require major reengineering of the platform.
CONCLUSION
The Kora E-Commerce Platform brings together traditional craftsmanship and
modern technology in a comprehensive marketplace for local ceramic artisans
while giving customers an easy, personalized, and sustainable shopping
experience. By integrating advanced technology, usability features, and HCI
principles, Kora takes pride in having an inclusive, intuitive, and efficient
platform for both artists and consumers.
The focus on sustainability, exclusive collections, and customization options
have been extremely well-received by users and artisans alike on the platform.
In terms of performance metrics - fast loading, secure payment processing, and
scalability - the platform has been proven technically robust and is compliant
with access standards that ensure it caters to a variety of users. To address
artisan participation and customer feedback, Kora provides a unique alternative
in the e-commerce space and emphasizes ethics.
Despite its success, much remains to be done in order to expand filtering
options, enhance accessibility, and balance sustainability with affordability. It is
in these areas where limitations exist that Kora can build up the leadership
position of artisanal e-commerce, support local creators, and respond to the
growing demand for eco-conscious, personalized experiences. With its
innovative approach and commitment to ethical commerce, Kora will lead the
transformation of e-commerce for handcrafted ceramics in the future.
