The goal of this project was to design a user-friendly desktop & mobile interface for UA Pet Charity website, focusing on an intuitive and efficient donation process. This project aimed to demonstrate my ability to design high-fidelity prototypes and responsive designs. Although Figma is a leading prototyping tool for UX/UI designers, I used Adobe XD for this project, showcasing versatility in using different design tools.

This project aimed to develop a detailed and user-friendly desktop and mobile interface for UA Pet Charity, focusing on the donation process. A user-friendly interface is designed to be easy for users to navigate and interact with. This project allowed me to highlight my responsive design capabilities, as I created the wireframes and prototype for both desktop and mobile screens.

To achieve the project goal I divided it by the 2 main phases: Brainstorming and Drafting & Designing.

In the Brainstorming phase, I conducted user research, created a user flow, sitemap and style guide:

- The research is needed to understand the purpose of the company’s activities and understand who the company’s clients are and what their needs are. This involved analyzing user demographics, behaviors, and motivations.
- User flow is the path or journey the potential user takes to complete the process (in this case, the donation process).
- The sitemap includes all the pages, navigation sections, connection between the elements and it helps to make sure that every important detail is included.
- The style guide maintains visual consistency & branding which is important to have the same look & feel across all the screens.

In the Drafting & Design phase, I created wireframes and high-fidelity mockups.

- Wireframes provide a layout blueprint, outlining the layout and functionality of each screen before proceeding to high-fidelity mockups.
- Transforming wireframes into high-fidelity mockups involved refining the visual design and incorporating branding elements, which resulted in the detailed final design.

More details on how I completed each step and why it was beneficial to UA Pet Charity can be found in the next sections.

I started the project by conducting extensive research. This included developing user personas to understand the target audience, analyzing UA Pet Charity's short-term and long-term goals to align the design with their mission, and performing competitive analysis to identify industry best practices and opportunities to stand out.

Here is how I did it:

- Analyzing UA Pet Charity's goals involved studying charity’s mission statements and strategic plans. By defining these goals, I could tailor the design to support them and come up with a roadmap for the website. Main goals of UA Pet were: Fundraising & Donations, Volunteer recruitment, Adoption rate increase and more.
- To create accurate user personas, I gathered the demographics, motivations, and behaviors of the charity's supporters. This information helped me create personas that represented the different types of users who might interact with the website.
- I researched other charity websites to identify trends, strengths, and weaknesses in their designs. This allowed me to learn from industry best practices and find opportunities to differentiate UA Pet Charity's website.
- Creating a concept map involved brainstorming and visually mapping out the relationships between concepts and ideas. It is a visual tool that helps to brainstorm and explore ideas, and find areas for improvement.

These steps were essential to understand the company’s clients and their needs, as well as to focus on the company’s strengths and integrate them into the design.

Based on the research, I then created detailed archetypes ( ideal users), which included potential adopters, volunteers, sponsors and more. I chose these archetypes based on the organization’s goals. I took 2 archetypes (potential adopter & retired volunteer) and created detailed user personas and scenarios. Finally, I gathered the main user tasks on UA Pet’s website, the main task was donation, which works great for the donation process design.

The final steps of this phase included creating User Flow, Sitemap, Search Facets and SEO metadata optimization.

- For the user flow, I mapped out the essential steps that users would take to complete the donation process on the website. This diagram helped me visualize the user journey, identifying all the necessary elements & sections I needed to add to the donation process. By optimizing the user flow, I aimed to create a smooth and intuitive experience for users.
- To enhance the search functionality of the website, I implemented search facets that allowed users to refine their search results based on specific criteria. Facets are needed to allow users to filter and narrow down their search on specific criteria, saving their time and improving user satisfaction.
- Creating a sitemap involved outlining the hierarchical structure of the website and the relationships between different pages and sections. This visual representation helped me organize the content in a logical manner, making it easier for users to navigate and find the information they need.
- Finally, I optimized the website's metadata for search engines by strategically incorporating relevant keywords into titles, descriptions, and tags. This will help to improve the website's visibility and ranking in search engine results, attracting more visitors and potential supporters to the charity's cause.

All these steps helped in defining users actions, visualizing relationships, and organizing site structure, contributing to the smooth donation process and therefore, to the project success.

Additionally, to establish a consistent visual identity for UA Pet Charity, I developed a logo and style guide, aligning every design decision with the preferences and expectations of the target audience, which I knew with the help of my extensive research. Chosen colors represent the Ukrainian flag evoking a sense of national pride, solidarity, and connection to the charity's roots and identity. The Fredoka font was selected for its playful and friendly appearance, adding a touch of warmth and approachability to the charity's visual identity. This choice reflects UA Pet Charity's ethos of compassion and inclusivity, inviting supporters to engage with the brand in a welcoming and inviting manner.

Finally, all findings, decisions, and assets were documented in a comprehensive design document using Adobe InDesign, providing a roadmap for maintaining consistency and coherence in future design choices and decisions.

VIEW PDF

VIEW PDF

Moving forward from the extensive research made in Phase 1, with all necessary information at hand, I transitioned into the creative phase of drafting and designing. I started by sketching out the initial designs and creating wireframes using Adobe XD. These wireframes served as a blueprint of the UA Pet Charity’s website. I brainstormed and planned the layout for mobile and desktop.

To make sure my design looks good both on desktop and mobile, I started planning the layout and content for both screen sizes and the very beginning. I considered user interaction patterns and ensured that all the important information & UI elements are easily accessible on both mobile and desktop screens. For example, I prioritized key actions and content, such as the donation button and essential navigation links, ensuring they remained accessible regardless of screen size.

To simplify the donation process for users, I carefully reviewed every step required, as outlined in my user flow. Additionally, I provided users with an expectation of how long the process would take by incorporating progress indicators, signaling that there were three steps involved. Moreover, to make the donation process quicker, I included quick buttons that allowed users to select their desired donation amount. These decisions were implemented to enhance convenience and efficiency, ensuring a smoother and more intuitive donation experience.

Once the wireframes were completed, I transformed them into high-fidelity mockups, which involved refining the copy, using imagery, colors and typography that were outlined in the style guide developed in Phase 1. Some of the images had to be resized to make sure they look good on mobile screens as well.

This phase resulted in a clean, user-friendly interface that simplifies the donation process by managing user expectations and making it straightforward for them.

VIEW PDF

Final deliverables included a comprehensive design document where I gathered all my findings during the research, a detailed style guide outlining the color scheme, typography, and UI elements, and high-fidelity wireframes and mockups in Adobe XD. To make sure it is easy to make changes in the design in future, I used components, so that when you make changes to one component, all instances get updated right away.

Before submitting the final version of the design, I ensured that the files and Adobe XD layers were clean and easy to understand by organizing layers logically and labeling each element clearly.

The project successfully met its goals of creating a user-friendly desktop & mobile interface for UA Pet Charity website and an efficient donation process with the intuitive design and clear navigation. The high-fidelity prototypes not only reflect a deep understanding of user needs and behaviors but also demonstrate my proficiency in applying UX design principles and responsive design techniques. As a result, this project makes a strong piece in my professional portfolio.