Website Redesign
Lazy Susan’s Granola
Background
Lazy Susan’s Granola is a family-oriented, all-natural, and homemade granola brand that utilizes locally sourced ingredients from the northern New Jersey area. Initially, they started off as a small word of mouth local brand, but their growing popularity and future business goals highlighted a significant need for a brand refresh, as well as an improvement on the overall UX of their current website. Lazy Susan's Granola wanted to shift from prioritizing local brick and mortar sales, into building a more successful eCommerce business, while also growing their brand's reach beyond local awareness. I was responsible for all aspects of this website redesign, from discovery and ideation to visual polish and future delivery.
Problem
The current site's navigation followed no coherent flow and was considerably confusing to get around. Learning any information on the brand or products was seemingly difficult because information was scattered across the website in one paragraph blocks on numerous pages and in various unrelated sections. Similarly, information placement on where to buy their granola locally was equally unpredictable despite numerous references pushing for it, and only accessible via an arbitrarily placed CTA button in the product gallery page. Further if a user wanted to buy the product in person, the 'sold at' page was minimal in information and ultimately useless for consumers who are not local to New Jersey since it consisted only of a single column list of store names and towns.
Original Lazy Susan’s Granola site.
Insights
Before designing, I conducted a thorough competitive analysis of various granola brands that ranged from nationally known businesses to small local businesses. The evaluations of these websites broadly indicated that the current Lazy Susan’s Granola website was considerably outdated in appearance, its site structure did not follow any standard conventions, and overall it lacked an intuitive eCommerce-based user experience.
Remote usability testing of the current Lazy Susan’s Granola website showcased several significant pain points for users: a general lack of information site-wide, non-intuitive site navigation, and inconsistent styling across all pages. Users were tasked to find more information about the brand, which resulted in an average of 47 seconds to completion. 40% of tested users failed to find more information, and stated that "the lack of information available was enough to drive them away from the website altogether".
Additionally, 80% of users had difficulty with the site navigation, citing it as both "confusing and misleading in direction". The website's navigation and placement of minimal information resulted in relatively high time averages for most tasks, indicating considerable friction site-wide. Nearly all users commented on the inconsistencies of the website’s styling, mentioning that not only does it add to their confusion, but also adds a feeling of distrust relating to the website's security. My findings reinforced that a complete website redesign was imperative.
Solutions
Based on these insights, my priority for this redesign primarily focused on usability. This meant first redefining the information architecture and identifying possible users paths that follow a more familiar eCommerce experience in order to rectify the current haphazard site navigation. To make the experience as intuitive as possible, all pages are clearly accessible via a more traditional navbar and footer, whereas the previous site had neither. I synthesized the flow in such a way that users are able to follow a linear path towards making a purchase, rather than arbitrarily moving throughout the site.
In simplifying both site and page structure, I combined areas of related information on one page, further eliminating unnecessary and individual dead-end pages. The restructuring of the standard eCommerce pages across Lazy Susan's Granola was primarily about making sure content was predictable and organized sensibly with awareness towards accessibility guidelines. For example, in my redesign I created a more encompassing About page that consolidated the scattered brand information, effectively reducing cognitive load while also helping me to weave Lazy Susan's story as a brand into a single cohesive narrative.
Additionally, I resolved the previous issue with the 'Sold at' page by designating a new Retail Locations page in the navbar and footer, as well as easily accessible CTA placement. On the Retail Locations page, I designed a store locator feature to make it easy for the user to search for the nearest store on a map and included the necessary contact information for that location. Overall, my redesign's aim was to turn Lazy Susan's Granola from a rather simple website with bare minimum information and basic online ordering functionality, into a well-rounded eCommerce website that can stand next to its competitors.
Rebrand
Rebranding Lazy Susan's Granola was an essential facet of this project, considering a key insight was that users found the current website inconsistent in look and feel. I began the brand refresh in thinking about how I can bring out the qualities that shape the brand: Susan's passion for natural ingredients, a family-oriented mindset, and general nutrition. This train of thought, along with a nod to their physical packaging, influenced the color palette I developed for the site which consisted of using primarily red, brown, beige, and yellow. I sought to evoke the passion, stability, and warmth that is present in the brand's very foundations, while also maximizing the number of possible high-contrast color combinations for users with visual impairments.
For the updated typography of the website and overall rebranding, I chose Montserrat as the primary font for all headers, and Karla as the secondary font everywhere else across the site. The uniquely versatile qualities of Montserrat, paired with the quirky characteristics of Karla, modernized the brand's personality to fit in with a more contemporary natural foods eCommerce aesthetic while still optimizing for both readability and legibility.
Outcomes
After completing my redesign, I conducted a second round of remote usability tests using a prototype made in Figma and was able to see how my changes positively impacted overall usability. Users reported that the navigation across the site was intuitive and that all information was there when they needed it. All time to task averages between the current site and my redesign was considerably shortened, nearly all were cut by 40+ seconds. Most notably, the task for users to find more information about the brand dropped from 47 seconds to 5 seconds, with a 100% pass rate.
If given another opportunity to work on this project, I would like to address some friction still present regarding the retail locations page as it did not perform as I anticipated. I would restructure the page, pushing the purpose of the page by redesigning the map feature to better highlight where consumers can buy the product locally.
When time allows, I will be building this site using Shopify or a similar site builder, mirroring the design as close to 1:1 as possible