Rožinė Pėdutė – Website Design
Designing a modern, responsive website for a Lithuanian cat shelter to help them showcase their cats and get donations. This project was done in collaboration with Webdoc.lt team.
Scroll down below to find out the key points about this project.
Contents
Project Overview
Rožinė Pėdutė is a non-profit animal shelter based in Lithuania, primarily focused on taking care of cats. They needed a modern, responsive website to showcase their cats and gather donations. The project was done in collaboration with Webdoc.lt team, where I worked as a UX/UI designer.
Client Requirements
- •Modern, responsive, and clean website design
- •Showcase available cats and upcoming events
- •Clear way to ask for support/donations
- •Mainly pink with some beige color scheme
The Goal
Create a modern, user-friendly website that effectively showcases the shelter's cats and makes it easy for visitors to support the cause through donations and adoptions.
My Role
UX/UI Designer — Analysing and refining existing wireframes and creating visual website design (high-fidelity wireframes).
Tools Used
Key Design Decisions
Color System
Their brand colour is light pink, however I used a darker shade of pink for buttons and lighter shades for other elements, complemented by beige as a secondary color. This combination ensures accessibility while maintaining the warm, welcoming feel appropriate for an animal shelter.
User Experience
- Clear CTA buttons for donations throughout the site
- Colored gender symbols for easy cat identification
- Detailed cat information tables for quick scanning
- Breadcrumbs for improved navigation
- Highlighted donation options with icons for better visibility
Design Process
1. Research
Due to budget and timeline constraints, I couldn't do a full research and user interviews, but I conducted a focused research approach instead:
- Analyzed similar animal shelters' websites in Lithuania
- Used ChatGPT to identify key user needs and pain points
- Reviewed Webdoc's initial wireframes
Analysing existing wireframes
Sample of homepage wireframes, which I later edited. There were a few other wireframes which needed analysis and refinement.
2. Ideation
The sitemap was already developed by the Webdoc team, so following discussions and confirmation of the Information Architecture, I had a clear understanding of the navigation structure and user journey. This foundation facilitated the ideation phase and streamlined the overall design process, allowing me to focus on user experience optimization and visual design solutions.
3. Design System
Created a comprehensive design system to ensure consistency and efficient development. Used variables for spacing, radius, colours and typography for quicker and easier hand off to developers.
Typography
Selected Inter font that balance readability and modern look. More font choices were offerted to client but they were happy with Inter. Used variables for consistent sizing.
Color System
Developed a color palette using variables for:
- Primary pink shades (buttons, accents, some cards)
- Secondary beige tones (backgrounds, cards)
- Neutral colors (text, borders)
Used a contrast checker to ensure that the colors are accessible and readable.
Contrary to the default colour shade naming 50-900, I used more explanatory names that were requested by Webdoc developers. The naming system focused on lightness-darkness as well as the use case.
Components
Every section in the design was created using proper auto layout and components to ensure quick development for both web and mobile screens.
4. High Fidelity Design
Created detailed designs for 12 pages, including:
- Homepage with featured cats and events
- Cat listing and detail pages
- Donation and support pages
- Blog with events and details
Final Result
Visual Design
Created a warm and welcoming design using:
- Soft pink and beige color palette
- Rounded UI elements for friendliness
- High-quality cat photography
- Clean, modern typography
User Experience
Focused on creating an intuitive experience:
- Clear navigation structure
- Easy-to-find information
- Responsive design for all devices
- Accessible color contrast
- Great browsing experience on all devices
Soon you will be able to view this website online
See liveOutcomes & Feedback
Client Feedback
We really like the clear, simple layout. It is easy to understand and navigate. We are happy with the design, it's modern look and colours.
Project Impact
For the Shelter
- Professional online presence
- Better cat adoption process
- Easier donation process
For Users
- Easy cat browsing
- Clear donation options
Reflection & Learnings
Key Takeaways
- Learned to balance creativity and the design process within technical requirements and budget constraints
Potential Improvements
- Further user testing could have validated design decisions more thoroughly. Unfortunatly, I was not able to do this due to the time and budget constraints.
- I would like to contact the shelter later on to see what feedback they get about the website.
