E-Commerce Website
Figma - Prototyping - VS Code - GitHub - HTML - CSS - SQL databasing - JavaScript (client- and server-side)
Project Overview
I worked on a two-person team where we created a fully-functional clothing retail website with a seamless, intuitive user-centered experience that teaching assistants and peers in the class could navigate and use with ease.
We collaborated to design a work-back schedule, conduct field research of current e-commerce sites, wireframe, and create our API, construct the database, code back-end functionality, and front-end features of the website.
Details
Role: I was co-creator of the website which included working on half of all full stack programming and front-end design.
Type: Class Project (CSE 154, Web Development)
Duration: 3 months, UW Spring quarter 2023
Research
Programming
Marketplace Analysis
Since this course taught web development tools, I was introduced to both client-side and server-side JavaScript as well as SQL databasing. This course also furthered my knowledge on HTML and CSS which allowed more front-end design capabilities for this e-commerce website.
Before starting any designs or coding for our website, my project partner and I researched popular retail websites including Free People, Jo Malone, Depop, and Amazon. We decided on a neutral color scheme with simple user interactions to minimize confusion when navigating our website.
Design
Work-Back Schedule
Lo-Fi Prototyping
Back- and Front-End Functions
Work-Back Schedule
Since we were learning the tools alongside the actual programming of the website, my partner and I created a 3 month-long work-back schedule. This way, we could work on and complete portions of the website after learning the concepts and tools necessary to complete that portion to ensure we finished our project on time with a high level of quality.
Low-Fidelity Prototyping
We designed a low-fidelity prototype including all the front-end features necessary for our desired website functionality.
Back- & Front-End Functionality
After designing the prototype in Figma, my partner and I organized a spreadsheet of every feature and its expected functions. This further informed our work-back schedule timing and expectations for this project.
Final Product
The final product of this project was a fully-functional website peers in our class as well as Teaching Assistants could navigate and use with ease.
Let’s Connect!