Hirobel Cycling Solutions

Hirobel Cycling Solutions hired me to design and build an e-commerce website. Their must haves included: responsive website that performed well on all well-known devices, reliability and uptime especially under heavy traffic, real time shipping charges for customer, security and support for all popular payment methods, and better control over CMS and backend services than what their current Wordpress and basic web hosting solution offered.

The Landing Page

The Challenge: Design and build a responsive easy to navigate e-commerce site for a revolutionary new bicycle tool.

The client was unhappy with their original site based on Wordpress. They were tired of having to update and/or install multiple plug-ins to maintain their site. They wanted a site that looked and functioned well on all devices, and allowed visitors to easily navigate, explore, and purchase their frame clamp.

The client was also in need of the project to complete and launch quickly.

Previous Slide◀︎ Next Slide▶︎
• 
• 
• 
• 
• 

The Solution: Build a custom front end solution, add a solid CMS that allows for excellent implementation of html/css/js, couple everything with a very secure — easy to update — client side e-commerce solution.

First and foremost: tackle the client's desire to have the project completed and launched quickly.

I choose to plan and execute all projects with a good amount of research. Since the end result has to be executed properly without rushing or delivering an unstable environment, I offered the client a good temporary solution: Squarespace.

I created a simple responsive Squarespace site utilizing their built-in e-commerce solution. This removed the pressure from the client to have a better site than they currently had, and allowed more breathing room for my research and development work.

I moved all of the clients domain names to a registrar that was a better fit for the goal of the project, made sure all mx records were pointed properly for their email services, and temporarily utilized Squarespace's own hosting services.

I spent little time in Sketch for this project, and did most of the design in the browser while building a functioning group of webpages.

Most of the copy was created when putting together the temporary Squarespace site. This was slightly edited for transfer to the official site.

All html, css, and javascript is partially custom, partially Zurb Foundation, and partially influenced by open source MIT licensed projects.

The CMS used is Runway by PerchCMS. This nice CMS is fully modular and allows for complete control of the front-end framework. By following the PerchCMS documentation, simple PHP brings both a fully custom CMS and front-end framework together in an easy to update and control environment without having to worry about a multitude of 3rd party plug-ins.

The sky is the limit with this type of project. The client can opt to add more functionally in the future, or bring on other developers without having to decipher through the typical cruft associated with the template structure commonly used with other CMS solutions.

At the time of launch, PerchCMS launched their own e-commerce solution, but FoxyCart was a better choice for the project and the client's needs. FoxyCart was easy to implement and offered excellent support for the needs of the project.

The Back-end

The Challenge: Build a rock solid site that loads quickly for all users with constant uptime and high stability.

The Solution: Choose Digital Ocean for complete control of servers.
Use Amazon servers for CDN (hosting images and documents).

I created a Ubuntu server droplet with Apache and took all necessary security precautions. I then added SSL certificates for all client domains via the excellent Let's Encrypt, initiated all necessary task automation to update certificates and server droplet, and uploaded all site assets to AWS.

At the time of the project's release, Digital Ocean introduced the option for adding additional blocks that could store all assets for reference and hosting. After testing ease of implementation of both Amazon and Digital Ocean for content delivery, I settled on Amazon Web Services to reference and host (CDN) all images and documents. The decision was based primarily on the ease of use in the long term for the client.

By the time the project was complete and ready to launch, a lot of research had been performed. The client's other needs such as: shipping services, real-time shipping charges to customer before checkout, international e-commerce and shipping services, e-commerce dashboard with data transfer to QuickBooks, and temporary web site creation, maintenance, and removal had all been realized successfully.