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.
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 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 has multiple layers of filters, which has the potential to be more clear and easier to use.
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.
Petfinder has too much scattered content which could be categorized in one page, and this is account page.
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.
User Profile Page
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.
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.
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.