Happy Howl 🐶
A website redesign for a start-up dog food subscription service.
-
The Problem
Potential customers were visiting the Happy Howl website but few customers were exploring the products or making purchases.
- In particular, the product page had a bounce rate of 90%.
-
The Solution
Redesign the website home page and product page in order to increase:
- Time spent on site
- Conversions
-
My Role
Working alongside designers, Jiyoung An and Hailey Ma, we were able to collaborate on the following:
Competitive Analysis, User Interviews, User Testing, User Flows, Ideating, Sketching
We each took on the role of redesigning a prominent page of the site into Hi-Fi Mockups
- Home Page - Brigitte Walton (me)
- Product Page - Jiyoung An
- Feeding Calculator - Hailey Ma
Step 1: Discover
Upon meeting with the founder of Happy Howl, Colin Buckley, we knew he wanted us to redesign the website home and product page, but we weren’t exactly sure how or why.
Competitive Analysis
First, we performed a competitive analysis on a number of different websites from both direct and indirect competitors.
-
Bold statements & colours on home page
Use of icons and visuals instead of text to communicate information
Bold Sectioning with Section Headers
Small Animations
Highly Interactive & Engaging Features
-
Focus on product benefits
Promotion of testimonials
Comparison to competitors
Customer ratings and reviews
-
Fixed CTA button bar appears at bottom of the page while the user is scrolling
Provide subscription or one-time purchase option
CTA buttons on most sections
Common Themes
User Interviews & User Testing
To help us better understand where the problem was stemming from we decided to perform user interviews as well as user testing on Happy Howls’ current website.
Key Findings
-
Home Page
Product/Service Comprehension
User not aware of what Happy Howl is selling upon first glance
User not aware product is offered as a subscription service
Benefits
Users can see benefits listed but don’t understand why these benefits are important
User wants to be told why they should feed Happy Howl vs. competitors products without lots of reading
Text
Too much text
User easily bored
Not easily digestible
Inconsistent Offers
Multiple buttons offering multiple different discounts causes user confusion and creates a sense of distrust
Reviews
100% 5-star reviews seems too good to be true causing skepticism in users
Imagery and Iconography
Imagery is very large making it hard for the user to scan
Disconnect between iconography and information provided
-
Product Page
Product Offering
User would like to have more case size options
Product Description
User would like to see the more related info on the left image section
Users don’t understand the carton size and explanation
Imagery
Images take too much space and don’t provide valuable info
Information Overload
Sections not labeled well leading to user confusion and over stimulation
-
Feeding Calculator
Location/Placement
Users missed “feeding calculator” button all together
Multiple References
Too many calculation formats
All in different locations
Inconsistent Information
Price calculation is not correct - misleading
Weight bracket units are inconsistent
Wording
Text above carton buttons is very confusing and not relatable
Too wordy and confusing
Recommendation Recall
When purchasing, user forgets recommendations and in order to refer back to the calculation, they have to keep opening the pop up screen
Excess Effort
When the user wants to try the food, they still have to do math to figure out how much they need for 1 week/ 1 month/ etc
Product Quiz
If Happy howl only offers 1 product, what was the point of this quiz? Does the different flavours have different benefit?
Email
Users did not want to have to provide their email for just a recommendation
Step 2: Design
User Flows
A simple user flow was created to show the simple path a user will take to get from the home page to purchasing a product.
Sketches
To get some ideas flowing our team performed Crazy 8’s exercises for the home page, product page and feeding guide. Click on the sketches to explore them in more detail.
Step 3: Validate
-
Due to a large portion of user confusion stemming from the process of figuring out how much food to order, the first idea we ran by Colin was our re-design of the product offerings.
We thought that breaking down the carton recommendations based on dog weight would be a quick way to bypass said confusion.
However, due to shipping logistics, this breakdown would not work as cases could only be shipped out in increments of 6 in order to uphold Happy Howl’s promise of free shipping to customers.
-
We thought providing the user with a “add to cart” button directly following their custom recommendation would take a lot of work off the user.
However, due to the limitations of the Shopify platform, this idea was also scratched.
After coming up with a few ideas it was time to run everything past Colin and see what he was thinking. Below two of our solutions that were met with challenges are discussed.
Step 4: Final Design
After receiving feedback from Colin and brainstorming solutions we turned our ideas into hi-fi mockups of both desktop and mobile versions of the site. Below are explanations of our final solutions. Feel free to check out the Figma for the full desktop and mobile mockups.
Solutions
-
Process Map
Location: Home Page
Description: A step-by-step map explaining the process of how Happy Howl is made as well as some of the product benefits.
Great way to communicate a lot of important information without blocks of text
Highlights product features and benefits
Draws users attention
Minimal text
Help familiarize users with the brand and the brand personality
Interactive on mobile
-
Ingredient Interaction
Location: Home Page
Description: A section featuring a list of health benefits Happy Howl provides to the right of a cartoon dog. As the user hovers (desktop) or selects (mobile) a benefit the ingredients that help provide that benefit and an icon of that ingredient appear.
Showcases ingredient benefits in a simple way that is easy for the user to understand
Interactive hover state keeps users’ attention
When user hovers (desktop) or selects (mobile) a benefit the related ingredient and an icon appears
Not only lists ingredients that are good but also explains why they are good
Minimal text for easy and quick comprehension
-
Food Bowl Animation
Location: Product Page
Description: A bowl of Happy Howl dog food with benefits listed in a ring around the bowl. When the user hovers over the benefit a small explanation appears below the benefit. As the user scrolls down the page the bowl of food rotates in sync with the scroll.
Increases benefit comprehension
Minimal text
Attention grabbing animation
Interactive hover state
-
Reference Image
Location: Product Page
Description: Three dogs of varying sizes (sm, med, lg) are shown as a product image featuring the number of cartons they each eat each week along with their weight.
Helps users understand how much food their dog will need very quickly and with low effort for the user
Visual references are important to give scale
Allows for the user to get from the product page to the checkout quickly
Ideal for users who do not wish to use the feeding calculator
-
"Happy Howler" Profiles
Location: Product or Home Page
Description: A deck of cards users can scroll through featuring profiles of dogs who eat Happy Howl. Information such as how many cartons of Happy howl they eat per month and how Happy Howl helped each dog is included in the profile.
Provides users with a reference for how much of the product they should expect to be feeding
Provides real life testimonials that prove the product works
Adds to the brand personality as the profiles are from the point of view of the dog
Highlights product benefits
Interactive element
Minimal text
-
Case Size Offering
Location: Product Page
Description: Increased case size offerings from 6 and 18 cartons to 6. 18, 36 and 72 cartons for easier ordering.
Aligns with shipping logistics as cases are all multiples of 6
Allows free shipping to remain available
Recommendations will be rounded to the nearest case size to limit confusion when ordering
Rounding will not be shown to users but will be done in the background
-
Product Comparison
Location: Product Page
Description: A visual comparing the nutrients provided in the same amount of generic kibble and Happy Howl.
Easy reference
Promotes product benefits
Minimul text
-
Meal Plan Wording
Location: Feeding Guide
Description: The option to select a meal plan has been changed from text to images and text with more familiar wording.
Easier product comprehension
Visual reference
Presents lower cost option
-
Recommendation
Location: Product Page & Feeding Guide
Description: An easy format to display users’ customized recommendations where only information that is needed to place an order is provided. This recommendation is now shown under the product description.
Limits confusion by telling the user exactly what they need to know and how to make the next step
Helps users with recommendation recall as they no longer have to enter the feeding guide to see the recommendation
Promotes subscription service
Conclusion
This was a really fun and informative redesign. It taught me a lot about getting to the bottom of problems and working with a team.
Some key takeaways from this redesign include:
Early stage interviews and testing are really beneficial
Both these activities allow you to get a far better understanding of the problem at hand as well as insight on potential ways to solve those problems
Ask about constraints
We learned the hard way to ask about any possible design constraints before putting in the work only to find out it cannot be done
Work together
As a group of three, it was easy to brainstorm and share our thoughts with each other. This meant that we were always on the same page and limited fear surrounding the disconnect between deliverables