Responsibilities: User journey, high-fidelity wireframes
The following outlines an updated checkout experience for FSAstore.com.
Old shopping cart design. The cart contains no items.
There are two states for an empty shopping cart – one where the user is signed out of their account, and the other where the user is signed in.
New design for an empty shopping cart. Here the user is signed out of their account.
The new layout eliminates some unnecessary elements of the old design, like the checkout link. Why would there be a link to check out when there is nothing in the cart? Instead I decided to surface popular store items to increase discoverability and encourage the user to make a purchase. Certain products in the FSA Store require a prescription to buy. I made the distinction between non-prescription and prescription items with the red/blue colors and icons on the "Add to cart" buttons.
New design where the user is signed in.
When the user is signed in, their saved items are displayed at the top of the page, and they can scan to see which saved items are still in stock. Below, relevant items are surfaced based on the user’s purchase and search histories, making for a more personalized experience.
Old design with two items in the shopping cart.
New design with two items in the shopping cart.
Above is the updated design for when the cart contains items. This layout draws the user's eye across the page in a more natural fashion, and the user can see exactly how many items are in their cart, the cost of each item, and if the items require a prescription. The additional products below are surfaced based on the user's search history.