Zamzows website Redesign
Brand overview: Zamzows is a home, garden and pet store with 13 locations in the Treasure Valley region of Idaho
Project overview: Redesign Zamzows website to better serve as window shopping opportunity for in-person shoppers
My contributions: User research, competitive analysis, user personas, digital wire-framing, navigation, style guide, visual design
The team: Paid media team assisted in audience/user research, SEO team assisted in site mapping and search best practices
Tools: Google Analytics, Shopify, Hotjar, WooCommerce, Adobe Illustrator, Pen and Paper
Process
Audit | Research + Analysis
Client Questionnaire
Understanding how our stakeholders perceive their own brand is important because we can think identify gaps between their perception of the brand and our own findings.
“People choose Zamzows because of our local presence, proprietary products, and the fact that we are family owned and operated.”
What stood out most from the client questionnaire was how often the Zamzows team highlighted 1) the importance of their local presence, 2) their proprietary products and 3) their family history. We were surprised to find that none of these 3 factors were highlighted on the website.
User Research
Installed a heat map via HotJar to the backend of the existing Zamzows WooCommerce/Wordpress website to gain analytics on user action + behavior for 60 days while in the discovery phase.
Our key observation from the heat maps we acquired was the fact that users were almost always navigating to the search bar from every collection page they viewed. This told us that the collection pages did not have the filter options these users needed to find the products they were looking for.
User Personas
Because of Zamzow’s large catalog of products, their key audiences and website users varied. Through our Client Questionnaire, qualitative conversation with Zamzows employees, and Google Analytics, we were able to gather enough information about Zamzows shoppers to compile the following Customer Personas and assign a brand tone of voice to each:
Using each persona and the information we had about them, we developed a messaging strategy we could implement throughout the new website. We call this exercise “Barriers + Motivators” The idea is, we want to intercept negative AND positive thoughts a user may have about the brand at any given time with a well-crafted, relevant message.
Existing Website Analysis
Upon analyzing the Zamzows website through the lens of “performance best practices” we found that there was no visual hierarchy to the homepage. The website consisted of graphic after graphic highlighting promotions and specific products, but there was very little brand or store information available.
Our goal was to redesign a website that made it possible for users to ‘window shop’ for products they were interested in, but the product detail pages and collection pages featured oversized photos that were difficult to s and overwhelming, with paragraphs of information.
Competitor Observations
One of the most prominent observations we found after analyzing various lawn/garden and pet stores were the complex filter features these stores had available.
Strategic recommendations
LOOK & FEEL
More intention behind color. Keep it colorful, yet earthy
Use gradients, but in moderation
More photos of people, physical stores
Clear product categories
Speak to barriers and motivators
New font families
Product images better formatted
WEBSITE STRUCTURE
High level brand info above the fold
Supported by more specific, product information next
More emphasis on where to find physical locations
More ease when thumbing through product categories
Visual hierarchy will encourage scrolls
Speak to the “human approach” of Zamzows
Most popular areas of website will appear first,
or will be more attention-grabbing
Product detail pages re-organized and optimized for mobile
Filter option on collection pages
Visual Style Guide
We created a style guide for the new website as we believed the client would better be able to establish their brand identity and create a better experience for their clients with color and font options that were less overwhelming and more consistent.
Wireframe Sketches + Planning
Homepage
In the original wireframe sketch, we wanted to be sure to feature the 3 brand superpowers: Local, Proprietary, Family-owned. We also wanted to do so while giving shoppers the opportunity to find their nearest store, or the resources they need to make an informed buying decision. Our final sketch was created with a little more intention, as we addressed the “who, why, how and what” behind the brand and shopping experience.
Collection Pages
Navigation
The original navigation was highly complicated and often combined two sets of menus into one. We worked to separate and reorganize each menu to simplify that navigation experience.
Collection Filtering
We wanted users to have the option to filter out items that were out of stock, shop within their price range or select a specific brand they may be looking for.
Mobile Prototype
Collection Pages Final Design
Filter Function
The Shopify theme (Canopy) we chose enabled us to customize the filter options to our original sketch
