☰

Questions? Shoot me an email!

Web Development / UIUX

Oh, Cards

ROLE

Front-end Development, Back-end Development, UX, UI

OVERVIEW

Oh, Cards is a fully responsive e-commerce website that aims to sell the illustrations and photography work of Angela Chu. Coded with html, css, javascript, php, JSON and MySQL, it is a fully functional and dynamic prototype of a store website.

Background

Angela Chu is a designer, creative thinker and maker. She creates humorous greeting cards and enjoys travel photography. This website is dedicated to selling and promoting Angela’s work through a fun and engaging way.

The goal of this website had to meet the following objectives:

A store site prototype
Fully responsive design
Database driven by MySQL
Functional features i.e. sorting, price calculations
All images are original content

Sitemap

Low Fidelity Wireframes

High Fidelity Wireframes

Branding

FINAL DESIGN

Dynamic Intro

A full-screen splash screen animation that takes the users into the world of Angela's. After entering, users are then taken to the home page where they can see the latest updates on the site.

Powerful filters

On the product list page, users are able to filter through all the cards simply by its type, price and names.

Quick Checkout

The checkout page is a fully dynamic and users can be able to edit, delete and change quantity of the products in cart. They can also get a real-time estimated calculation of the total price plus tax and shipping.

Home

Product Detail

Product List

Contact

About

Cart

Conclusion

The biggest challenge for me was definitely the back-end aspect - utilizing php, JSON and MySQL to create a database. It was the first time that I've ever done something like this so I had to spend a lot of time troubleshooting. Through the process I learned how to prioritize functions and how to more efficiently organize my code.