Making Garrett Leight: A Shopify Re-Platform For The Cool Kids Of California Eyewear
Founded in Venice Beach in 2010, Garrett Leight California Optical found their niche as an eyewear brand that incorporates the laid-back philosophy of California culture into their ethically-made and impeccably crafted products. One thing that sets Garrett Leight apart from their competitors is their superior in-store shopping experience — their carefully curated selection of high-quality frames is presented with real human connection.
The team behind the brand, including founder Garrett Leight, approached Funkhaus because they were concerned they had lost the spirit of their brand in their digital presence. “Garrett Leight had already invested a lot of time in their brand, especially in developing their vibrant storefronts, but their website didn't tell that story,” says Nick Dies, our Managing Partner. “They wanted us to breathe life into their site and make their brand come to life online the same way it does in-store.”
We began by conducting a complete audit of their legacy website, where we carefully analyzed design flows, UI and UX, and their data. Out of that exercise, we compiled a comprehensive discovery document that reflected what we observed during our audit and offered recommendations for improvement based on industry standards and competitive peers.
We recommended a full, ground-up rework of their site on Shopify Plus, which we determined should include a digital merging of all brands under the banner of Garrett Leight, including GLCO, their original line, and Mr. Leight, their high-end line of premium Japanese-made eyewear offering. Before, the two brands lived on separate websites and Mr. Leight redirected users to Garrett Leight to buy their styles, which we felt was a non-ideal presentation of both brand value and shoppability. Within a new framework, these brands can live together while telling their own stories, with a focus on the quality of craft and the product itself. As a global brand, they also needed to accommodate the needs of a particular European optical market, requiring a separate build for the European market that could handle localized integrations and the unique fulfillment protocols for that region.
“This project was a delicate balance between pushing their brand to be as alive and vibrant online as it is in-store while making sure that we weren't going so far out as to see any drop-off in conversions,” says Nick. “We held both telling the brand story and improving performance and sales as top priorities, and at the end of the day, we honored what works with best class e-commerce site design — keeping things simple but impeccably done to unify the brand and showcase the product.”
“Our top priorities for the site were creating informative and easily shoppable product detail pages, designing for ease of use on mobile, and building functional and intuitive menus, “ says our Design Principal Dave Funkhouser. “Overall, this is a site that we didn't want to over-engineer, and we did a lot of research around the elements that would work most successfully on mobile first.”
With the aim of streamlining the shopping experience for Garrett Leight’s customers, we outfitted their site with navigation that cuts down on clicks. “There was a lot of thought and tech analysis put into determining navigation design for this project,” says Dave. “We wanted to find the most modern, effective way to present product options to the user, and we felt that a sleek sliding tray navigation with robust filtering was the right move.” This new system, illustrated with icons to communicate different silhouettes like cateye, round, or aviator, makes finding the right frames quick and easy.
We maximized impact on product detail pages by placing large format product photography front and center on the page, allowing the user to get a feel for the product and access all the information they need before making a purchase. We made these pages easily scrollable, utilized a locking component at the bottom of the page, and kept design elements robust yet simple and photography refined and consistent, always placing the focus squarely back on the product. “These are not casual purchases, they're high consideration purchases,” says Dave. “So making sure that these product detail pages had a real story behind each of these and really high quality photos and variety of them just legitimizes the purchase.”
The brand previously used Futura, a timeless sans-serif font, as their foundational typeface, but they had expressed some issues with it. We pitched them on a more modern, evolved version, Panagram Sans, that is now the core typeface of the site. We also upgraded Mr. Leight to Acma, a typeface that embodied more feminine qualities and would appeal more towards one of their larger target audiences of women between 25 and 45.
Though our main focus was on shoppability, we wanted to preserve the content marketing that has become a part of the brand’s DNA. We preserved and refined the stories component on the site, where they can share the narratives and inspiration behind some of their most popular frames, as well as highlight the places that their designs have shown up in popular culture, including on celebrities and in TV shows like Succession. We also made sure to create a digital home for their in-house magazine, Spectacle, that further solidifies and showcases their brand while proving they continually have their finger on the pulse of culture.
Lastly, we made sure not to forget the organic creative community they’ve built. “Garrett Leight really prides themselves on their collaborations with individual artists and other brands, creating everything from glasses to accessories to home goods,” says Dave. “We wanted to make sure those got their due, and we housed those in a set-apart yet equally shoppable section of the site.”