Intro
What is the problem?
Generally, the adoption process is a difficult one, involving numerous stages and often dampening people's enthusiasm for bringing a new animal into their lives. Shelters and those wishing to propose animals for adoption also face the same issue, encountering challenges in the adoption process and in their efforts to find a loving home for animals. These obstacles can discourage both potential adopters and those trying to find a new home for the animals they care for.
How can we address these significant challenges related to the adoption process for animals and efforts to find loving homes for them?
Our Role and Design Thinking
As a UX/UI Designer, my mission is to create a pleasant and intuitive digital experience for the users of the Lucky Paws application. This involves understanding the needs and behaviors of users, developing user-friendly interfaces, and iteratively testing to ensure an optimal experience for all users. Design Thinking is my primary methodological approach in developing the Lucky Paws application. This process begins with a deep understanding of user needs and desires, identifying challenges and opportunities, and generating innovative, user-centric solutions.
Define
Ideate
Prototype
TestPotential solutions and objectives
To address the significant challenges encountered in the adoption process for animals and in efforts to find loving homes for them, we have identified four possible solutions.
Simple and Accessible Platform
Development of an easy-to-use technological platform that facilitates the adoption process for all users, regardless of their level of expertise in technology.
Transparency and Efficient Communication
Promoting transparency regarding the status and history of each animal available for adoption and facilitating efficient communication between adopters and shelters.
Supporting Shelters and Animal Caregivers
Providing resources and support for animal shelters and caregivers to improve the adoption process and ensure proper care for the animals.
Community Education and Awareness
Increasing awareness and education in our community regarding the importance of responsible animal adoption and the benefits of bringing an animal into the home of a loving family.
Empathize
Lean ux canva
(Problem Definition)
In the absence of access to real users for interviews, we utilized alternative methods to gain a deep understanding of the problem and their needs. We implemented the Lean UX Canvas to generate ideas about potential problems, users, outcomes, and challenges. This approach allowed me to gain an initial perspective and shape the direction for our design process.
What I found
Business Problem Insights:
Complexity, Lack of Information
Business Outcomes Insights:
Adoption Rate, User Feedback, Number of Donations
Users Insights:
Shelters, Individuals Unable to Afford the Animal They Take, Individuals Seeking Adoption with Various Needs
Solutions Insights:
User-Friendly Interface, Advanced Filtering, Educational Assistance
Hypotheses Insights:
Simplification of the Adoption Process, Customization of Matching, Educational Support
Important Things to Learn First Insights:
Technical Complexity, Data Security, User Satisfaction
Define
Site map
In Lucky Paws, there are 3 main flows tailored for 3 types of users: those who want to adopt, animal shelters, and those who want to propose an animal for adoption. The UI and functionality are recycled for consistency and ease of use.
Site map for adopters
Site map for animal shelters
Site map for users who put on donations
Ideate
User stories
Generating the site-map and Lean UX Canvas, we obtained a detailed understanding of the objectives, concerns, and general needs of our users as well as a basic framework necessary for categorizing information. Using this understanding, we created user stories to identify important features to include in a Minimum Viable Product (MVP) that efficiently meets user needs.
Through user stories, we discovered the following:
- Users want a simple and intuitive experience to access essential information about animals available for adoption.
- It is crucial to provide an efficient and easy-to-follow adoption process to increase the chances of completion.
- There is a clear need for providing educational resources and support to assist users in caring for and integrating adopted animals into their new homes.
User flows
After gathering information from the Lean UX Canvas, sitemap, and user stories, it's crucial to fully understand the steps and stages a user goes through to achieve their goal. As such, we've created three categories of user flows that illustrate the main paths users take to accomplish their objectives:
User flow for shelter:
- • Add animal
- • Write article
- • Edit animal
- • Track donations
- • Promote animal
- • Find information
User flow for adopters:
- • Animal adoption
- • Donation of money/materials
- • Search for educational information
User flow for animal donors:
- • Add animal
- • Edit existing animal
- • Promote animal
- • Search for educational information
Information Architecture
After understanding the user needs, identifying key functionalities through user stories, and creating a sitemap to understand the structure and hierarchy of the site, it's time to create the information architecture. This helps me organize the information on the page in a way that is easy to understand and navigate, ensuring that users can quickly and efficiently access the information they need.
What I found out
After understanding the user needs, identifying key functionalities through user stories, and creating a sitemap to understand the structure and hierarchy of the site, it's time to create the information architecture. This helps me organize the information on the page in a way that is easy to understand and navigate, ensuring that users can quickly and efficiently access the information they need
Information Architecture is to big to show :(
Prototype
Wireframe
After going through the research, mapping, and structuring stages of information, it's time to create the design foundation in wireframe. Now, we transform all previously discovered concepts into low-fidelity wireframes, which serve as the initial skeleton, allowing me to quickly make the first iterations of the design.
Branding and visual identity
Without a predefined visual direction, we created the identity from scratch. We chose a color palette that includes Peach Fuzz and chocolate brown, and the selected font is Mont, a simple and clear typeface. The logo is an animal paw with a heart at the base, symbolizing care for animals. After establishing the visual direction and creating the wireframe, creating components for the final design was straightforward.
Final design
Prototyping
After completing the design, I started creating a High-Fidelity prototype in preparation for testing. During this stage, I noticed that two pages were missing for one of the user types. This helped me complete the design and identify areas that needed improvement or adjustments to ensure a smooth and intuitive user experience. Based on the prototyping, I identified a single flow that could be applied to all user types, thus improving the efficiency and consistency of the overall user experience.
Testing
Testing
In the testing phase, we used the click test method, presenting the prototype to 6 different participants. Each participant had specific tasks to complete, either from the perspective of an adopter or from the perspective of a shelter.
These tasks included:- • Completing the animal adoption flow.
- • Completing the money/items donation flow.
- • Adopting a virtual animal.
- • Identifying the place to change account details.
- • Finding the notifications section.
- • Finding the articles section.
- • Finding the chatbot.
- • Adding a single animal.
- • Adding multiple animals at once.
- • Editing animals.
- • Adding an article.
- • Editing an article.
- • Editing the account.
- • Viewing statistics.
- • Promoting an animal.
Click test result
Overall, users managed to successfully complete the tasks in less than 20 seconds, with the exception of finding notifications and articles from the adopters perspective.
The main issues with these two tasks were that the articles tab had a non-descriptive name, being called "support," which was not intuitive for users, and the notifications were incorporated into a tab in the account section.
To address these issues, we renamed the "support" section to "articles" and repositioned the help chatbot on each page in the adopter flow. Additionally, for notifications, we added a red dot above the account section, so when the user has notifications, attention is drawn to that section.
