Meaning & Power

Product Design & Development Portfolio

Turbo Air Product Brand Sites

Turbo Air Website Development 2019/2020 Project: Turbo Air Inc. is a commercial refrigerator manufacturing company, and runs an e-commerce site per each product brand. Turbo Air Inc. has three product brand sites.

Overview of the Project

Project>

Turbo Air Product Brand Sites

Team & Role>

One person role as a researcher, UX / UI designer, project manager, tester, CMS management, and front-end update role (In-house design, and project management role working with a 3rd party developer group)

Objective>

The Main objective of the Product Brand sites is to promote the company’s marketing strategy and creating user-centered product presentation pages by re-designing the previous sites. Also, we consider these elements for the main objectives:

  • Superb branding
  • Online marketing strategies such as the SEO, Google Analytics
  • Efficient and independent in-house product content management
  • Customer’s user friendly, tech savvy, responsive web and mobile experiences
  • Active display of the lively and up-to-date contents
  • Speedy and interactive website
  • Bulk file uploading
  • Efficient admin setting

Technical Platform>

CMS(WordPress) based customization (CentOS7 Linux OS, Apache web server, PHP, MySQL)

Contribution>

  • Created approved quality of UX / UI design by the company, and developer agencies
  • Upgraded static and old style front-end design elements into the dynamic and modern version
  • Improved the previous CMS (Magento) version’s inefficient and static functions by designing customized CMS management features in WordPress to allow the in-house team’s independent and efficient CMS management.
  • Devoted as a project manager and UX designer by actively working with a 3rd party developer team and suggesting potential solutions for all the issues confronted as a problem solving role


Live Site Video Presentation for the Site 02


InvisionApp Prototype Video Presentation for the Site 04

Challenges (Old version site issues)
My challenge was to find the solutions for these specific needs based on the research:

Inefficiency of the previous CMS (Magento) features>

  • No feature to track the modified date of the product
  • Admin user cannot upload all file types
  • No option to upload bulk files
  • No block content options to apply to mass products
  • Tedious work to link each common accessory items to mass products
  • Incompatible HTML / visual editor modes
  • No menu, sub-menu extendability option

Static and old style front-end design elements

Confusing category tree classification

Static and outdated web subscriber list

Lack of responsive and interactive web & mobile user interface

Old Version Site Presentation

Site Structure

Content Hierarchy & Flow>



Page Outlines>



Site Map & Architecture>



Solution

Block-unit News & Events page>

Video Example – News & Events Block

Feature & Video block>

Feature & Video Block in a Product Page

Full Screen & Responsive Design >

Video Example – Full Screen & Responsive Design

Newly Released & Recently Viewed page>

Video Example – Newly Released & Recently Viewed Page

Two category trees (better way of product category classification & efficient way of category editable ability)>

Video Example – Two Category Trees & Breadcrumbs

Extendable menu, sub-menus>

Customized Page Template

Two way linking between accessory items & product>

Two Way Accessory & Product Linking

Associated Attachment feature (group associated file attachment display in a Documents section in a product detail page)>

Associated Attachment UX Logic

Product List ordering manipulation in WordPress>

Video Example – List Ordering Manipulation

Compare Product Feature>

Video Example – Compare Product Feature

Two editing modes: HTML / WYSWYG>

HTML/Visual Editor Mode

Enhanced Product Page>

Video Example – Enhanced Product Page

Interactive map & interactive menu bar>

Video Example – Interactive Map & Menu Bar

Bulk file uploading through CSV file import / export feature>

CSV File Import & Export Feature

Fast page loading and efficient way of product image conversion into the web format (Kraken app.)>

Kraken.IO Plug-In

Up-to-date Contact Form & Web Subscriber List management(iContact) in WordPress>

Web Form API

Enhanced Media Presentation>

Video Example – Enhanced Media Presentation

Product Management

Zoom, and Loom for the video recording & meeting>

Loom Video Demo

Google sheet to keep track of the development history>

Google Sheet task management

New Challenges & Lessons Learned
  • Project management while working with a remote developer group:
    Felt the limitation to work with a remote developer group instead of working with an in-house development team
  • Limitation of the customization in CMS:
    This limitation(fragile library reference structure, and costs more for the customization in CMS) led the company consider the pure framework level development in the future

Impact
Based on the feedbacks from different people group, they feel better this way:

To Company>

  • satisfied with modern, dynamic front-end page
  • easy to analyze and manage the customer’s data (Google Analytics)
  • enhanced SEO / SEM, re-direct management
  • new compare product feature
  • interactive and dynamic map presentation

To Customer>

  • dynamic up-to-date subscriber list
  • efficient product search
  • efficient category tree classification
  • better block-unit product feature presentations
  • better media, ads presentation
  • new compare product feature

To Admin user>

  • independent CMS management with all content editable ability in WordPress
  • efficient block-unit group content management
  • menu, sub-menu extendability
  • easy and efficient product list ordering
  • easy and efficient contact form and web subscriber list
  • internal domain structure of the subdirectory format

Next Post

Previous Post

© 2026 Meaning & Power

Theme by Anders Norén