Responsive Redesign
I worked on a team with two designers redesigning Disney's e-commerce site, shopDisney. We spent almost a year rebuilding the site from the ground up, including the layout, style, functionality, and platform. My role as a UX / UI Designer was to help design the new direction of the site based on research, testing and influence of key stakeholders. I was especially involved with the bag and checkout portions of the site.
I was tasked with updating the bag and checkout process to address existing friction points along with refreshing the style and functionality of the pages. Overall, we wanted to reduce the steps that it would take to complete the checkout process. We were also implementing two checkout flows, one for a guest checkout and one for a guest with an existing account. Since we already had current data about the checkout process when we began, we used that as a basis for identifying existing problems.
Using usability studies and data that we had, we decided that it was best to divide the guest checkout flow into three clearly labeled sections in order to reduce customer drop off rates. Since there is a large amount of information that is needed, this was the best way to make the process more manageable for the customer. We included a top navigation with clearly labeled sections and also removed the site-wide navigation to reduce distraction. Our CTA's directly speak to the next step in the process. We also included city lookup functionality, where once you enter your zip code, your city and state are automatically found.
Since we accept many forms of payment, we needed to find a way to present all of them at the same hierarchical level. One of the challenges I came across when working on these designs was how to handle the cases when the Disney Rewards and gift cards would need a backup payment even if there was enough money on their card. This was a point of friction that was confusing to our guests. In our designs, we included a snippet of copy that spoke to its usage and also reduced customer work by automatically filling the form fields if they had previously entered a credit card.
During the final stage of the guest checkout, we allow the guests to edit their previous steps, while also bringing back their entire cart overview so they can check their purchases before buying. We also divided up the bag by delivery date so the guest would be able to see when certain items would arrive.
The one page checkout utilizes the same pieces as the guest checkout except it draws from the customer's saved information. Guests can easily switch between payment methods and delivery addresses. We made sure that the CVV field was visually highlighted since a guest will need to enter that information for every purchase since it is illegal to store.
This was a wonderful project to work on and we continue to improve the customer experience. We have received positive guest feedback and look forward to adding new functionality. If you would like to hear more details about the process of this project, please contact me and I would love to discuss.