UI / UX / Web Design

Shopping Cart Wireframe
High-fidelity wireframes in Axure
Shopping Cart Devices
Responsive Cart Page in desktop and mobile devices
A video to highlight the new cart features

Mouser Shopping Cart

Mouser Electronics

Project Objective
The goal was to improve the user interface and user experience of Mouser Shopping Cart and turned the legancy sites to responsive-ready with Bootstrap framework to support various mobile and desktop devices.

Problem Solving
  • The use of buttons is well defined in New Cart, some of the cart tool buttons were eliminated and the key cart tools are now grouped in the Cart Tool Bar above the cart table.
  • The Quick Add Box with type-a-head functionality (search suggestions) is now in the sticky table head which will allow users to see the column head and the Checkout button all the time.
  • The special message for a product is now listed inline with the product detail, qty, availability, prices and error message. This change will provide clearer information to users.
  • Technical Skill Improvement - Thru working on this project, it has pushed me and the team to learn more responsive design/development skills and utilize the Bootstrap grid systems, tables, alert message, icons, CSS, etc. That would actually influence the direction of other teams as well based on the design standard that we set forward.

UI / UX / Wireframing / Axure / Bootstrap / Agile / Video / ScreenFlow

My Role
In new Cart page, I created low- and high-fidelity wireframes and mockups in Axure and modernized the user interface with Bootstrap components and style. I had also created a video to highlight the new shopping cart features.