Project Overview: Vet Clinic Wireframing and Prototyping

This project was completed as part of my BA in Graphic Design and Media Arts, with a concentration in Web Design curriculum. It demonstrates my ability to meet specific project briefs, adhere to deadlines, and apply design theory to simulated or real-world client scenarios.

Role: Lead UI/UX Designer

Tools: Figma, FigJam (User Flows)

Timeline: 6 weeks

The Challenge

The clinic’s original website was a significant barrier to patient care. It suffered from a "wall of text" layout, broken links, and a lack of mobile responsiveness. Pet owners struggled to find information or book appointments, leading to increased call volumes for the front desk and frustration for clients in high-stress situations.

The Solution

To transform a dated, dysfunctional site into a streamlined, "mobile-first" digital hub that builds trust and simplifies the booking process for busy pet parents.

Phase 1: Low-Fidelity Wireframes (The Blueprint)

Before diving into aesthetics, I focused on Information Architecture. Using Figma, I built low-fidelity wireframes to strip away the visual noise and solve the structural issues.

• Priority Navigation: Moved "Emergency Care" and "Book Appointment" to persistent, high-contrast buttons.

• User Flow Optimization: Reduced the clicks required to schedule a visit from five down to two.

• Content Hierarchy: Reorganized dense medical descriptions into digestible, icon-based service cards.

• 
  

Phase 2: High-Fidelity Mockups (The Solution)

The transition to high-fidelity in Figma focused on empathy and accessibility.

• Visual Language: Implemented a calming color palette to reduce anxiety for users dealing with sick pets.

• Responsive Components: Leveraged Figma Auto Layout and Variables to ensure the design scaled perfectly from desktop to smartphone.

• Interactive Prototyping: Created a clickable prototype in Figma to demonstrate the seamless transition from the landing page to the confirmed appointment screen.

The Result

The final mockups provided a clear, professional roadmap for development. By solving the initial navigation "nightmare," the redesign:

• Streamlined the appointment request process.

• Improved visibility for emergency services.

• Created a cohesive, modern brand identity that reflects the high level of care provided by the clinic staff.