UX Web Design

For RaptorNails & fasteners

UX Design on the desktop website

Project 02 -
Desktop new web design for Raptornails and Fasteners

Raptor Plastic Composite Fasteners, a leading manufacturer of innovative plastic composite fastening solutions, is looking for a new website design with better usability and user experience. Customer feedback and data analytics reveal that majority of older website users are using desktop to access the Raptor webiste, while they also manifest several pain points, including difficulty in finding products, inadequate visual appeal, and a lack of visual guidance during the product selection process. These issues are leading to a decrease in online awareness, customer frustration, and missed opportunities for upselling.   To address these challenges and enhance the overall user experience on the new website, the following solutions were implemented:

Enhanced Product Discovery:

    • Problem: Users were struggling to find the right plastic composite fasteners due to a lack of intuitive navigation and search options.
    • Solution: Revamp the website’s navigation bar to provide clear categories and subcategories to be more user intuitive browsing experiences.

Homepage Enhanced visualization:

    • Problem: Users were struggling to find the intriguing place to land their eyes on the old website.  All the visuals and information are overwhelming and cluttered without a clear visual hierarchy.  
    • Solution: Revamp the homepage experience by seamlessly integrating a captivating video background that serves as a brief introduction to our premier product line and product features.  Through the use of a dynamic video backdrop, we intend to create an instant and lasting connection with visitors, effectively communicating the essence and benefits of our products.

Comprehensive Product image display and Information:

    • Problem: Users were struggling to find the intriguing place to land their eyes on the old website.  All the visuals and information are overwhelming and cluttered without a clear visual hierarchy.  
    • Solution: Redesign product pages to include detailed specifications, material properties, toggle effect to reveal the information with viewer’s discretion for each specific product, and fasteners/tools compatibility information. When users click on “Shop Now” button, it leads users to the ecommerce page for each product.

Visual Application Examples:

    • Problem: Users struggled to visualize how the plastic composite fasteners could be applied in different scenarios.
    • Solution: Create applications dropdown menu on navigation bar and Youtube mouse-click thumbnails of real-world application examples on each application page where the fasteners have been successfully used. Include images and videos showcasing the fasteners in action.

The Finished Product

Here is the actual sample of UX prototype in desktop versions that’s created by Adobe XD.
Click the thumbnails below to access them:

Desktop version