I worked with the team at Little Thunder Co. to design and develop a mock e-commerce website for VISA UK sales representives to demonstrate their VISA Checkout payment gateway. I was in charge of the design and development of the e-commerce website hat would allow sales reps to easily and effectively demonstrate VISA Checkout at trade shows, meetings, conferences etc.

The Homepage

Via Monte Moda Home Page

The brief was to create a "luxury" e-commerce website with various products, login/signup, user account settings and a checkout flow. The design was up to us.

The Shop

Via Monte Moda Shop

Product Item

Via Monte Moda Product Item

Basket

Via Monte Moda Basket

Checkout Flow

Via Monte Checkout Flow

Development

Phase 1

Phase 1 of the development involved building out the website with Jekyll, a static site generator. This meant that there would be no backend for user signup, checkout or product items. Everything would be contained within the front-end with some local storage manipulation for storing user credentials etc.

This worked well for a couple of reasons:

  1. Super fast. The output was static HTML with no server calls. This meant performance was great which was an important requirement for sales reps who couldn't be reliant on fast or stable internet speeds.
  2. Easy to update. VISA's technical team would be required to update certain aspects of the website. With Jekyll, updating product items, prices etc would be as simple as updating a markdown file. No need for a CMS.

Phase 2

Phase 2 of the development cycle required more dynamacy for the build. Such as user signup/login, updating account/card details, user reviews etc. These were requirements that jekyll wouldn't be able to meet. In order to meet these new requirements, a new developer came on to the project to rebuild the website in VueJS, to allow for the new requirements. This lead to a fully functioning, backend driven E-commerce website.