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.

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.