Julia King

sarahflint.com Redesign

Role: UX/UI Designer

Duration: 2 Weeks

Process: Competitor Analysis, Content and IA Audit, Prototypes, Backend Development

Tools: Photoshop, Figma, Shopify

One of my first projects I began working on at Sarah Flint was the complete redesign of the company website as part of a larger rebrand strategy. Lovingly dubbed “Project North Star,” it’s purpose was to not only improve the customer experience but to also help build the image of the brand. After conducting a competitor analysis and a thorough audit of the site, I was able to identify some of the key problems and offer solutions on how to fix them.

BANNER SIZING

Problem: The Shopify theme currently being used was out of date by several years and had never been customized to allow for features such as separate banner sizing between desktop and mobile banners, additional sale headers, spacing between sub-banners etc. This was greatly impacting the user experience by not allowing us to use properly sized banners with clear images and legible text across all viewing platforms.

Solution: By updating the theme we were able to get a realistic view of what we were capable of updating in Shopify and what would need to be fixed through backend coding. This opened up a host of possibilities as we could now customize sizing for each respective platform.

Navigation Menu

Problem: The original menu was not optimized for customer click patterns. All product categories were contained under one Shop dropdown menu, which had become cluttered with too many options, including a second bestsellers column in addition to the one in the main menu. There also were no rotating categories or seasonal images to keep the menu new and exciting.

Solution: After examining what categories competing brands highlighted in their menus, we compared the findings to heat maps showing where on the site was receiving the most clicks, and what keywords were being consistently searched for. With these findings, I restructured the top menu to feature the top clicked New In as the first option. I separated out Shoes, Accessories and Featured to give them room for expansion and easier navigation and reorganized the dropdown menus accordingly. I also removed Visit Us and created a dropdown menu for About, which became the new home for Press. Lastly, I added in seasonal imagery and rotating featured collections to keep the menu fresh and to add visual interest.

HOMEPAGE

Problem: The old homepage was stuck in set banner sizes and placement, which left little freedom for seasonal refreshes. Space was not being optimized to promote a wide breadth of product and there was a lack of imagery highlighting what was being promoted. Lastly, the old homepage UI no longer matched the direction the company was going in with the new rebrand.

Solution: Through competitor analysis and prototype testing we discovered that customers were gravitating towards carousel displays so I incorporated two of them in the homepage to showcase two of the most popular collections, New Arrivals and Sarah Flint’s signature Perfect Collection. I was able to highlight additional categories by adding a sub-banner quad with seasonal imagery, minimal copy and clear CTA’s. Since Sarah Flint is still a relatively new company, we wanted to create brand credibility through the addition of a press banner, as well as the Made in Italy banner.

Collection Pages

Problem: The biggest issue with the original collection pages was the organization and accessibility of important information. The top filter bar would disappear when scrolling forcing customers to scroll back to the top to make any changes. The quick view buttons were also taking up a lot of space that could be better used for more product information. There was also no “love it” feature to save products for future consideration.

Solution: I added top banners to the main collection pages for more visual interest and made the filter bar below sticky to stay accessible while scrolling. In order to ground the products I added shadow boxes and changed the rows from five across to four - giving each style room to breath. With the added hover capability, I moved the quick view button to only appear on interested styles along with a “love it” heart and an on-foot image. One piece of information we found customers consistently looked for were color swatches so they were added for easy access and to show the wide breadth of options. Lastly, I introduced ghost ads into the grid to give further exposure to other categories.

PRODUCT PAGE

Problem: The organization of the product pages was not optimized for customer experience. At the time of analysis, the ecomm photography consisted only of four different shoe angles without any on-foot or detail shots to give a realistic view of the shoes. In the information column, the fit notes were hard to find on the page and there was a quantity feature that was not being used. The reviews block was also very lengthy and didn’t feel grounded on the page.

NEXT STEPS

The implementation of the above pages is still under construction and we are ironing out details and making small changes as we go. Once the homepage, collection and product pages are up and running, we will shift focus to the rest of the site including the check-out process, about pages and loyalty programs.