The shopping experience was not responsive, which really impacted the customer’s experience on mobile devices. More than half of online shoppers in the US use a mobile device to make purchases. Also, this shopping cart connects most of the products, publications and services of APA. Because of this, the experience for customers was inconsistent since some of the other properties that connect to the shopping cart were mobile friendly.
Make the shopping cart be mobile-friendly and improve the overall checkout experience to help boost sales.
When I first joined APA, the HTML & CSS prototypes had already been created for the e-commerce screens. This project had a team of 2 UX Designers, myself included. I helped to refine the visual design and run the usability tests.
Although the original request was to make the screens mobile friendly, our team wanted to analyze the overall experience. After a review and design session, we found opportunities to improve the UX and UI.
Usability testing helped us test and validate our design. We took note of the various customer checkout journeys and from that composed 5 tasks for testing. Our goal for testing was to ensure that there was little friction for the user’s checkout process. After running an initial test, we pinpointed minor usability errors that helped guide our next round of designs. The results from testing helped to get stakeholder buy-in as well.
The biggest constraint for this project was the iframe for the payment processing. We were unable to change the style of the fields inside the iframe, and because of this constraint, these fields did not match the rest of the look and feel. We are looking into a potential replacement for payment options, but kept the current solution for now.
The overhaul of the ecommerce UX helped to start the web apps pattern library. Thanks to testing, we were able to solidify styles and patterns that helped to build the foundation of the library. Designing components with no context can be difficult and loses the vision of the overall design of the layout. This project helped see those newly designed components come to life.
Making the shopping cart responsive has given users the opportunity to shop directly on their phone. With most of online shopping being mobile, this has been a huge opportunity for the association.
