Dice Designer Week 3 Project Update
My name is Samuel Cohen and this is how I single-handedly designed, developed, and launched a website where you can customize a die and have it 3D printed in 30 days. Below is a project update post. If you wish to read more about the project, the landing page is here.
This is the third project update post for my month-long project. This week I focused on designing my website home page and optimizing the website for store functions.
What I Accomplished in Week 3
- Designed Website Home Page
- Added SSL Security to Website
- Created Fully Functional Checkout System
- Updated Designer Program to Include Add-to-Cart Function
- Created a Business Bank Account
- Designed Custom Icons for Website
- Week Update Edits
- Adobe Illustrator Blog Post and Video
- Blender Blog Post and Video
- Week 3 Update
In-Depth Details
Website Homepage Design
In the past two weeks, I focused mainly on my designer program and not on the home page. This week I finally started work on the home page where my designer program would run in WordPress. I used the theme included with Woocommerce called Neve. I took out many of the default sections as I hadn’t created content for them yet.
I chose to redesign the home page to include a large button that goes to the designer and a catchphrase that says “Design a die for every occasion”.
The WooCommerce setup post is here.
SSL Security
In order for a shop to function properly and to accept payments, a website is required to have something called an SSL certificate. The certificate encrypts user data so that their information cannot be stolen by third parties.
I was able to get my SSL certificate by applying through my web-hosting service. When you purchase a domain they often offer a free SSL certificate that you have to apply for in your website controls. The certificate is not added automatically, so you have to add it yourself.
Implementing the SSL certificate was quite easy as it was supported through my domain-hosting service.
Add-to-Cart
In the current version of the designer program, there wasn’t any option to add your customized die to cart. In order to create an add-to-cart button, I created a program in javascript that selected the current color and then added the SKU to the cart.
If you are interested in an in-depth look at the customizer program, read the post linked below.
The color customizer post is here.
Checkout System
For the shop to carry products I had to populate the shop with items and enable checkout. This is done by adding a bank account, prices, and necessary tax information.
This component works with the Add-to-Cart function so that customized products can be added to the cart.
If you are interested in an in-depth look at e-commerce, read the post linked below.
The WooCommerce setup post is here.
Custom Icons
I had been using free icons for the customizer in the past couple of weeks, so I wanted to create some of my own icons. I used Adobe Illustrator to make several, both for the website and designer program.
If you are interested in an in-depth look at my work in Adobe Illustrator, read the post linked below.
The Adobe Illustrator post is here.
Obstacles This Week
Transition From Insecure to Secure Website
Adding an SSL certificate to a site changes all links from http to https. This change means that all content that was previously linked to parts of the site no longer works.
Once I was able to update my file locations and change most of the asset references, the site functioned again.
SKU Challenges
When creating a product in WooCommerce, they are given a unique id. However, the id generated is random and cannot be changed.
This became an issue because I had to code in each color combination in the add-to-cart function. I had been assigning number values to colors. For example Black = 1 and White = 2. If a dice had a black base and white dots the total value would be 12.
I could not use this method with randomly generated ids, so I had to find a workaround. I was able to install a plugin that allowed an add-to-cart from a SKU instead of a product id. Once that was installed I was able to fix the problem.
Things I Learned
Technical
- Web-Design From Template
- SSL Security Certificate Implementation
- SKU Implementation in E-Commerce
- Icon Design in Adobe Illustrator
Business
- Homepage Design
- Implementing a Checkout System in E-Commerce
- Creating Easily Understandable UI
Summary
This week I was able to catch up on the work I had intended to finish in week 2. I designed much of the website content and ensured that it was fully functioning. I started to update certain aspects of the website to look cleaner and function better.
There are a couple of changes that I need to make before I am ready to launch. I have to make sure that the store functions perfectly, that I can be contacted, and some improvements to the home-page design so it doesn’t look terrible.
With week 3 finished, I am ready to move into week 4.
Check Out the Website at www.dicedesigner.com.
