Pet Smart Web Redesign
Project objective:
Improving the purchase flow and strategically highlighting the delivery options through improved UX and layout
Project timeline:
4 weeks
Role:
UX Design, Competitor Analysis, User Testing,
Interaction Design, UX Strategy
B2C
Interaction Design
UI enhancement
User testing
Accesibility
Business impact:
‣ Conducting competitor analysis in conjunction with user research to prioritize pain points that elevate Pet Smart's strategic positioning
‣ Accelerating customer journey through decision making, by highlighting the most important information and reducing confusion through intuitive design and readability enhancement
‣Elevating Pet's Smart competitive advantage (Same-day Delivery option) through clear visual hierarchy and improved user flow
Problem definition: Focusing on elevating USP
Amongst all the UX and UI issues that I could have focused on, I have decided to choose a specific user flow for 2 important reasons:
User research. Ideally, I always let the user research lead the problem definition and this case was no different. Research illustrated some major pain points in the flow and the potential consequences of existing friction, such as customers choosing the wrong delivery method by mistake and realizing after the order has been placed.
Strategic business impact . What makes the pain points critical, apart from frustration they cause for the user, is the immense impact on the business (from failing to convert visitors to new customers, to losing existing customers to poor experience).
Not solving this problem also means the company is currently running operations costs in resolving the aftermath of those issues.
Actually there was a 3rd one…
Competitive advantage. Pet Valu, which is Pet Smart's direct competitor, has 3x more stores than Pet Smart in GTA (Toronto, Canada) area.
Pet Valu thereby makes its products accessible to the customers in a time sensitive manner through in-store sales and pick-up options. User research confirmed that getting products fast was in fact an important factor in choosing, which pet store to buy from. By providing Same Day delivery service, Pet Smart holds a competitive advantage.
I have decided to validate this finding further and conducted a competitive analysis that specifically focused on factors for retention and convenience.
Competitive Analysis
The user flow for choosing a delivery option and adding items to cart is one of the most important ones (generally speaking in e-commerce setting) but more so when it acts as a differentiator from its competitors.
Arguably, it also what draws some of its current customers and is responsible for a (significant) percent of customer conversion as validated by research and analytics.
Defining Problem: Pain Points Overview
User Testing Findings
Coupons for the win!
I have tested both version with users - the original design as well as the redesigned product page. The coupon design received the most positive feedback and something users noticed right away. Some participants couldn't even recall if they saw any coupons/promos on the original design. This confirms the original hypothesis that overuse of red colour can actually have the opposite effect instead of the desired emphasis.
Oh Canada!
Initially, I have added a flag icon at the top bar along with "CAD" addition to all prices as indicators for users that they are in fact on a Canadian version of the site. Pet Smart has a US version which has a very similar look and feel, and some users mentioned often confusing the two and only realizing once at the checkout - understandably making it a frustrating experience.
The user testing however, revealed that it might have an opposite effect as this quote suggests.
To account for both of these user perceptions, I have decided to create more visibility to the closest store location. Currently, it is hidden in the navigation bar under My Store. Bringing it out to the main panel, and strategically placing it next to the search button can help to mitigate some of the potential confusion that pricing and flag icons might create for some.
Doordash logo consideration.
To know or not to know?
While some users noticed the Doordash logo in redesign, one user mentioned how his immediate thought was whether that would mean extra delivery costs (including tipping). He admitted that it would be a consideration factor, potentially against this delivery method.
Other two users however raised the concerns over lack of transparency with the original design and mentioned how the difference between Same Day delivery and Ship to me option is confusing. They weren't sure if that means different shipping companies, or different costs associated with two. The fact that they ship from different places and therefore stock levels might be different weren't clear.
Overall, it felt that the desire for transparency was more important than managing perceptions that might be associated with delivery partner such as Doordash.
I however decided to go with alternative that addresses both of these things, providing transparency but reducing potentially negative perceptions (After User Testing).
One size fits all?
Scenario: the customer knows that the product exists in different sizes. The product page only lists one size, which makes it unclear if Pet Smart doesn’t have alternative size, it is temporarily out of stock or whether it is sold at a different page for that given size.
I have implemented the improved design for size information that ensures visual consistency, whether the product is available in various sizes or only one.
One option was to implement the dropdown that already exists on other product pages however if the product is only sold in one size on Pet Smart, including information about other sizes unavailablity might make it more confusing for the user.
As a result, I opted in for a laid out tile design, which provides visual transparency, eliminating the need to click on the dropdown menu. While that addition to UX may seem minor, it also ensures visual consistency across pages (with products that are sold only in one size can be shown as one tile). Those that have multiple sizes but some are out of stock are unavailable can be greyed out.
In addition, this design also adds intuitiveness, implemented by many large retails such as Amazon and in line with Jacob’s Law of UX.
Wireframes
Final Redesign
(only identified pain points)
While initially I targeted the specific areas for the Product page redesign, usability testing revealed other critical pain points that directly influence the selection of delivery options and purchase flow. One such example is displaying the store information in navigation, which doesn't only quickly let the users know about the Pet Smart's physical presence, but also serves as an orientation point (some users admit to accidentally finding themselves at US website version).
Other additional implemented changes are:
Decluttering of the top navigation
Removing 'My store' from the menu bar and moving it above and displaying additional information such as Location and Hours
Changing the look of the Promotion message (removing the red colour and creating emphasis through a different aesthetic)
Final Redesign (elevated UI)
Reflections
When less is more…
This redesign is a perfect example of designing within the limits of the existing interface and potential technical restrictions. Being mindful, that the decisions made by the design team at Pet Smart is most likely a reflection of those technical limitations.
I have tried not to divert too much from the UI and available components, thereby illustrating how small and subtle changes can still make a significant impact on the user experience.
Some research is always better than NO research.
One thing that never stops to amaze me is how much difference user testing makes. Even if it is quick and dirty guerrilla research, due to such things as budget constraints and time limits. it still makes the world of difference. This project was no exception.
User testing revealed the important related elements in the identified user flow that didn't initially come to mind. And as always, it opened up my mind to the multitude of interpretations of what to me felt like a straight forward design decision.
In the end, it helped to think critically about the proposed changes, and iterate my designs in a way that takes into account the holistic UX experience (including context such as existing perceptions of things like Doordash delivery service or the meaning of the flag icon for changing the country - see details above).