Purrfectly Peppy Website Redesign
Enhancing Usability and User Experience
This project involved a comprehensive redesign of the Purrfectly Peppy Veterinary Hospital website. The goal was to address critical usability issues and improve the overall user experience. The redesign had a significant impact on the website’s functionality, visual appeal, and accessibility, ultimately aiming to increase user satisfaction and engagement.
Overview
Setting The Context
When was this work done?
The project was undertaken over a period of two months, starting in November and concluding in December 2023.
How long did this take?
The project duration was approximately 8 weeks, including research, design, testing, and final implementation.
Overview of what’s to come in this case study:
In this case study, we will explore the problems faced by the original Purrfectly Peppy website, the constraints and assumptions we dealt with, the process followed to redesign the website, and the final solutions implemented. We will also discuss the impact of these changes, the challenges encountered, and the key takeaways from this project.
The Problem
Defining the Problem
What’s the problem?
The original Purrfectly Peppy website had significant usability issues, including poor navigation, inconsistent content organization, low visual appeal, and accessibility problems.
Users who could not find the information they were looking for.
85%
Users who found the website difficult to navigate.
55%
Users who rated the website’s visual appeal positively.
15%
Users who indicated dissatisfaction with the website’s content organization.
70%
Users and their needs:
The primary users are pet owners looking for veterinary services and information. They need an easy-to-navigate, visually appealing, and informative website to quickly find relevant information about services, staff, and pet care tips.
Importance of the problem:
Improving the website is crucial for user retention and satisfaction, which directly impacts the hospital’s ability to attract and serve its clients effectively.
Purrfectly Peppy Original Website Design
Constraints
Metrics
Constraints:
- Assumptions: Users prefer a visually appealing and easy-to-navigate website.
- Blockers: Time constraints.
- Timeline: 8 weeks.
- Scope: Comprehensive website redesign including navigation, content organization, visual design, and accessibility.
what outcomes do we want to see?
here’s the predicted outcome we’re designing for —
Desired Outcomes
- Increase in user satisfaction.
- Improved website navigation and content discoverability.
- Enhanced visual appeal and consistency.
- Compliance with accessibility standards.
Behaviors to Drive
- Positive Behaviors: Encourage users to explore more pages and engage with the content.
- Strategies: Simplify navigation, use clear call-to-actions, and enhance visual elements.
what does success look like?
everybody wants to win, here’s how we defined success
Metrics
User satisfaction ratings, navigation ease, content discoverability, and accessibility compliance.
Measurements
User surveys, website analytics, and accessibility audits.
Process
Here’s how it’s done
Research and Analysis:
We began with extensive research, including user surveys and heuristic evaluations, to identify key pain points. The surveys revealed that 85% of users struggled to find information, 55% found navigation difficult, and only 15% found the website visually appealing.
Design Phase:
- Low-Fidelity Mockups: We created low-fidelity mockups to address structural issues. These mockups focused on improving content hierarchy and navigation usability.
- High-Fidelity Wireframes: Next, we developed high-fidelity wireframes incorporating user feedback. These wireframes included improved visual design, consistent content organization, and enhanced accessibility features.
- Low-Fidelity Mockups: We created low-fidelity mockups to address structural issues. These mockups focused on improving content hierarchy and navigation usability.
Testing:
We conducted usability testing with a sample group of users. The testing phase involved iterative adjustments based on user feedback, ensuring that the design met user needs and preferences.
The final implementation involved a complete overhaul of the website’s design. We focused on:
- Navigation Usability: Improved menu structures and intuitive page layouts.
- Consistent Content Organization: Standardized formatting and clear headings.
- Visual Appeal Enhancement: Refined color scheme, consistent application of brand colors, and optimized imagery.
Solution
Metrics
The final solution included:
- Enhanced Navigation Design: We revised the navigation structure to be more intuitive, implemented clearer menu labels, and incorporated a mega menu for better accessibility.
- Consistent Content Organization: We standardized the content format, ensuring that headings, subheadings, and body text were visually distinct. This improved readability and information retrieval.
- Unified Color Palette and Typography: We ensured consistent application of the brand’s color palette and typography. Montserrat and Aleo fonts were used uniformly across headers, subheaders, and body text.
- Improved Accessibility: We addressed noncompliant components, such as color contrast and font legibility, ensuring the website met accessibility standards.
Impact
Here’s how it’s done
The redesign significantly improved user experience and met the project’s goals based on the following indicators:
- Content Discoverability: The improved content hierarchy enabled users to find the information they were looking for more easily.
- Navigation Ease: Enhanced navigation design led to a noticeable reduction in users finding the website difficult to navigate.
- Visual Appeal: The visual appeal of the website improved, reflecting the consistent application of the brand’s color palette and typography.
- Accessibility Compliance: Adjustments to color contrast and font legibility ensured compliance with accessibility standards, addressing user concerns effectively.
The redesign effectively addressed the critical areas identified in the user surveys:
- Improved Content Discoverability: Users found it easier to locate the information they needed.
- Easier Navigation: Users experienced smoother and more intuitive navigation.
- Enhanced Visual Appeal: The website’s visual appeal was notably improved.
These improvements validated our design approach and demonstrated a significant enhancement in user experience and satisfaction.
Challenges
Takeaways
Not everything went as planned:
- Compromise: We prioritized essential usability improvements and deferred some features for future iterations.
- User-Centered Design: Continuous user feedback is vital for addressing usability issues effectively.
- Collaboration and Iteration: Effective teamwork and iterative testing are crucial for successful redesigns.
- Prioritization: Strategic prioritization of features is essential when working with constraints.
- Early and Continuous Feedback: Engage users early and throughout the design process.
- Clear Prioritization: Focus on high-impact changes first to manage constraints effectively.
- Flexibility and Adaptability: Be prepared to adjust plans based on feedback and constraints.