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!