OC Service

OCS Automotive Engineering - Custom E-Commerce Website Redesign

Overview:
OCS Automotive Engineering approached me with several key issues they were facing with their old website:

• Updating products was cumbersome and done through a spreadsheet.
• The site was outdated and lacked flexibility in terms of editing and adding new sections.
• They wanted to expand their product range and integrate e-commerce capabilities directly on the site.

In response to these challenges, I developed a custom e-commerce website that seamlessly integrated WebFlow, Foxy.io, and Stripe for enhanced functionality. Along with the redesign, I created a more intuitive user experience and streamlined the process for them to easily manage and sell products.

Phase 1: Planning & Wireframing

The project began with a collaborative wireframing phase. I worked closely with Nathan and the OCS team to determine the key content, sections, and structure of the new site. This included:

• Defining main pages for each service (e.g., Cylinder Head Services, Crankshaft Services, etc.)
• Organising product categories and ensuring smooth integration with e-commerce features.
• Mapping out user flow to ensure an intuitive experience from landing page to checkout.

Once the wireframe was signed off by the client, it served as the foundation for the design and development phase.

Phase 2: Design & Development

After the wireframe was approved, I moved into the design and development phase. This included:

• Design Overhaul: A fresh, modern design was implemented that aligned with the high-performance ethos of OCS Automotive Engineering. The design was tailored to showcase their premium automotive products.
• E-Commerce Integration: Integrated WebFlow for site management, Foxy.io for e-commerce functionality, and Stripe for secure payment processing. This setup allowed OCS to easily add and sell products directly through the site.
• Dedicated Service Pages: Each of OCS’s services received a dedicated page with detailed information, making it easier for customers to explore what the company offers.

Phase 3: Staging & Review

Once the site was built, I shared a staging URL with the OCS team to review the design and functionality. This allowed us to make adjustments in real-time, ensuring everything was up to standard before going live.

• Client Feedback: Nathan provided valuable feedback throughout the process, ensuring the site met their vision. Minor adjustments were made to content, layout, and navigation based on their input.

Phase 4: Final Testing & Launch

After receiving approval from OCS, I proceeded with final testing:

• Testing Across Devices: Ensured the site was responsive and performed well across various screen sizes and devices.
• E-Commerce Testing: Verified the product purchase flow, including payment processing through Stripe.
• SEO Optimization: Implemented SEO best practices to improve site visibility.

The site was then set live, and OCS was ready to start selling their products directly online.

Phase 5: Training & Handover

To ensure that OCS could easily manage the site on their own, I created a series of tutorial videos. These videos covered everything from updating products to editing content and managing orders.

Nathan’s feedback on this:
"Videos are great though, even I can do that." – Nathan

Project Timeline

• Nov 2024 – Project kickoff and initial wireframing.
• Dec 2024 – Break during holiday season.
• Jan 2025 – Mar 2025 – Design, development, staging, and client feedback iterations.
• Mar 2025 – Final testing, training, and website launch.