Paws For People

Web Design Case Study

What's Up?

Spacer

What's Up?

Spacer

Overview.

Project Type: UI/UX Design (Web)

Toolbox: Figma, Adobe Illustrator, InVision

Timeline: 2 weeks

 

Paws For People is a fictional organization that is dedicated to bridging the gap between pet lovers and animal shelters. Paws For People helps represent animal shelters and is a trustworthy contact for prospective pet owners. The organization is now expanding their efforts to offer an online platform to streamline the processes for these shelters and act as a resource for the general public.

The Challenge.

Design a website that provides information on adoptable pets, allows shelters to upload information, has a pet search function, and increases animal awareness.

What is a Design System?

A design system is a collection of patterns, components, styles, principles, and resources that can be applied to develop applications. On top of providing UI elements, a design system can offer guidance for visual design and code through documentation and set standards, which ultimately enhance user experiences.

Benefits of design systems:
•  More consistent designs across applications within a particular ecosystem
•  Build products faster by implementing reusable components, for both designers and developers
•  Easier maintenance, updates, and scalability of products as they evolve over time
•  Increased collaboration and unity for product teams, as the design system will act as a single source of truth

My Role.

As part of the Fiori for Mobile team, I support the Android build, initiated by the SAP x Google partnership.

This includes, but is not limited to:
•  Designing components and patterns that are consumed by the Fiori for Android SDK
•  Working closely with team of researchers and developers for a seamless end-to-end process
•  Creating pixel-perfect stencils for the design system
•  Mapping out and maintaining design system guidelines

The Challenge.

Creating components and patterns for a design system that are scalable and viable for different use cases.

1. Discovery

The discovery phase started with planning out what exactly I wanted to find out about users of the website. I started to plan for research by determining research goals and methodologies. I created a research plan to consolidate what was being asked and to determine what I needed to do to gather more information around the prospective end users.

Methodologies: Competitive Analysis, User Interviews, Secondary Research

Goals:
• Find out what aspects prospective pet owners consider the most when thinking about adopting (relating to both the pet itself and the animal shelter)
• Identify any differences between researching online for pets and going to the actual animal shelter to learn about the pets
• Discover the main reasons why pet owners search for animals online
• Identify what competitors currently exist in the online animal shelter space

2. Research

Method 1: Competitive Analysis
My first approach to research was to compile a competitive analysis. With this, I wanted to compare other brands and websites in the space, to identify any patterns within their UI and UX.

Method 2: User Interviews
My second approach to research was conducting user interviews. I wanted to conduct user interviews to hear first-hand from users their thoughts and feelings around pet adoptions. User interviews allowed me to dive deeper into the perspectives of the users and who we would be designing this product for.

Target Participants:
Adults between the ages of 25-40 who:
• Are looking to adopt a pet
• Care to learn about the animal shelter conditions, animal background, etc. before going to the actual shelter (people who like to research beforehand)
• Have a genuine care for animals and animal awareness

Method 3: Secondary Research
My third approach to research was secondary research, in which I searched and gathered information online that was relevant to the scope of the project. With this, I was able to compile data and statistics around pet adoptions and the space in general. I found numerous facts that helped me along the design process, but one thing I noticed from the beginning of my secondary research was that the most popular pets adopted were cats and dogs, so I knew I wanted to prioritize and highlight those when I began the wireframing stage.

3. User Persona

Carrying out research through my competitive analysis and user interviews helped me figure out the type of user I would be designing this website for. I then created a user persona to help illustrate this user and what their main goals, frustrations, and motivations are. This user persona served as a guide moving forward in the design process and helped me ideate what kind of responses this website should elicit from a user's point of view.

4. Product Features

After conducting research and mapping out who my user would be, I brainstormed features for the website based on all the information I had gathered. Below is a list of all these features, which were then ordered by prioritization.

5. Sitemap

With various features in mind that I knew were a "must-have" for the website, I made a sitemap that helped me organize which pages would need to be created to house these features. This sitemap also allowed me to visualize the potential flow of the user while they are browsing through the site.

6. Wireframes

After sketching out a few rough ideas for the website, I went on to create wireframes of the product. You can see the full wireframe series in Figma below (I recommend selecting “fit” view).

View Figma →

Some things I wanted to highlight and incorporate in my wireframes were:

1. Easy search for cats & dogs
2. Quick find of the shelter address and info
3. Filters for different breeds
4. Lots of pictures of the actual pets

Based on the research I conducted, these were features that I wanted to prioritize based on the users’ needs and wants. With these, my goal was to create wireframes that allowed for a simple user experience and interaction with the website.

7. Usability Testing

After creating my wireframes, I conducted usability tests to see which parts of my designs were functional, and which needed improvements before creating the high-fidelity versions. My planning for the usability tests were as follows:
• Both in-person & video call moderated testing on low-fidelity Figma wireframes
• Test participants: 3 friends and family members between ages 25-40 (identified target market) who are interested in adopting a pet or learning more about pets

8. Affinity Map

Conducting my usability tests helped me uncover improvements that could be made to my wireframes before heading into the high-fidelity versions. I organized the feedback that I got through my tests in this affinity map, which helped me iterate on the designs.

9. UI & Style Tile

After iterating on my wireframes, I moved on to determine the overall style and look I wanted to create for Paws For People's brand. Combining notes that I had taken from when I compiled the competitive analysis with my own ideas of how I envisioned a pet brand to look like, I decided to go for a brand feel that would encompass the words: fun, friendly, bold, and trustworthy. I chose a color palette that was centered around blues to really draw users in on the trustworthiness aspect. Overall, I wanted a look that was cute, but not childish.

10. High Fidelity Prototype

Ideating what style and direction I wanted to take this design in guided me in bringing my wireframes to life. You can see the InVision prototype (hotspots included) below. I built out the screens I felt were essential for the scope of this project, and did not build out a full-fledged prototype due to time constraints.

View InVision →

11. Conclusion

The biggest problems I faced with this project were scaling down my designs to the right proportions and working with a "cute" and "fun" style. With these in mind, this project really challenged me to improve my visual eye for design.

Next Steps:
Since this project was given a 2-week window to be completed, I was unable to build out all the pages for the wireframes and high-fidelity screens. The next steps for this project would be to build out all these pages, and continue iterations for constant improvements of the user experience.

fin.

Other projects: 
SAP Fiori

SAP Conversational UX


Slack for WatchOS


Visual Designs

© 2021 All Rights Reserved