UI / UX / Web Design

Checkout Wireframe US
High-fidelity wireframes in Axure
Checkout Wireframe CN
An example of localization for CN subdomain in the mockup
Checkout Devices
Responsive Checkout Process in desktop and mobile devices

Mouser Checkout Process

Mouser Electronics

Project Objective
The project was to improve Mouser.com’s checkout experience on both desktop and mobile sites. The end goal is to provide one responsive site that works across multiple platforms.

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

My Role
  • Worked with the entire WebExp team to put together a research analysis of our competitor’s online checkout processes
  • Researched other ecommerce sites’ checkout process on different platforms
  • Worked with Business Analysts and other UI Designers to create several concepts/wireframes based on the research, analysis and the E-Commerce Checkout Usability document by Baymard Institute
  • Designed mockups with mobile-first strategy and Bootstrap responsive approach
  • Provided different scenarios for different subdomains such as DE, CN, RU, etc.
  • Created mockups in adaptive view in Axure
  • Introduced and implemented more Bootstrap elements such as form, alert message, tooltip, popovers to Mouser.com
  • Worked closely with Business Analysts and Web Architects to achieve project goals
  • Tested the app on both desktop and mobile devices to ensure that both UX and UI requirements were met prior to QA testing to avoid any additional delay.
  • Pushed for more future site enhancements in Mouser.com such as Bootstrap forms, buttons, login page, alerts, responsive header, etc.