SWEET FRIENDS

Sweet Friends is a comprehensive online platform that facilitates pet adoption, pet product purchasing, and charitable donations to support pet shelters. Our user-friendly app and website provide a seamless experience for pet lovers to explore, adopt, and care for pets in need. Through our platform, users can easily browse available pets, schedule appointments, purchase pet essentials from our store, and make secure donations to support pet shelters. Our mission is to simplify the pet adoption process and promote the welfare of pets by connecting them with loving homes and dedicated support.

Problem Statement

The current process of pet adoption is confusing and difficult for potential pet owners, particularly during the COVID-19 pandemic, which has limited in-person interactions. The lack of clear information and a user-friendly interface on pet shelter websites makes it challenging for users to find the right pet, schedule appointments, and donate to pet shelters. As a result, there is a need for a website that simplifies the pet adoption process and makes it easier for users to explore, adopt, and donate to pets. The website should be accessible on all devices and provide a seamless user experience that inspires users to adopt pets and support pet shelters.

Project Overview

Challenge

The aim of the Sweet Friends project was to develop a website and mobile application that catered to all platforms. The primary objective of the platform was to provide users with the ability to search and explore pets and offer options to adopt or donate to them. Additionally, the platform included a store for pet essentials. The challenge was to create a user-friendly and accessible platform that met the needs of users across various devices.

Time

This project is divided into two stages. The first was designing the website, which took two months, and the second was developing the app, which took one month.

Project rules

Ensure cross-platform compatibility by resizing the website to work seamlessly on all devices.
Develop a user-friendly app that provides a convenient and streamlined experience for pet adoption, product purchasing, and donations.
Enhance the website's user paths to provide more intuitive navigation and improve the overall user experience.

Tools

Adobe XD

Miro

Sketch

User Surveys

Process

Empathize

Research

The research phase for this project was initiated due to a personal need for a pet adoption platform. During the COVID-19 pandemic, there were challenges with scheduling appointments and viewing pets for adoption. The aim was to create an intuitive platform that simplifies the process for pet adoption while addressing issues surrounding the representation of pets on the site. The research revealed that the most significant challenge for users was the communication process and lack of information regarding pets available for adoption. Based on the findings, the first steps of exploration and adoption were modified to provide comprehensive information and a seamless user experience.

Users' Interview

Through personal experience and discussions with individuals who have adopted pets, it became clear that a straightforward approach, comprehensive information about the pets, and streamlined appointment scheduling, were key requirements. Additionally, there was a demand for an app that could assist in the adoption process by providing tools to track and store data for future reference. This information was gathered through qualitative research methods, including in-depth interviews and surveys, in order to gain a deeper understanding of the needs and desires of potential users. The findings informed the design and development of the Sweet Friends website and app, with a focus on meeting the needs of users and improving the overall adoption experience.

Empathize road map

To enhance the user experience and streamline the adoption process, we have designed the website's homepage to include all the necessary information. Users can quickly access basic information and click for more details if required. Furthermore, our new website and app provide users with the ability to quickly access all information and store it in their personal panel, allowing for efficient and organized pet adoption management.

Usability on various platforms

The website's accessibility on different devices, such as smartphones, tablets, and computers, is crucial as it enables users to modify orders, check the status of their adoption, and perform other necessary operations at any time or place.

App option

Offering an app that saves all adoption-related information and keeps track of the pet's situation is beneficial for both the user and the shelter. The convenience and usability of the app may increase user loyalty and promote future transactions with our brand.

Define and Conceptualize

User Persona

Using information from both my subject matter expert interview and topic research, I created a persona that mirrored my intended user population.

Prototype and Testing

Low Fidelity Wireframe

To commence the design process, I created mid-fidelity wireframes utilizing Adobe XD to develop a prototype. The primary focus was on the screens that users would engage with during their interaction with the platform.

Usability Testing

To ensure the usability of the software, I requested the tester interact with the system and provide feedback on various aspects, such as flow, appearance, and font options. The feedback was valuable, and I incorporated it to improve the design of several pages. Notably, the time selection feature received particular attention, and the app's potential was also highlighted during the usability testing.

Interaction

Interaction in the Sweet Friends website involves a user-friendly and intuitive design that allows users to navigate easily and efficiently. The website's primary interaction elements include buttons, links, and forms that enable users to find and interact with pets available for adoption, donate to the shelter, and purchase pet essentials.

The website also includes interactive features, such as a search bar that allows users to search for pets based on specific criteria such as breed, age, and location. Users can also schedule appointments to visit the shelter and meet pets they are interested in adopting.

Another essential interaction element of the Sweet Friends website is the personal panel, which allows users to access and manage their account information, adoption history, and donations. The personal panel provides a seamless and convenient way for users to keep track of their activities on the website and app.

The interaction design of the Sweet Friends app is also intuitive and user-friendly, allowing users to perform essential functions such as viewing pets available for adoption, scheduling appointments, and making donations. The app also includes push notifications that provide users with updates on their adoption and donation statuses.

Overall, the interaction design of the Sweet Friends website and app is focused on providing users with a seamless and intuitive experience that encourages them to engage with the shelter, adopt pets, and contribute to its cause.

Testing Process

Number of Testers

We recruited 20 testers to participate in the testing process, which we determined was a sufficient number to obtain a diverse range of feedback and identify any significant issues with the website.

Tasks and Scenarios

The tasks and scenarios were designed to evaluate the functionality and usability of the website. They included:

Browsing pets available for adoption or donation
Creating an account and logging in
Searching for a pet based on certain criteria such as breed or location
Adding a pet to the user's favorites list
Making a donation or submitting an adoption application
Accessing and using the store to purchase pet essentials

Recruitment

Testers were recruited from various sources, including social media, online forums, and personal networks, with a particular focus on individuals who fit the target user profile for the website and had a range of technical expertise.

Testing Environment

We provided testers with access to a test version of the website and asked them to complete tasks and scenarios on their own devices. We also provided a feedback form for testers to complete after they finished testing.

Final Result

The result of the project could be a functional website and app that provides a user-friendly experience for pet adoption, donation, and pet essentials shopping. The website and app should be accessible on various platforms and devices, with clear communication and representation of pets. The project's success could be measured by factors such as user engagement, adoption rates, and increased donations to the shelter.

Pain Points

Streamlined Website: The website is designed with minimal web pages, enabling users to complete tasks with ease and speed.
Essential Webpage Components: The webpage comprises only necessary components, providing users with a seamless experience.
Positive User Feedback: Most users have shown a positive response to the website upon their initial interaction.

Final Prototype

After completing the mid-fidelity wireframes and incorporating user feedback, I proceeded to develop the final, high-fidelity wireframes and prototype for the SweetFriends website. With a clear understanding of their branding, I ensured that the visual design of the application was aligned with SweetFriend's identity. This included selecting appropriate colors, fonts, and other design elements to create a cohesive and visually appealing user interface. The final product is a polished and user-friendly website that effectively meets the goals of the project.

Branding

The branding of the website aimed to achieve two essential goals: user-friendliness and device compatibility. To achieve this, the branding utilized a minimalist approach, with simple yet elegant colors and fonts. Furthermore, incorporating photos and other visual elements was done with the intention of enhancing the user experience and making the website more appealing and engaging. The overall branding strategy was designed to ensure that the website is easy to navigate, aesthetically pleasing, and accessible on all devices, thereby increasing user satisfaction and engagement.

UI Kit

The UI kit process is an important step in designing the user interface for a digital product, such as a website or mobile app. A UI kit is a collection of pre-designed user interface elements, such as buttons, icons, typography, and color schemes, that can be used to create a consistent visual style across all screens and pages of the product.

The process of creating a UI kit typically starts with researching the brand identity and target audience to determine the appropriate design elements to include. The designer then creates a set of initial designs for each UI element, which are reviewed and refined through an iterative process. The final designs are then compiled into a cohesive kit that can be shared with the development team for implementation.

One of the benefits of using a UI kit is that it ensures consistency in design and functionality across the entire product, which can enhance the user experience and make it easier for users to navigate the site or app. Additionally, using a UI kit can save time and resources by providing a library of pre-designed elements that can be quickly and easily implemented in new pages or features.

Overall, the UI kit process is an important part of the design process for any digital product, and can contribute significantly to the success and usability of the final product.

My Achievement by the End of the Project

As a UX/UI Designer, I embarked on a challenging project that required me to create a website that is easy to use and accessible on all devices with different screen sizes. Through research, wireframing, and prototyping, I was able to create a high-fidelity design that met the needs of the Sweet Friends organization and their target audience. I used a clean and simple design approach with clear navigation to make the website easy to use and understand.

Next Steps

Moving forward, there are several steps that I plan to take to continue to enhance the Sweet Friends website and develop my skills as a UX designer. These steps include:
Conducting more user testing to further refine and improve the website's user experience.
Designing interfaces that are optimized for different screen sizes to ensure a consistent experience for all users.
Creating a style guide and UI kit to maintain consistency and streamline the design process for future updates.
Continuing to stay up-to-date on emerging trends and best practices in UX design through ongoing research and learning opportunities.
Seeking feedback from more experienced UX designers to receive constructive criticism and improve my skills.
Collaborating with developers to ensure that the website's design is feasible and can be implemented smoothly.
Documenting my design process to reflect on my work and identify areas for improvement in future projects.

Page updated

Google Sites

Report abuse