User Friendly Design

[RaquelQuinones]

User Friendly Design

Description:

Create a user friendly design for the application. Aimed to enhance usability, accessibility and have overall user satisfaction.

Key Principles/Practices

1. Understand your user : Research to understand the needs, preferences, and behaviors of our target audience.
2. Simplify the Navigation System: The menus and interfaces should be simple and intuitive. Have clear labels and descriptions to guide de user.
3. Visual Consistency: Maintain visual consistency across all pages and elements of the application. (Color Scheme, design elements, fonts)

[rukitoyordan]

This is a good idea! I would say it needs to be discussed and see who is interested from these teams to implement and research on this. I would even dare and say those three points can be simplified into smaller tasks. The point on Visual Consistency will be everyone's responsibility, but the Website Creation Team will be making a template to follow in terms of visuals.

This is a task that will present difficulty of course, but doesn't warrant any immediate urgency as of now.

[smbv]

@Adriana-Isabel took inspiration from this and created her own task #35 which is similar to the first point that @RaquelQuinones made here in this task.

[RaquelQuinones]

Here is a detailed analysis of the subtask for the User Friendly Design for Profile Pages:

Note: This analysis has taken into consideration the Fundamentals of UX Design Principles.

• The rule of thumb of the UX design principle is to help us designers to understand the audience better, get some insight into how they may behave or interact with the product. In other words is to study the user, design and how both interact with each other.
• This design principle will guide us into the design process and make decisions. It will also to help reduce the cost behind these decisions; and can avoid common mistakes or pitfalls and reduce the trial and error involved in the processes.
• I recommend everyone to read the design principles to have a basic understanding of it and apply it while developing new task.

  Fundamental of UX Design Principles : https://imaginovation.net/blog/ux-design-principles/

Front End Task:

1. Clear Navigation : This ensure that users can easily navigate through the pet profiles. Use clear labels and intuitive navigation menus to help users find the information they need quickly.

   • Include a navigation bar at the top of the page that prominently displays links to different sections of the pet profiles, such as "Home", "Adoptable Pets", "About Us", "Contact", etc. Have descriptive labels for each link to help users understand where they will be taken when clicked
   • Include sidebar or filters. The website is going to have a large number of pet profiles, we should consider incorporating a sidebar or filters that allow users to refine their search based on criteria such as pet type (dog, cat, etc.), breed, age, size, etc. This helps users quickly find the pets that match their preferences without having to scroll through a long list.
   • Include a search bar prominently on the page, allowing users to search for specific pets by name, breed, or other keywords. (Subtask of subtask is to implement autocomplete suggestions to assist users in finding relevant search terms quickly.)

2. Simple Layout : Keep the layout of the pet profiles clean and simple. Avoid cluttering the page with unnecessary information or design elements. Use whitespace effectively to improve readability and visual appeal.

   • Have content hierarchy, this means to prioritize the most important information about each pet and organize it in a hierarchical manner. Important details such as the pet's name, age, breed, and personality traits should be displayed first, while less critical information can be presented in secondary sections. Use visual cues such as size, color, and contrast to establish a clear hierarchy of information.
   • Utilize whitespace effectively to create room between different elements on the page. Whitespace helps improve readability, draw attention to key information, and prevent the page from feeling cluttered or overwhelming.
   • Maintain consistency in typography (fonts) throughout the pet profiles to create a cohesive visual experience. Choose easy-to-read fonts.
   • Use limited color palette to maintain visual consistency and simplicity. Choose colors that complement each other and reflect the brand's identity. (Subtask: Establish the brand logo and color palette).
   • Ensure that the layout of the pet profiles adapts gracefully to different screen sizes and devices. Use responsive design techniques to rearrange content and adjust column widths as needed. > Link : https://www.w3schools.com/html/html_responsive.asp

3. Visual Appeal : Use high-quality images of the pets to attract users' attention and encourage engagement. Include multiple photos from different angles to give users a better sense of the pet's appearance and personality.

4. Adoption Process: Clearly outline the adoption process and requirements, including any fees, paperwork, or home visits that may be necessary. Provide contact information or links to adoption application forms for users who are interested in adopting a pet.

   • Design a page/section providing a brief introduction to the adoption process at the top of the pet profile page. This introduction should reassure potential adopters (users) that the process is straightforward and encourage them to consider adopting a pet.
   • Have a step-by-step guide that breaks down the adoption process into clear, sequential steps. Each step should be accompanied by a brief description of what it entails and what potential adopters can expect.
   • Have a section of the requirements and criteria that potential adopters must meet in order to adopt a pet. For example: Minimum age requirement for adopters, verification of identity and residence, proof of a pet-friendly housing , etc...
   • Display contact information to make it easy for potential adopters to contact the adoption agency or organization for more information or assistance, if needed.

Back End Task:

1. Database Design : Designing the database to store information about pets, users, adoption applications, and other relevant data. This involves identifying the necessary tables, fields, and relationships between different entities.

   • This task has already been Initialized!

2. User Authentication and Authorization : Implementing user authentication and authorization mechanisms to secure the website and restrict access to certain features or data based on user roles and permissions.

   • Having a Login Page, where users provide their credentials, such as username/email and password, through a login form.
   • Implement a credential verification to validates the provided credentials against those stored in the database. Example: Passwords should be securely hashed and stored to protect against unauthorized access. Link > https://www.vaadata.com/blog/how-to-securely-store-passwords-in-database/
   • User authorization involves determining what actions or resources a user is allowed to access within the application. Have a role based access control, some role could be: user, developer, admin, moderator ,etc...
   • Implement security measures.

3. File Upload and Storage : Implementing functionality for users to upload photos and other media files when creating or updating pet profiles. This could be integrating with cloud storage services. (This require more research to understand how exactly they can be implemented into the project)

Important Note: The front end focuses on the presentation and interaction aspects that users directly engage with, while the back end supports the functionality and data management required to deliver an amazing user experience. Remember that the collaboration between front-end developers and back-end developers will be essential to ensure that the final product meets the needs and goals of both users and adoption centers.