UI/UX DESIGN
Purrfectly Peppy Pet
A website redesign for Purrfectly Peppy Pet Veterinary Hospital focused on improving functionality, accessibility, navigation, and branding while creating a welcoming and professional experience for pet owners.
● PROJECT OVERVIEW
Improving the Purrfectly Peppy Pet Experience
The Purrfectly Peppy Pet Veterinary Hospital website communicated essential information, but the existing design had problems with navigation, appointment access, readability, accessibility, and branding consistency. The redesign focused on creating a clearer structure, stronger calls to action, improved accessibility, and a more consistent visual identity.
Project Type
Website Redesign
Deliverables
Home
About
Services
Contact
High-Fidelity Website Mock-ups
Primary Goals
Functionality
Accessibility
Branding
TOOLS & SKILLS
Tools & Skills
The project combines website design, visual communication, layout, and front-end implementation across a multi-page digital experience.
Website Redesign
UI/UX Design
User Experience
Visual Hierarchy
Information Architecture
Accessibility
Responsive Design
Typography
Brand Consistency
Visual Communication
Web Design
● USER RESEARCH
What Users Said About the Existing Website
01 ─────
Navigation
55% of respondents found the website difficult to navigate, while only 10% considered navigation very easy.
02 ─────
Finding Information
85% of respondents said they did not find the information they were looking for, and 65% said it took more time to find information.
03 ─────
Content Organization
70% of respondents said the content was not organized consistently.
04 ─────
Readability
45% of respondents said the fonts used on the website were not legible.
● DESIGN CHALLENGE
Addressing the Existing Website Problems
01 ─────
Navigation & Hierarchy
The existing website had difficult navigation and unclear menus. The redesign prioritizes a simplified navigation bar, stronger hierarchy, and a clearer flow of information.
02 ─────
Appointment Access
Users experienced difficulty accessing emergency information and booking appointments. The redesign introduces prominent “Book Appointment” calls to action in the header and footer.
03 ─────
Accessibility
The existing design had insufficient color contrast, missing alternative text, unlabeled form fields, limited keyboard support, and problems adapting to smaller screens.
04 ─────
Brand Consistency
The existing site used inconsistent fonts, colors, and branding elements. The redesign establishes a clearer typography system, consistent colors, and a more unified visual identity.
● process
From User Feedback to Final Design
The redesign process was guided by customer feedback and an analysis of the existing website. The findings were translated into improvements for navigation, appointment access, accessibility, branding, and responsive usability before being developed into high-fidelity website screens.
01
User Feedback
Voice-of-the-Customer feedback identified issues with navigation, finding information, content organization, and readability.
02
Website Analysis
The existing website was evaluated to identify problems with navigation, appointment scheduling, branding consistency, visual hierarchy, and accessibility.
03
Design Improvements
The identified issues informed changes to navigation, calls to action, service presentation, accessibility, typography, and branding.
04
High-Fidelity Redesign
The improvements were developed into high-fidelity designs for the Home, About, Services, and Contact pages.
● DESIGN ANALYSIS
From Problems to Design Priorities
01 ─────
Functionality
Simplified navigation, prominent appointment buttons, clear calls to action, logical page flow, and service icons improve the site’s functionality.
02 ─────
Accessibility
The redesign follows WCAG-focused recommendations including stronger color contrast, alternative text, keyboard-friendly navigation, visible focus states, descriptive buttons, and legible typography.
03 ─────
Branding
The redesign uses a consistent typography and color system while maintaining the warm and caring character associated with veterinary care.
04 ─────
Responsive Design
The redesign addresses the original site’s mobile limitations through improved spacing, legible typography, and a responsive layout.
● BRAND & ACCESSIBILITY SYSTEM
Building a Consistent & Accessible Visual System
The visual system combines the Purrfectly Peppy Pet brand style with accessibility considerations to create a consistent, readable, and user-friendly website experience.
Brand Style Tile
The brand style tile establishes the visual direction for the Purrfectly Peppy Pet Veterinary Hospital website through its typography, color palette, and visual identity.
Typography
01 ─────
Montserrat Semi-Bold
Headlines
02 ─────
Montserrat
Sub-headlines
03 ─────
Aleo
Body Copy
Color Palette
#D03531
#000000
#B88E82
#D2BCB2
#FFFFFF
#BCCCEL
Accessibility
Color Contrast
Maintain strong contrast between text and backgrounds.
Readable Typography
Body text should be at least 16 points, with smaller text reserved for less important information.
Accessible Forms
Form labels, contrast, validation, and instructions should be clear.
Navigation
Links and buttons should be meaningful and clearly identifiable.
● WEBSITE REDESIGN
A Clearer Purrfectly Peppy Pet Experience
Simplified Navigation
A consistent navigation bar makes the main sections easier to locate.
Clear Calls to Action
Prominent “Book Appointment” buttons make appointment access easier to identify.
Organized Services
Service cards and icons help users recognize and explore veterinary services more quickly.
Accessible Contact Experience
The contact page provides appointment and contact information through a more structured and accessible form layout.
● INTERACTIVE PROTOTYPE
Explore the Interactive Prototype
● NEXT PROJECT
Funktasy Internship
Visual Design / Social Media / Branding
Experience the final interface and explore how the differentscreens and interactions come together in the completed product.
