Case Study on FoamFlex: Custom Foam Ordering Solution

Foam Toronto Inc., a company specializing in custom-cut foam and mattresses, aimed to establish an online presence and streamline the ordering process for both customers and in-house production. The project’s primary objective was to enable customers to easily input custom dimensions, calculate final prices based on their specifications, and securely store all data in a database. This initiative sought to simplify cost calculations, reduce manual errors, and fully digitize the ordering system.

Design Team

Me and Design team

My Deliverables:

Problem Finding, Redesign Planning, Wireframes, UI Design, Testing report

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

IDENTIFYING THE PROBLEM​

The journey of FoamFlex began with the recognition of key requirements:

Key Requirements:

The decision to undertake a redesign strategy was driven by extensive user feedback. Users had consistently reported pain points related to the application’s complexity, inconsistent interface, and difficulty navigating tax-related categories and forms.

Easily order custom foam products

The system must provide an intuitive and user-friendly interface for customers to order custom foam products directly from the website. Customers should be able to select product types, input custom dimensions, and choose additional options like firmness or shape. The process should be seamless, guiding users step-by-step to ensure a smooth ordering experience.

Digitize ordering and billing system

The project requires a fully digitized ordering and billing system that integrates with the company’s backend operations. This includes automating order processing, invoicing, and payment collection. The system should simplify order management for staff, enabling them to track orders, update statuses, and record sales efficiently in a centralized database.

Accurately calculate prices based on custom dimensions

The platform must incorporate a robust pricing engine that calculates the cost of foam products based on customer inputs, such as dimensions, foam type, and additional features. The pricing calculations should be precise, reflecting any variations in material costs or customizations. This ensures customers receive accurate pricing information before finalizing their orders.

Store all customer orders in a secure database.

A secure database is essential for storing all customer orders, including detailed specifications, custom dimensions, and pricing information. The database should be designed with strong encryption and access controls to protect sensitive customer data. This allows for easy retrieval and management of orders while ensuring compliance with data security standards.

Evolving User Expectations:

Foam Toronto Inc. anticipated that the project would bring transformative changes to their business by modernizing the ordering and billing processes. They expected the digital solution to drive growth, efficiency, and customer satisfaction.

Increased Sales through Online Presence:

The client expected the project to boost sales by creating a strong online presence, making it easier for customers to discover and order custom foam products. They anticipated that a user-friendly website would attract more online customers, leading to higher sales volumes.

Time Savings for In-House Staff:

By digitizing the ordering and billing system, the client aimed to reduce the time office staff spent on manual calculations and order processing. This time savings would allow staff to focus on other important tasks, improving overall productivity.

Improved Accuracy in Billing and Order Management:

The client sought to minimize manual errors through an automated system that would ensure precise calculations and accurate billing. They expected this improvement to enhance customer satisfaction by providing reliable and error-free service.

Enhanced Online and Offline Visibility:

Foam Toronto Inc. expected the project to not only increase their online visibility but also attract more walk-in traffic to their physical store. The improved online presence was seen as a way to expand their customer base and drive more business both online and offline.

A DEEP DIVE INTO RESEARCH

Understanding Development and Implementation Process

  • They embarked on a comprehensive research journey, engaging users through surveys, interviews, and usability tests. These efforts provided invaluable insights into user pain points and preferences.
  • CloudTax continued; they also studied competing tax preparation applications to learn best practices and identify opportunities for differentiation. This research-driven approach informed their redesign.

Information has been altered due to the presence of confidential data and adherence to NDA agreements.”

Design Phase

Pages, posts, and product pages were designed to meet client expectations.

Design Approval

The client reviewed and approved the design before development commenced.

Backend Development

Complex logic was implemented to handle custom shape calculations and integrate with the existing WooCommerce system.

Client Review
An initial review was conducted to gather feedback and make necessary adjustments.
Testing

Rigorous testing was performed to identify and fix any bugs.

Production Deployment

The final solution was deployed to the client’s live environment.

Technologies and Tools Used

WordPress

WordPress was chosen as the content management system (CMS) due to its flexibility, ease of use, and wide range of plugins. It served as the foundation for building and managing the website, allowing the client to update content, manage pages, and control site settings efficiently.

WooCommerce

WooCommerce, a powerful eCommerce plugin for WordPress, was used to handle the online sales process and manage the catalog of custom foam products. It provided the necessary tools for setting up products, managing inventory, processing payments, and tracking orders.

Elementor

Elementor, a popular drag-and-drop page builder for WordPress, was utilized to design and customize the website’s pages. It allowed for the creation of visually appealing and responsive web pages that aligned with the client’s vision without the need for extensive coding.

Customize Emails

Customers who are filing taxes for the first time and are looking for a user-friendly and efficient tax-filing experience.

Custom Plugin

To meet the specific needs of Foam Toronto Inc., a custom plugin was developed to handle the complex calculations required for pricing custom-cut foam products. This plugin enabled precise price calculations based on various customer inputs, ensuring accuracy and reliability.

Custom Theme

The website’s theme was customized to match Foam Toronto Inc.’s branding and design preferences. This ensured that the site reflected the company’s identity, providing a cohesive and professional look that resonated with their target audience.

Elementor Logo

THE DESIGN BLUEPRINT

The design strategy encompassed structural changes, visual enhancements, and improved accessibility:

Architecting Information:

The decision to undertake a redesign strategy was driven by extensive user feedback. Users had consistently reported pain points related to the application’s complexity, inconsistent interface, and difficulty navigating tax-related categories and forms.

THE ITERATIVE JOURNEY

The Power of Feedback and Accessibility

In addition to aesthetics, Cloud Tax prioritized accessibility for all users, including those with disabilities. They bolstered security measures to safeguard sensitive data, ensuring users’ trust and peace of mind.

Note: We may not fully comply with accessibility guidelines, but we make an effort. We have conducted tests such as colorblindness, contrast ratio and readable typeface.

Primary
Dark Gunmetal

#302410
RGB: 26, 28,

Primary
Dark Gunmetal

#302410
RGB: 26, 28,

Primary
Dark Gunmetal

#302410
RGB: 26, 28,

Primary
Dark Gunmetal

#302410
RGB: 26, 28,

THE IMPACT AND RESULTS

The Cloud Tax redesign brought about tangible results

Increased Sales:

The new online ordering system led to a noticeable boost in sales by attracting more customers and simplifying the purchase process.

Time Savings:

Significant reductions in time spent on manual calculations and order processing improved overall staff productivity.

Improved Accuracy:

The digital system minimized manual errors, resulting in more accurate billing and enhanced customer satisfaction.

Enhanced Online Presence:

The project improved Foam Toronto Inc.’s online visibility, leading to increased customer engagement and more walk-in traffic to their physical store.

CONCLUSION

In conclusion, Cloud Tax's transformation journey is a testament to the power of user-centered design, clear objectives, and a commitment to continuous improvement.

FoamFlex exemplifies the successful application of modern technology to address business challenges. By focusing on user-centered design and integrating effective tools, the project achieved its goals of enhancing customer experience, increasing operational efficiency, and driving business growth.

Thank you for taking the time
to read this case study

Your feedback is highly appreciated.