work


care4animals redesign


This project was created for CS130: User Interfaces & User Experiences at Brown University in the fall of 2017.

For this assignment we were to redesign a website. I had been looking to adopt a pet recently, and thus found this horribly designed website for an animal hospital in Rhode Island, Care For Animals.

Original Website

Part I: Analysis of flaws. There is not an effortless understanding of the architecture/navigation of the site. If it is a pet adoption site, why is it formatted like a blog? People have different mental sets of what to expect from blog layouts on the web. It is laid out more like an archival tumblr blog than a buy/sell website. Also, the serif face is not appropriate for the content of the site. It’s also difficult to read and the font size is tiny.

These are just a few of the numerous problems there are with the design of this site.

Wireframes

Part II: wireframing the redesigned website in Adobe XD. I created a homepage because right now the About page is the first thing that you see on the real website. That’s kind of strange and unorthodox and not in an edgy and cool way. I then combined the info under the separate pages “Contact” and “Location” under the About tab on the website. I also organized the subcategories of "services" neatly into nested dropdowns.

Finally, the most important page, the adoption page, had to be carefully reconsidered. Currently the actual website shows animal posts like a blog, which is very strange. I designed it to be more "buy-and-sell" like an online store.

Hi-fi Mockup

Part III: Mocking up one main page at high fidelity. I chose to do the adoption page since it was most important to the website. Scarlet is the highlight color of the website to indicate warmth, love and care since this website is about animals. The adoption form is the first thing on the page which makes it very accessible, contrary to the original website where it was displayed like an ad in the sidebar. The animals are listed in a grid with the most basic information showing.