Animal Rescue Website
Ux Case study and Redesign
The Goal
To redesign ResQ website for -
1. Enhanced Ux for generating awareness and donations.
2. A more refined navigation and UI.
The Design process
Research
Heuristic Evaluation
Ideation
Wireframes
Visual design
Developing Hi-fi Screen mockups
Heuristic Evaluation
I conducted a heuristic evaluation to test whether the website is user friendly. The heuristic evaluation was carried out based on a set of predefined design guidelines.
Consistency and Standards
Flexibility and efficiency of use/
Ease of navigation
Aesthetics and minimal design
Website
The following three pages of ResQ Charitable Trust were evaluated.
1. Homepage
2. What we do
3. Donations
1. Homepage
Screen-01
Flexibility and efficiency of use
1. Prime image explaining cause not displayed upfront.
2. Upcoming Event/Petition not highlighted on this page.
3. Call for action buttons or click-able items not clear.
Consistency and standards
Aesthetic and minimal design
1. Call of action or Click-able items are not consistent.
2. Line lengths are very long to read.
3. Standard Grids system not used , therefore proper alignments are missing.
4. Both Uppercase and lowercase used on same page makes the text difficult to read and confuses the user.
Screen - 02 and 03
Flexibility and efficiency of use
1. Use of Grey and green colour do not have any significance.
2. Titles look like buttons - Friends of Resq and Hands on!
Aesthetics and minimal design
1. The text on the statistical graph is not readable.
2. Proximity and spacing is not proper.
3. Logo with Sponsorship window is not needed.
4. Hierarchy of information is not clear.
5. Animation to the statistical data is unwanted.
Navigation Bar
Ease of navigation
1. The navigation tabs do not look click-able tabs.
2. Proper hierarchy and relation between primary and secondary navigation is absent.
3. The dropdown menu is not properly differentiated from the page data and navigation tab.
4. Information architecture is very confusing.
5. Hovering on a tab is in orange colour with a tool tip with same information.
Aesthetics and minimal design
Consistency and standards
1. Tabs do not appear like tabs. Uneven spacing between tabs.
2. Icons of Social media, Donate and drop box do not follow the same style.
3. Uppercase to navigation not required.
4. Bold and regular font used in same tab or title.
5. Lines to separate primary and secondary navigation not required.
6. Purpose of left right arrows unknown.
2. What We Do
Navigation
Flexibility and efficiency of use
Ease of navigation
1. ResQ word is used too many times.
2. Under What we do - Things that we do. In Things we do page, Resq Wild animals and street animals is explained which are the next 2 pages under what we do. Therefore the navigation is very confusing.
3. In Things we do page, What we do tab is highlighted.
Screen 01
Aesthetics and minimal design
1. The watermark logo on photos and the title below it gives same information.
2. No need of hand pointing buttons, instead it can be designed to look like buttons or click-able links.
3. Spacing is not proper.
ResQ Wildlife Screen
Consistency and standards
Flexibility and ease of use
1. Very long line lengths and data in paragraphs is difficult to scan and read.
2. No graphics and images might make the Users skip this information.
Buttons
Consistency and standards
1. Buttons do not follow same styles.
2. Fonts in both Upper and lowercase.
3. How Can You Help
Screen 01 and 02
Consistency and standards
Aesthetics and minimal design
1. Buttons do not follow same styles.
2. Fonts in both Upper and lowercase.
3. Too much text and icons inside the buttons not needed.
4. Body text, Buttons, graphics and menu not aligned.
Flexibility and ease of use
1.The donations page has no Images or graphics to attract the user to donate.
2.Testimonials or Success stories are not highlighted to show visitors impact of donations.
3. Information architecture inside Donations tab is very confusing.
Support wildlife page
Ease of Navigation
The actual path to Sponsor a bird is -
​
How can you help > Support Wildlife > Sponsor a bird
But the breadcrumb says Sponsor a cause, which is not a field anywhere else. This consfuses the visitor.
Sponser a bird
Design Enhancements
Homepage
1. Home page with engaging graphics and images .
2. Link to upcoming events highlighted.
3. Consistent styles to buttons and icons.
4. Helpline numbers upfront for easy access.
What we do page
1. Data well organised with proper spacing and alignments between photos and text.
2. Consistent styles to images.
3. Clear navigation and Information architecture.
How to help -
Donations page
1. Consistent and clean UI for easy donation process.
2. Appealing imagery to engage audience on the donations page.
Navigation
1. Side navigation opens from burger menu fixed on all pages.
2. Clear navigation with side with drop down menu.
