Pet Haven

Overview 📝

Pet Haven is a fictional animal hospital. The focus was to research best design practices. The interface would be coded in Glitchhub using basic HTML and CSS. 

Details 🖇

🗓 Timeframe: 3 Weeks (2021)
🧑🏽‍💻 Role: UX/UI Designer
👥 Team: Solo Project
🧰 Tools: Figma, Glitchhub, Photoshop

THE PROBLEM

Information Overload

Animal hospitals have an immense amount of information to communicate to current and potential clients. This can lead to an overwhelming amount of text when the user should be able to get the information they need quickly and without frustration.

Discover

🔎

Discover 🔎

RESEARCH & ANALYSIS

Local Competitive Audit

Basing solution on competitor strategies and research. Local competitors have a cluttered or unwelcoming feel to their website interfaces. 

USER ANALYSIS

Analyzing User Archetypes to identity common needs, behaviors, and thought patterns. 

Common Behaviors

Ideate

💡

Ideate 💡

WEB STRUCTURE

Flow and placement of site pages

Sitemap


POTENTIAL DESIGN

Sketches & Wireframes

Ideation of page designs based on feedback and testing

Design

🎨

Design 🎨

SOLUTION + FINAL SCREENS

Designing a clean & welcoming interface

Through research and competitive analysis, an interface was designed with user behaviors in mind. Limited and consistent color palettes, color blocking to categorize information visually, and proper use of whitespace throughout the website. 

Reflection

📌

Reflection 📌

WHAT I’VE LEARNED

When focusing on the UI aspect of this project I was able to train my ability to analyze competitors through a visual audit. Taking account of common trends within the competitor space allowed me to realize what works and how to apply it differently to the brand I am working with. This was my first UI project so there were various iterations based on feedback.

Thank you for viewing!

Learning from competitors

Lotus