FREE PEOPLE WEBSITE

The replatform project's goal was to take the Free People site in-house and remove the need to have a separate mobile site by making the new site responsive. The entire project allowed for the implementation of new workflow processes for all the teams involved. The design team now has a process to keep page sizes low through optimization of images and new layouts for the homepage that work efficiently for desktop through mobile browsers.

Accomplishments and takeaways:

Within the first week of launch conversion rate outpaced previous week-over-week rates. Dramatic increase to product page views, customers were diving deeper into the site and spending more time. 66% faster page load speeds. 50% page size reduction due to image compression and various backend libraries. Custom CSS was written for all breakpoints, increasing the overall image dimensions by 20% to present larger more beautiful images of the products.


Free People Homepage

Free People Homepage

Free People Homepage

Goal: The homepage was taking up to 6-7 seconds to load on enterprise-level internet speeds, and homepages sometimes topped out at 24+MB, this would never work for users across the world on mobile devices.

Solve: We set a budget for the homepage and incorporated an optimization + minification process to the graphic design team's workflow. These changes gave us a huge performance gain, we were able to take homepages down to nearly a sub 1 second page load time along with reducing homepages down to roughly 1-3MB. This number is allowed to fluctuate to take care of any business needs.


Product Browse PagE

Product Browse Page

Product Browse Page

Goal: Browsing needed to be quick and effecient. Keeping low overhead on page load low and providing an extremely responsive browsing experience.

Solve: We maxed the browse page to 24 products. This provided quicker render times. By using a 12-column grid we were able to maximize the amount of space that the side-nav used and gave us the opportunity to use much larger thumbnails. The page is still extremely reminiscent of the legacy site, but the clean approach allows each product to stand out more and grab the attention of the customer.


Product Detail Page

Product Details

Product Details

Goal: The product detail page is one of the most important pages on the site. Page load had to be quick but the other swatches and images had to be ready for the customer to interact with at any second. We also wanted to leverage the FPMe Community to show the different ways that customers wore the product.

Solve: Incorporating a lazy load method allowed the initial images to load instantly with the various color swatches and thumbnail images to be polled after the initial page load. This made sure that she would have instant feedback upon clicking a product. Adding a call out within the page to add a FPMe pic opened up the option to capture selfies/pics quickly while showing off previously uploaded user pictures.


Quickshop Modal

Quickshop modal activated from bottom right corner of product image

Quickshop modal activated from bottom right corner of product image

Goal: Provide a quick and seamless way for customers to view product while remaining on the browse page. This view would contain the essential information for a product so that a customer could quickly add to bag.

Solve: The quickshop view was something that was already on the legacy site. We had to rework the entire modal system to work within a flexible grid system. Through analytics we saw that the largest percentage of users, 13%, were on 1024x768 resolutions. This meant we needed multiple breakpoints to make sure that the image wouldn't overflow the screen. We also surfaced what was necessary just for conversion. We called this the "basket-options", everything ranging from size, color, etc. This would allow for quick selection and conversion.


Checkout Flow

Checkout flow - Shipping

Checkout flow - Shipping

Goal: Provide a clean and fast checkout experience to the customer to reduce cart abandonment and increase checkout completion.

Solve: We provided a stripped down version of the page header and footer. This removed a lot of visual clutter that could distract customers from going through the process. Information that was necessary for checkout was broken out into different buckets that could be hidden or shown depending on the combination of what was being bought and method of shipping. This allowed for a more customized experience through checkout rather than surfacing buckets that were entirely optional to fill out.