Creating a more intuitive user experience
Open Farm is a North American brand that offers ethically sourced and humanely raised pet food. Open Farm was looking to update their UX to make their shopping experience more accessible for their users. Justine was lead Experience Designer on this project, for diff agency.
After conducting a heuristic evaluation of Open Farm’s site Justine and team defined the scope of the project based on areas they felt needed to be refined and updated.
For this project Justine focused on tightening up their hero section on the PLP, iterated on making improvements to their PDP: creating more information hierarchy, reducing clutter and decision fatigue by limiting options, and conceptualizing a wizard tool. The cart was also updated to make the subscription callout more prominent. The goal in redesigning these sections was to ensure information would be legible and more accessible for users.
Product Landing Page
The client wanted a tighter design of their PLP and to be able to see products on desktop and within the mobile viewport upon landing on the page. The solution Justine came up with was to reduce the height of the hero image and category description. Thus, providing users with quicker access to products and potentially reducing user drop-off.
Solution
Reduced height of hero image to show more within the viewport. Darkened the colour block behind the copy to create higher visibility.
Reduced character count for headings and category descriptions. Users like succinct descriptions, especially on mobile.
Added a ‘Top FAQs’ modal that provides users with more insight on products, allowing them to make the best decision for their pet.
Updated PLP Mobile
Updated PLP Desktop
Product Detail Page
The client wanted a more well defined page with better information hierarchy, that would effectively communicate relevant details to drive sales. Below the path-to-purchase details Justine looked at defining important product call-outs and carousel upsell by creating modular sections to make the information more digestible and visually appealing.
Below, Justine defined the problems found with the previous PDP design and the updates made to them. By making the following updates and removing the single purchase option, it places more emphasis on the automated subscription option and significantly reduces clutter. The overall flow of information in the updated PDP is more succinct and refined. This is seen through better use of typography, modular blocks of information, and clear callouts in green, that act as a visual indicator leading the eye down the page.
Problem
Too much negative space around product images.
PDP lacks consistency and has poor hierarchy.
Product descriptions are too long and the price is too prominent.
Option for single purchase is confusing.
There are no reservation busters.
Solution
Repositioned heading and reviews above image, so it is visible on load.
Made sure all product images are 1:1 ratio and full bleed on mobile.
Added prominent controls to scroll through product images.
Moved the price into the add to cart button.
Truncated the product description to only show 3 lines of copy on load, with a ‘Read More’ link to expand additional information.
Created a single select radio button for subscribing to automated delivery. Removed the single purchase radio button.
Designed reservation busters to sit below the add to cart button.
Old PDP on the left and updated on the right.
Wizard Tool
Below are designs for the Open Farm Wizard Tool, the tool helps pet parents find the right amount of food when subscribing to regular delivery.
The grey boxes are placeholder for a moving illustration, Justine provided the concept of a dog walking to his/her bowl. By providing information on age, weight and level of activity we can help guide the parent to the best subscription option for them and their pet. Prior to selecting an option on the final screen the user would be able to adjust their selected responses.
Cart Update
Prior to the update, the position of the subscription callout was overarching all products at the top of the page. By adding the callout within each individual product card it is clearer to the user which products have a delivery subscription.
