Cart & Checkout Updates
Whenever a new design system is introduced, the updates can cause issues to existing components within any design.
Updates
-
Cart item updates to reduce clutter Image resizing Updates for interactive areas
- Cart item updates to reduce
- Image resizing
- Updates for interactive areas
My role
Alongside a senior designer, I changed the UI from the previous design system, and proposed these changes.
Process
Learning about how the app works currently
Pick out issues as the UI updates are made in the designs
Internal review
Engineering review
Hand off
Radio buttons
Radio buttons are used when there are several choices, but only one is made. In eBay payments, radio buttons occur when picking delivery method, payment method, and shipping location.
Update
- Radio buttons are being used correctly, but for ADA purposes, a CTA button must be included when radio buttons are used.
- A greyed out button will be used in a disabled state when a user has not made a change.
- The button will be active upon making a change.
Old version
Proposal
Checkboxes
Checkboxes are used when a user needs to make multiple selections or toggle a switch. For eBay, this is occurring in two places within payments. In Native, checkboxes aren't used.
Update (not really, but a ruling)
- In Native, checkboxes are replaced with toggle switches, and should remain this way. There are no cases in eBay payments that checkboxes are occurring with multiples selections needed.
- It should remain this way.
Dropdowns
Along with layout change, the dropdowns in ebay’s cart & checkout behave differently on different platforms.
Updates
- Change location of dropdown. Include zero. This would make the design consistent across platform and IOS’s input field would become less error prone.
- Both will also include a “more” value which should bring up keyboard for inputting high values.
- Changing from input to dropdown alone goes from 4 steps on IOS down to 2.
Old version
Proposal
Layout changes
Some layout change had to happen to accommodate the new design system.
Updates
- The layout was proposed to be left aligned with spacing introduced to give room for all the different information that can appear.
- Interactive buttons were moved to the bottom right.
- Qty picker was moved under the product image for easier viewing.
- Layout was changed with localization in mind for longer languages.
Old version
Proposal
Results
These updates were proposed to engineering in hopes of making the experience better.
Some updates took place, but some remain to be fixed. Namely the dropdown still needs work, but the overall layout has been changed, and it's easier to see everything in the application.