A cleaner & greener future in High-tech industry.

As the major cleanroom solutions provider in the Asia-Pacific area, AAP is seeking a fresh image when the era of green coming.


1° Complete website development process including the information structure, GUI design, front-end design and back-end development.
2° Define a new style for a 30-year company.
3° Achieve the new visual & content design with the 3D animation, interactive chart and infograhic.


I made this project as a freelance designer and was responsible for all of design works except 3D Modeling and photography (made by the client).


The need of technological manufacture is changing from low cost to high efficiency. As the leader of Fan Filter Unit (FFU) in terms of efficiency, AAP Tech tries to leverage their high-efficiency products and outstanding R&D strengths to improve the sale. For the first step, they start from redesign their website. The major goals of the project are shown below:

New visual communication

A good visual design can help clients to understand the technical information, especially when new generation are entering the leadership. Therefore, improvement of visual impact is the priority of the project.

Responsive ready

To help sale team to introduce the company and products by using their tablet and phone, the website should be responsive in mobile environment.

Content organizing

AAP is a 30-year old company. There are large amount of information available but scattering. To provide better content, organizing content is necessary in the beginning

Content curating

To well organize content from different sources including magazine, model, statics, technical documents, interview and desk research were applied. As the result, the copywrite, chart and infographic were produced.


In order to help communicate with the client, the wireframe and treemap were used. Both of them complement each other and be discussed in the same time.

We separated the website into the company part and product part according to the findings of the discussion.

Solution: company part

To giving the professional and fresh impression to the visitors, the website of company part use the bright color scheme.

Furthermore, AAP has a skillful CAD team. We use the model made by the team and rendered the showreels of the product. By this, it make the mechanical products like FFU more tangible for client.

Solution: product part

The product part of the website starts from a stand-alone landing page. It use a dark color scheme to express a futuristic image. The infographic, chart and 3D animation are used to support and explain the mechanism and technical information of FFU.

Design & development environment

Since there are several kinds of tasks are done in the process, the software or frameworks used in the project can be categorized into design, front-end, environment and back-end. The softwares and frameworks with their purpose are listed below: