Neon lights glow through the science of excited atoms. When electricity passes through a sealed tube of neon gas, electrons jump to higher energy levels. As they return, they release energy as vibrant light, creating dazzling displays in cities worldwide.


Ruff Finder Case Study


Project Brief

Responsive design project that focuses on a civil issue involving lost pets in the United States.


Project idea

Around 10 million dogs and cats are reported lost or stolen in the United States each year, according to the American Humane Association. Yet, the approximate number of canines reported missing is 6,70,000 (Pawar). With more animals going missing every day in the United States, it’s important to consider options on how to prevent them from becoming lost entirely and locating them quickly. Currently we have systems in place like animal control that will locate these animals and put them in a shelter, however they can only be held in these shelters for about a week. If the pet is not claimed during that week, then the shelter can either place it for adoption, sell it to a research facility, or put it to sleep (Berry). Traditional methods like placing flyers of the pet could help but can be very time consuming and possibly ineffective. Pet owners want a seamless and efficient method to locate their animals and report them quickly to a mass audience in cases where their pet is lost or stolen.


What I did

I began by creating a proposal brief for my civic improvement idea of an app to help find and alert users of lost pets around their area. I wrote ideas in the proposal of how I wanted it to work and look like for each device ranging from mobile, tablet, desktop, and smartwatch. I then did research of other applications similar to mine and developed a competitive analysis to generate ideas on how my app should work. I began by sketching the mobile app idea and created 6 low fidelity designs. After receiving feedback on those designs, I applied the information given to me and finished up the mobile version first using Figma. I then moved onto the tablet and resized elements from the mobile design and modified them for a larger screen. It ended up looking the same, but it includes more information and larger images. For the desktop version, I added more information and made filling out forms efficient and quicker when reporting a pet. There are also much more images and lots of room to display more lost and found cards. After that, I finished up by creating the smartwatch model and designed it to be tailored for the premium version where the pet has a trackable collar. The watch allows the user to GPS track the pet and detect it with a proximity sensor. Overall this project was done all by myself, which took a lot of time and effort. However, I still believe that the design could be better and will probably update it in the future.


Design Research

I began by researching other lost and found pet websites and mobile apps. I came across three named Pet Key, Petco Lovelost, and Paw Boost. I noticed that all the websites have the same main features of reporting lost pets. However, Petkey shined with its products and ability to advertise a membership and merchandise. Paw Boost did a good job in showing the information of pets with an easy to user filter system. It also made reporting pets easier and quicker. Petco Lovelost doesn’t have many features or a mobile design, however it is still good at reporting pets with its seamless process. Overall, I tried to incorporate the best parts of these competitors into my design while also adding my own creative touch. I then went on to create a flow chart outlining how I wanted my app to work. I focused on the three main elements which were the reporting feature, interactive map, and the news feed.

Flowchart

Link: https://www.figma.com/file/iJILdKr7t21PKCDFswXX9F/Ruff-Finder-Flowchart?type=whiteboard&node-id=0%3A1&t=K2oLcJ0Vr49Lo9T3-1


Sketches

Ruff Finder Mobile Design

Link: https://www.figma.com/proto/DVnzq7Fcx4lExX9b9oTj6I/Ruff-Finder?type=design&node-id=23-152&t=HXcfVkQTgPCqfHwA-1&scaling=scale-down&page-id=0%3A1&starting-point-node-id=23%3A152&mode=design

Ruff Finder Tablet Design

Link: https://www.figma.com/proto/DVnzq7Fcx4lExX9b9oTj6I/Ruff-Finder?type=design&node-id=799-9059&t=yj8PeDnyEpso7pT3-1&scaling=scale-down&page-id=419%3A4509&starting-point-node-id=419%3A4510&mode=design

Ruff Finder Desktop Design

Link: https://www.figma.com/proto/DVnzq7Fcx4lExX9b9oTj6I/Ruff-Finder?type=design&node-id=419-4512&t=OjOXqjlDEtGi2cPD-1&scaling=scale-down&page-id=419%3A4511&starting-point-node-id=419%3A4512&mode=design

Ruff Finder Smart Watch Design

Link: https://www.figma.com/proto/DVnzq7Fcx4lExX9b9oTj6I/Ruff-Finder?type=design&node-id=799-8753&t=v4b0jezvlNeExoWq-1&scaling=scale-down&page-id=578%3A5221&starting-point-node-id=578%3A5222&mode=design


Design Feedback

After creating my first 6 screens of my mobile app Ruff Finder, I received feedback on them by classmates. They told me things like sticking to only a few colors and taking advantage of screen real estate. Other details like considering different color palettes were also considered. They like the direction I was taking it and found the design to be cohesive.

Low Fidelity Design

Ruff Finder Responsive Design Video

Sources

Berry, C. (2010). Lost dogs. Animal Law Legal Center. https://www.animallaw.info/intro/lost-dogs#:~:text=Animal%20control%20laws%20allow%20stray,or%20put%20it%20to%20sleep

Pawar, A. (2023, December 30). Lost dogs statistics for 2024 (number of Lost & Found Dogs). Bring Jackson Home. https://www.bringjacksonhome.com/lost-dogs-statistics/#:~:text=Around%2010%20million%20dogs%20and,of%20these%20families%20had%20dogs