For this lesson task we had to create low fidelity wireframes. The wireframes was to be made for the website of an animal rescue organisation; One for a dog/cat category page, and one for a profile page that displays the features of each individual dog/cat. Afterwards, we had to critique our own wireframes, as well as gather feedback from others, before making more refined sketches.
The cat category page should display 15 different cats. On the profile pages, the users should be able to find the following information: Cat’s name, age, size, gender, breed, and a description. There should also be a photo of the cat, info about whether the cat is good with dogs or not, if it is house trained and if it’s good with children or not. Here are my first wireframes:
CATEGORY PAGE
PROFILE PAGE
The layout I liked the most for the category page was the gallery view. When browsing for cats, the main focus should be the photography. The list view would put more focus on informal text. The feedback I got from others showed me that they agreed on this point. First of all they wanted to look at the different cats, and rather read more after clicking on the image. So I kept the gallery view. Because a lot of users would have some preferences regarding what kind of cat they want, I figured I should divide the gallery into categories. Each category would take up one row of the gallery, and could be scrolled sideways. These could be based on different breeds, colors, genders and so on. I also put a search bar at the top of the page.
Also on the profile page, the photo of the cat would be the most important element. Therefore I decided to assign a considerable amount of space for it, and added more space for photos into the section for the description.
FINAL CATEGORY PAGE
FINAL PROFILE PAGE
