FREE PEOPLE WEBSITE
The Replatform project's goal was to rebuild the Free People website from the ground up, bring the engineering and design teams in-house, and allow the desktop and mobile site to share one code base.
The project allowed for the implementation of a new workflow and process from design to development. Introducing new optimization techniques to the design and production team assisted in keeping page sizes low and overall faster rendering times on desktop and mobile browsers. This was crucial for consumers who were on the go and wanted to shop via their mobile devices.
Accomplishments and takeaways:
Conversion rates instantly outpaced previous week-over-week rates within the first week of launch. Through our analytics team we were able to see that customers were spending more time on the site, this was a huge win for the brand since we flattened the structure of the site so that products would be quicker and easier to get to. Page sizes were reduced by 50% which resulted in 66% faster rendering speeds. The product detail page required multiple custom breakpoints to be written to accommodate image dimensions that were 20% larger to provide much more detailed product shots.
Free People Homepage
Goal: Initial testing showed that the legacy homepage would take 6+ seconds to load on enterprise-level internet speeds. The homepage weight would sometimes grow to beyond 25 megabyte. This would be unsustainable for the brand as Free People looked to increase their global presence and data rates in different countries would not be able to take the strain of multiple megabytes just to render the homepage.
Solve: The design and engineering team worked together to set a maximum budget for every section of the site. We also introduced a new optimization and minification processes to the design/production teams workflow along with new automated minification of all front-end code. This resulted in massive file reductions, bringing the page load time down to sub 1 second along with reducing homepage sizes down to 1.5mb on average.
Product Browse PagE
Goal: Keep page weight low, especially when customers started on the path to browse product. Fast efficient pages would result in higher conversion rates and less cart abandonment.
Solve: We tested multiple variations of the product display pages. Finalizing on 24 products which provided quick render times and enough product for a customer to browse through without feeling overloaded or underwhelmed. This was the first page to incorporate a new 15-column grid system. 3 columns were dedicated to the side navigation and the remaining 12 gave us an even number to distribute the 24 products through. We maintained a style that was reminiscent of the legacy site, but a cleaner approach led to less distraction and more attention on the product.
Product Detail Page
Goal: The product detail page is the most important page on the site. A slow page would result in the highest amount of page abandonment and less conversion. Free People is an extremely social brand, and we wanted a way to leverage the FPMe Community to show the various ways different ways that customers wear the product and different combinations they make with other Free People products. This proved to be a great way to promote other similar products.
Solve: Incorporating a lazy load method allowed the initial images to load instantly on screen, while thumbnail images and different color variations were all loaded after the page loaded. This gave the the customer instant gratification of seeing product right away and allowed the page to feel complete.
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.
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.