

App UI Redesign
Petfinder App UI Redesign
Petfinder is an online, searchable database of animals who need homes. It helps pet lovers find homeless pets who best match themselves, as well as introduces a lot of useful pet knowledge.
However, while the function of Petfinder is well built, the UI design still has some space to improve.
So, I decided to take this challenge and do a UI redesign of the app to improve the visual effects.
Role /
UI designer
Year /
2021
My Evaluation
-
Color scheme
The current color scheme of this App is purple. Purple might symbolize professionalism, but I think using a lighter color can be more fun, friendly and attractive.
-
Home screen
Home screen combines the function of search, breed knowledge, and adoption choices. However, the layout of the home page is kind of complicated, though it tries to be clear. I believe it can be briefer.
-
Search screen
Search screen has multiple layers of filters, which has the potential to be more clear and easier to use.
-
Match Screen
Search result screen is clear, but not cute and appealing enough to me. I think this page has more potential to be more fun and friendly.
-
Account Screen
Petfinder has too much scattered content which could be categorized in one page, and this is account page.

My Goal
-
Make the overall style fun and attractive.
-
Visualize part of text content.
-
Group relevant functions.
User Flow Chart & Wireframing
After going through and sorting out the functions, I mapped out a typical user flow chart and included the basic functions of Petfinder.

Then, I made the first version of low fidelity wireframe of the basic screens using Figma.

Offers
Search bar
Recommendations
Login Page
Home Page

Category
Settings
Recommendations
Search bar
Infomation
Info Page
User Profile Page
Wireframe v1
After that, I got pretty helpful feedback from my instructors and classmates, which are:
-
Align the curves used in the interfaces to make them more consistent.
-
Set the color palette and font in the next step.
-
Filter of searches like aging and distance would be helpful.
Below is the second version of the low-fidelity wireframe.

Wireframe v2
Design System
I researched a lot of pet app cases, and found out the current trend is simple illustrations, clean color, and readable font. I took some cases as my inspiration and set the color palette a combination of black white and bright green.






Color Palette

3e5733
658160
90ae93
b5ccba
Font


000000
929397
bab7c1
ffffff
Design



I choose black and white for mainly icons, illustrations, and buttons to make it look flat and cartoony. And I use light green to serve as background color, and darker green for chosen ones.
By adding more icons, I intend to visualize the text content, and make the process of gaining knowledge as easy and fast as possible. I used some copyright-free icons on iconfont, and adjusted the outline thickness and fill-in colors to make them look consistent.
My plan for future development is to redesign more screens, and produce a prototype to conduct usability testing.