Overview
PetSmart mobile iOS app redesign based on a Nielsen Norman Group's Usability Heuristics comprehensive evaluation. I worked with one other designer (Lisa D.).
Brief: To evaluate the usability of an existing digital product by conducting a heuristic evaluation.
Product: PetSmart mobile iOS app
Product: PetSmart mobile iOS app
Role: Lead UX Designer
Skills: Heuristic Evaluation, Product Redesign, Effective Presentation, Project Management
Timeline: 2 Weeks
Product Summary
To add value and resourcefulness for their customers, PetSmart built a mobile app for every step of a pet parent’s journey. However, these values and motivations are poorly reflected on the app.
While ranking #83 for shopping category, the PetSmart app currently has a rating of 2.5 Stars.
Users have left reviews saying how the app is “very aggravating to use”, how it’s “horrible” and how it’s “not user friendly” at all.
Source: Apple App Store Reviews (December 2021)
Evaluation
Task Selection
We decided to pursue the PetSmart app's usability evaluation, with a focus on the browsing until the check out process.
Tasks include browsing for guinea pig pellets, adding to cart and completing the checkout process.
Heuristic Violations
Keeping in mind Nielsen Norman Group’s 10 Usability Heuristics throughout the evaluation, we found numerous violations throughout the task flow. These are the Top 4 recurring violations:
• User control and freedom
• Consistency and standards
• Flexibility and efficiency of use
• Aesthetic and minimalist design
Severity Evaluation
It's important to note that the overall visibility of system status is good, and that navigation bar can be improved across all pages.
We observed a total of 28 violations based on 6 heuristics. With the high number of occurrences, we rate this app to be at least a 2 out of 4 on the severity scale. They are mostly cosmetic & minor usability issues, however, they are numerous.
Violations Trend Graph of most recurring violations
Design Improvement Plan
We considered the amount of effort and value required for each opportunity and addressed the ones relevant to our task flow using this Design Prioritization Matrix.
We prioritized the tasks accordingly:
• Low Effort, High value
• High Effort High Value
• Low effort, Low Value
• Low Value and High Effort
Design Prioritization Matrix
Brand Guide
We made sure to follow PetSmart’s Brand Guide, with the font being Open Sans and the colours being white, blue and red. We also redesigned the app using an iPhone 13 dimensions.
PetSmart Brand Guide
Landing Page
Resolved Violations
• moved PetSmart logo aside, standardized the typography, scroll and button components for aesthetic and consistent design
• added store location option for user control
• added voice input for accessibility
• consolidated Treats page and Treats Trails page on navigation bar for efficiency of use
Landing Page Frames, Before and After
Search Results Page
Resolved Violations
• added a more comprehensive sorting and filter option display for greater user control and flexibility
• added a keyword display for recall
• included a display of the existing star rating system for extra help and recognition
Search Results Page Frames, Before and After
Filter Feature
Resolved Violations
• organized filter options into distinct categories for efficiency of use
• added sticky Reset and Save buttons for user control
Filter Feature, Before and After
Item Page
Resolved Violations
• added back button control for user control
• improved placements of buttons for efficiency of use
• removed promotions for now to standardize with other apps
Item Page Frames, Before and After
Add to Cart Page
Resolved Violations
• removed the prompt to pick delivery option right after clicking the add to cart button for user control and freedom, and flexibility and efficiency of use
• delayed the delivery prompt until the checkout process where it’s usually found for consistency and standards
• added an active indication to the cart icon to show added item, but kept the same page for recognition
Add to Cart, Before and After
Cart Summary Page
Resolved Violations
• standardized QTY, Delete and Checkout buttons for consistency
• added custom donation amount for flexibility
• shifted the Promotions to this page instead, with a suggested applicable coupon
• removed premature option to pay with Apple Pay for efficiency
• added Treats modal, instead of previous display on every page to save screen real estate
Cart Summary Page Frames, Before and After
Checkout Process Page
Redesign Solutions
• added progress bar and minimal email sign up for recognition
• added flexible payment options
• added confirm page and summary page
• moved the Shipping Options page within the checkout process for a more logical progression, and added DoorDash information icon for help and documentation
Checkout Process Frames, Before and After
High Fidelity Prototype
Task Flow
• search "guinea pig"
• click to see available filters & go back
• click Oxbow adult guinea pig pellets
• add item to cart, check cart summary
• checkout item & skip Treats modal
• complete checkout process
Conclusion
Design Impact
Our team was able to resolve every task on our Design Prioritization Matrix, as well as the tasks that came up during the process. The PetSmart redesign provides a more seamless and delightful experience for both new and existing users. With this, we hope to alleviate the common frustrations based on real customer feedback on the App Store, increase the app star ratings, and increase app downloads.
Next Steps
Although challenging due to the numerous violation occurrences, we believe that the redesigned version has resolved the major task interruptions and violations. With more time, we hope to conduct at least 2 rounds of usability tests and create high-fidelity iterations accordingly to ensure proper usability.