North Shore Animal League - Landing Page Redesign

Strengths

• Promote value and mission clearly - uses good visual language, images and icon to provide useful information

• lots of information - section with adoptable pets, mission, impact, links to various articles, links to external sources from other social media

• Prompts to engage the viewer - such as “find a pet” bar, donate and newsletter bar, links to current events, articles, links to other social media, encourages for the viewer to further engage

Weaknesses

• Layout does not feel cohesive - some sections have no margins, while other section feels too empty; too many variation of layout within one page

• Too Cluttered - Some sections have too many words, too many images, or too many elements. Overwhelms the viewer

• Color Palette - does not give the same sense of warmth as the content. Feel cold, distant

1. The Humane Society

Strengths

• Variety of Media - text, images, and video makes for a more dynamic experience

• Ease of Readability - Short texts ensures that the users do not lose interest

• Clear division - Large blocks of images provide visual separation between informations

Weaknesses

• Too many links to donation - total of 6 links on the landing page asking for donation, affects user’s perception of the Humane Society negatively

• Size of media - video too large for the page, text too small for the space

2. The ASPCA

Strengths

• Dynamic Spread of information - sliding banner, grid layout, columns

• Good balance of media - image as background, image in grid, appropriate amount of text, use of icons

• Clear Visual Hierarchy - pop of orange for important links, Use of text sizes and fonts

Weaknesses

• Looks Cluttered - uses of images that are cluttered, multiple color palette, and some parts look too wordy

• Better organization of Feature Highlights - Doesn’t give any insight into what each link is about, too randomized

1. Reorganization of information - Mission and impact is placed above “find a pet”. User is able to get a wholistic view of the page first before being prompted to do a specific action

2. Cohesive layout - standard margin throughout the page, clear division of space using images, lines and color

3. Better balance between text and visual - Shorter and simpler text, less elements in a section by utilizing carousel album

4. Clear visual hierarchy - by the use of color and size of fonts

• I added a search function and a button to their Health Center, which previously had been hidden away on their footnotes, on the top menu bar. The top menu bar also felt cluttered with the different color buttons on top of a colored bar, so I simplified the UI into a clean look.

• The banner is a crucial way for the organization to display their highlighted information, so I decided to make the banner slightly larger.

• The “Find a Pet” search bar was out of place so, it was relocated to further down the page.

• I felt that each mission of the organization should be emphasized more and that the photos were being obscured by the text. I decided to change the horizontal layout into a stacked layout to give each section more space. With the new layout, the viewer is able to see the photos more clearly.

• Each of the mission is clickable to leads to a page with more information. However with the previous design, it is not entirely clear. So I included a “learn more” button on each module.

• I thought the red and orange clashed too much with the organization’s color palette. I changed colors to better suit the current color palette of cool blue and green.

• The two toned blue icons in a stark white background felt too cold and distant. I wanted to highlight their impacts by bringing in a photo of one of their adoption trucks to use as the background to feel more personable.

• To bring more emphasis into each data, I used the green as a pop of color.

• I filled the awkward empty white space/margin by making the layout horizontal instead of stacked.

• Potential adopters are looking for that one special dog or a cat to take home, therefore, I thought the overwhelming, crowded grid format would desensitize viewer. Instead of the grid, I chose to make a scrolling carousel to highlight each animal. (Doesn’t Herschel the pup look so adorable?)

• I also decided to add the link for donation and email newsletter sign up immediately after the “Take Us Home” section. User who JUST saw cute animals are more likely to take action to help those animals and the organization.

• There were just too many articles and too much text. I decided to feature only four articles on the landing page, with the option to “view all”.

• Out of the four articles, the organization has the option to promote one article at the top. Currently, it is perfect to highlight their COVID-19 updates.

• I added a bookmark, share, and the date in which the article got published. It gives more information to the user and encourages them to interact more with these articles.

• Once again, this section had too much text and too many posts. It looked crowded because there were no margins on either side. I understand they were probably trying to highlight the number of success stories with the posts of pets that got adopted. So I decided to carry that over and put an overlay of some of the pets that got adopted into the background, while focusing on one success story at a time, with an option to scroll for more.

• I relocated the search button to the top of the page at the top menu bar, giving the social media buttons more space.