UI / UX / Web Design

Product Detail Page Module Order
Module orders in different breakpoints shown in Axure
Product Detail Page Wireframe
High-fidelity wireframes in Axure
Product Detail Page on Devices
Responsive Product Detail Page in desktop and mobile devices
Product Detail Page Before
Old Product Detail Page

Mouser Product Detail Page

Company
Mouser Electronics
Project Objective
The goal of this project is to refactor the user interface and user experience (UI/UX) and turn the Product Detail Page layout to be responsive with Bootstrap framework.
Problem Solving
  • The new Product Detail Page is modernized with Bootstrap Panels. This Panel Accordions approach brings a good user experience to our customers. Each section is contained within a panel module with a panel heading. Customers can easily find the part number and stock availability when they first land on the product detail page in different breakpoints and desktop and mobile devices. Also, the panel module design allows each module stacking easily in XS/SM breakpoint.
  • Buy Input group, Checkbox button group, varieties of tables, new breadcrumbs are also introduced in new PDP. The input groups with showing dynamic pricing based on the entered quantities definitely look prominent to the users.
  • Documents are cleaned up and reorganized in a table format and classified by document types. Each document will show a file format so that users will know what to expect before clicking the link to view or download.
Skills
UI / UX / Wireframing / Axure / Bootstrap / Agile / Mobile First Approach / Responsive Design
My Role
I had been collaborately working with UI Web Designers, Business Analysts, Architect, Developers, Project Manager, QA, SEO, upper management and stakeholder from the beginning to implementation in this project. I created low- and high-fidelity wireframes to show various concepts in Axure and modernized the user interface with Bootstrap components and style.