zooshoo_ux.jpg

ZooShoo: UX/UI

ZOOSHOO

MY ROLE:

  • UX/UI design

  • Research

  • Prototyping

TASK:

To identify key areas where users struggled and where improvements can be made. Since the product pages and checkout pages are central to high conversion rates, the task was to really upgrade the design and to build trust with the customer. In doing so we sought out to redesign the customer service pages as well. Our customer service help pages were very scattered, long, and difficult to digest. We wanted to quickly and efficiently answer any questions and help the customer to feel confident in their purchase. 

RESEARCH:

Our research first began by analyzing what customers were saying about us. I noticed that many customers posted comments on social media questioning our trustworthiness as a company. Many potential customers were not sure if we were legitimate since our prices were so affordable. Then, I conducted interviews with users and identified key areas where there was difficulty. Some key insights we considered:

  • FAQ often did not provide clear answers

  • It was difficult to find contact information for help

  • Customers often abandoned at checkout because they could not find where to input coupon code

  • Cart abandon rate was high overall

  • Many people did not trust the company

  • Mobile site was difficult to maneuver and the checkout process had glitches

As a part of the discovery process, I chose to check out what other competitive brands were doing. The purpose of this was to design for a sense of familiarity so that customers can easily get used to our interface and have trust in our brand. We tested with our own demographic by using Optimizely to a/b test simple variations such as the color of the checkout button, as well as the Call to Action. We determined that black performed better than red, and the call to action "Add to Bag" performed better than "Bag It!"


DESIGN SOLUTIONS:

Checkout page features:

  • Second Checkout button was placed at the top of the page. This made it easy to quickly checkout without scrolling. Tested to gain higher checkout rates.

  • The sale price was displayed with the full price crossed out to bring attention to the amount of money saved.

  • A PayPal checkout button was added so that customers can checkout with ease and trust from a protected platform. Previously, PayPal was only accessible on the payment page.

  • Promotional Code box was included so that customers can quickly calculate the discounted price and move to checkout. Previously, the code could only be inputted at payment, leading to abandonment early on. I chose to grey this box out and make it accessible upon clicking so that customers who did not already have a code wouldn't be prompted to google for one.

  • Credit card icons were added at the bottom of the page to further promote trust in our company and service.




 

FAQ page features:

  • Customer service topics are broken down by categories to make it easily readable. It minimizes text so that customers won't be bogged down reading irrelevant information.

  • Search function makes it handy to quickly attain the information needed.

  • Company contact information is static on the right side of the screen for accessibility

  • Contact form was created with focus on helping customers target their issue, and for our customer service team to quickly understand the problem.


 

Product Page features:

Two solutions were designed for this page and are outlined below. The first solution (left) was designed with the current layout in mind and only adjusted for small changes.

Solution one:

  • Made available and out of stock shoe sizing clearer

  • Added a Quantity drop down menu because often times customers bought affordable shoes in bulk.

  • Free Shipping code and existing sale codes added below product

  • Product color variations: I changed the interaction of this so that when clicking on other colors, only the main product image changed. Before, clicking on a different color reloaded the entire page, wasting time.


Solution Two

This second solution was a new formatting style to test, placing emphasis on the accessibility of color variations.

  • Moved shoe color variation to the top so that customers can immediately see them. This was based on customer shopping behavior. The first thought of users was often “Are there other colors?”

  • Product color variations: I changed the interaction of this so that when clicking on other colors, only the main product image changed. Before, clicking on a different color reloaded the entire page, wasting time.

  • Added a Quantity drop down menu because often times customers bought affordable shoes in bulk.

  • Free Shipping code and existing sale codes added below product

  • Size buttons were opted for instead of a dropdown menu that way customers can immediately see whether their size is in stock.




 

Mobile Improvements

The main issue with our mobile site was difficulty navigating and editing products during checkout. This led to abandoned carts once the process became too tedious. The rate of checkout on desktop was still much higher than on mobile. This showed us there was an opportunity space with mobile checkout.

The solution was to create a checkout button that was static at the top of the screen and responsive to the page so that customers can check out without having to scroll.

  • Once in the shopping cart, I wanted to make it easy to edit and change their selections. I added the ‘Edit’ options that way customers can change sizing and color directly within the cart, rather than navigating back to the product collection.

NEXT STEPS:

The next steps will be to continuously test and iterate on these changes, making sure to track progress on different features.