Allen Xu - Product Designer
Allen Xu – Product Designer
jet_default_shipping_cover.jpg

Jet – Default Shipping Case Study

mobile

Jet is an e-commerce website that offers thousands of items, and is best known as its prices drop as you shop.

Download for iOS

Problem

Problem

There were some customers who had experience with shipping their orders to a wrong address, or being charged by a different payment method due to the last used option was automatically set to default, which was confusing and frustrating. In order to provide the best experience to our users, we needed to add a physical "Set to Default" button on both of the Shipping Addresses and Payment Methods screens. 

And here it is….NOT!

account_shipping_payment_flow_old.png
Observation & Challenges

Observation & Challenges

As I was interacting with the screens, I noticed a few things, 

•    Since the "last used address / payment" would be set to default and moved to the top, the radio buttons could be removed

•    "Edit to delete" is useful when dealing with a list of items such as in notes and to-dos. But the majority of the users don't have over 5 shipping address or payment methods, therefore, the Edit button could also be removed

•    "Swipe to Left to Delete" is one of the common patterns on iOS. However, swiping to left on Home, Listing, and Details screens would activate the expose cart, the action should be consistent across the app

Early Design Process

Early Design Process

I started competitive analysis and found the account screens of the major e-commerce apps weren’t intuitive either. During my sketching process, I was exploring different ways to set an address to default, such as moving an address to the top in "Edit" mode to set it default; or showing the "Make Default" and "Delete" button in every extra cell, However, those wouldn’t make the experience intuitive to users. So I explored apps in other categories and was inspired by a three dots icon within a circle for more options. 

Early Wireframes

Early Wireframes

These are some of the early wireframes I created. For versions 1 & 2, I tried visual elements such as a vertical line, and a checkmark to highlight the current using address. Also using the Swipe to Left for more options. Although the gesture is common in iOS, it's not clear to users that more options were available to them on the screen. Option 3 was pretty close to the approved design, but after speaking with the stakeholders, we decided to be consistent with design of the Apple Wallet app , and the decision led to the final design.

flow_default_shipping_new.png
Final Design

Final Design

By simplifying the interface, the final visual treatment allows users to access all actions with only one tap. 

Check out the prototype below