Freelance Design
As a seasoned designer with over a decade of diverse experience. Specializing in graphic design, exhibit design, 3D rendering, and UX/UI design, I leverage design as a powerful problem-solving tool.
This project will transform the non-profit’s website to better serve its mission and users. The redesign will focus on creating a clean, intuitive, and mobile-responsive site that improves user experience, increases engagement, and simplifies key actions, such as browsing adoption listings and submitting forms. We will also streamline navigation to make it easier for visitors to explore the site and donate to the rescue. Additionally, we’ll provide rebranding suggestions to ensure the website’s design aligns with the organization’s values and resonates with its audience.
Age: 30s
Income: Middle class
Occupation: Office Jobs
Location: White Bear, MN
Relationship Status: Married
Alex and Robin are considering adopting a cat. They have discussed their desire for a companion and believe a cat would be a good fit for their current lifestyle. The cat should be tolerant of dogs and kids as they are planning their future. They are particularly interested in adopting from a local rescue, Wags & Whiskers, as they want to support their mission.
As an individual or family seeking to adopt a pet, I want an organized and easy-to-navigate website so that I can quickly find detailed information about animals and facilitates a smooth adoption process.
The current hero image/banner provides a poor initial user experience, lacking visual appeal and failing to effectively introduce the brand.
Chewy Wishlist and Amazon Wishlist displayed with inconsistent formatting and the footer is disorganized low contrast with the colors of pink on white.
Important site elements are grouped in the right sidebar, as well as in the navigation. They can be easily overlooked or cause confusion due to duplication.
Structure page content with clear visual hierarchy (headings, subheadings, white space), remove sidebar and keep all selections just in the nav, Redesign the wishlist for better clarity to users, and redesign hero and footer
We preformed a inventory and audit of the content of the website to evaluate all of the content on the site and hierarchy of items that needed to be addressed first.
Duplicate menu items ("Events")
Confusing menu labels ("Adoption Process" vs. "Forms")
Difficulty finding key information (adoption forms)
Paragraph Consolidated navigation and clear menu structure for improved user experience.
We developed two distinct form versions. The first version adhered to a more conventional form format while enhancing the overall organization compared to the existing form. The second version employed a fixed screen size, preventing the need for scrolling.
Each team member conducted user testing sessions with 2-3 participants, guiding them through both versions of the adoption form.
We encouraged participants to verbalize their thoughts and reactions, focusing on their understanding of each section, ease of completion, and the intuitiveness of navigation.
We asked each participant to choose their preferred form version and explain their reasoning.
Our initial A/B testing revealed a near-even split in user preference between the two form versions, highlighting the strengths of each design.
Analysis of user feedback revealed key preferences for specific features. Users preferred the progress bar, navigational sidebar and the “save & next” feature in the dog adoption form (A).
The cat adoption form (B) excelled in its pet selection feature, household listing feature, and overall form structure. Users found these elements more intuitive and user-friendly.
Defined Brand Guidelines: Established clear rules for using brand colors, typography, and visual elements.
Created an Asset Library: Developed a central repository of icons and assets for easy access and consistency.
Established a Branding Library: Created a comprehensive guide with various logo versions for different uses.
Standardized Form Elements: Designed consistent form elements (buttons, inputs) for a unified user experience.
Created Reusable Components: Developed consistent page components like headers, footers, and navigation bars for efficiency.
Established clear rules for using brand colors, typography, and visual elements.
Developed a central repository of icons and assets for easy access and consistency.
Established a Branding Library:
Designed consistent form elements (buttons, inputs) for a unified user experience.
Developed consistent page components like headers, footers, and navigation bars for efficiency.
The original brand colors were retained, with a darker pink added for contrast. To address the lack of variation in color combinations, we incorporated deep teal and verdigris, creating a balance of warm and cool tones. Finally, the stark white was softened for a more refined aesthetic.
We chose Chewy for our logo and display font to add a playful, organic touch, while Open Sans serves as our primary font for its readability and versatility. Both are available on Google Fonts for seamless website integration.
Our icons are modern, friendly, and playful, with rounded corners that complement Chewy’s bubbly style, reinforcing an approachable brand identity.
we focus on natural, candid moments between people and their pets, showcasing diversity across age, ethnicity, and lifestyle to create an inclusive and emotional connection.
One of the challenges was combining everyone's ideas into one cohesive design. A challenge was synthesizing everyone's unique erspectives into a unified design.
We collaborated closely on this project, and everyone contributed effectively to their respective parts. We began by observing the website together, discussing our initial impressions, and identifying areas for improvement. Each team member took responsibility for a specific section and worked on restructuring it in the most efficient way possible. Meg worked on Home Page, Courtney worked on Cat adoption form and I worked on Dog adoption form.
Once we finalized the structure, we moved on to wireframing. Each of us designed a page independently and then shared our concepts. We provide constructive feedback and remained open to suggestions from one another. By working through the feedback and combining best elements from everyone’s work, we were able to refine our designs to achieve the best possible outcome.
What worked particularly well for us was the balance between independent thinking and collaborative refinement. The continuous exchange of feedback and openness to others' ideas played a key role in the project's success. We also tested different versions of our designs with individuals outside our team, collected their responses, and used that input to further enhance the design.