Art E-Commerce Bidding Website

An art eCommerce website for an art gallery that allows users to browse and bid on featured artwork online. The site includes an About Us page, testimonial section, and contact form to build trust and engage visitors. Built with a SQL backend for data management and a frontend using HTML, CSS, and JavaScript, supported by Figma and Canva for wireframes, UI design, and prototypes.

Role

UI/UX Designer, Front-End
& Back-End Developer

Project Type

Self-Initiated

Timeline

1 month

Tools/Programming Languages

Canva, Figma, XAMPP, SQL, PHP, HTML, CSS, JavaScript,

Methods

Usability Testing,
Interviews

1. Planning & Requirement Analysis

Focus: Define project scope, goals and resource planning.

Project Scope

Create an an art ecommerce website that streamlines the company website experience, making bidding more efficient.

Goals

Display available artwork listings with starting price, artist, and stock
Enable initial bidding
Art gallery info (about, testimonials, contact)
Application for art exhibition

Resource Planning

SQL Database
HTML, CSS, JavaScript

2. Defining requirements

Focus: Review & approval of functional and technical requirements

Functional Requirements

Art Catalog
Bidding Request System

Technical Requirements

Design primarily for desktop
SQL Schema

3. Design

Focus: Translate research requirements insights into visual solutions through wireframes, mockups and prototypes.

Wireframes + Mockups

Created low-fidelity wireframes for layout exploration
Focused on clarity, readability, and hierarchy
Ensured easy access to key features (Home, Testimonials)

Low Fridelity Mockup

Prototyping

Developed high-fidelity mockups with branding elements
Applied color scheme and typography aligned with art gallery identity
Iterated designs to balance aesthetics and usability

High Fidelity Prototype

4. Development

Focus: Build website

Front-End

HTML, CSS, JavaScript for front-end and design components

Back-End

PHP used to connect to databases in localhost
SQL for stuctured database
XAMPP to create local server environment

Local Host through XAMPP

5. Testing

Focus: Test website based based on necessary adjustments and core features.

System Testing

Core features such as menu, bidding cta buttons and confirmation page work

Manual Testing

Updated bids and listings

6. Deployment & Maintenance

Focus: Deploy front-end and back-end, while maintaining and correcting any issues.

Deployment

Deploy frontend (Netlify) & backend (Heroku)

Maintenance

Bug fixes to be evaluated
Improve UI typography and resolution of images

Final Webshot Tour