HCP stands for Hornbill Conservation Program which is an initiative focused on safeguarding and preserving hornbill species. HCP’s website has been designed to inform visitors about the current status of hornbills, offer comprehensive details about the program, and present actionable ways for individuals to contribute to hornbill conservation efforts.
The HCP website offers valuable insights into various hornbill species, presenting detailed information about each. It facilitates user engagement with the program through avenues such as donations, nest adoption, and shopping at the program's store, thereby empowering individuals to actively support hornbill conservation.
Minimal aesthetics
HCP follows minimalist aesthetic using colors, cards, and clean sans-serif typeface, creating an experience where content and actions take the forefront of the user experience.
HPC’s main contents are in the landing page. It is made interesting by putting different types of layouts and interactions. It tells the story in a sequential way. Users can click on call to action buttons, placed in between, and redirect to the respective page.
Sections
Landing page tells the compete story starting with introduction of hornbills, their stats, program insights, how the user can help and shop.
Call to action buttons are used in between to redirect to the corresponding page.
Landing Page
Landing page tells the compete story starting with introduction of hornbills, their stats, program insights, how the user can help and shop.
Call to action buttons are used in between to redirect to the corresponding page.
Task Flow
HCP’s task flow has a one-path user flow.
HCP’s donation details
Grid system
HCP uses grid system to ensure clean and organized layout.
HCP’s grid System
Color theme
HCP follows yellow and black color scheme which resembles the color of the Great Hornbill.
HCP’s color theme
Accessibility
Color Contrast
Text legibility is preserved by an adequate contrast between the font color and the background. For WCAG 2.1 AA compliance, text should have a color contrast ratio of at least 4.5:1 (larger text at least 3:1).
HCP has a minimum contrast ratio of 10:1 for normal text which complies WCAG 2.1 AA.
Typefaces
Type scale
HCP’s type scale provides the typographic variety necessary for its app content. The website uses ‘Plus Jakarta Sans’ as primary typeface, making use of the variety of weights available with Plus Jakarta Light, Regular, Medium, and SemiBold. ‘TT Norms’ has been used in the main headline and footer.
HCP’s type scale
Plus Jakarta Sans
HCP uses the sans-serif typeface Plus Jakarta Sans as primary typeface.
Plus Jakarta Sans’ letterform
Plus Jakarta Sans compared to TT Norms
Iconography
Icons
HCP uses hand-drawn line drawings as icons.
HCP’s icons
Logo
HCP's logo features a hornbill emerging from its nest, symbolizing the program's focus on adoption of hornbill nests.
1. HCP uses circles to create the logo.
2. HCP’s logo
Shape
Categories
Components are grouped into shape categories based on their size.
HCP’s shapes follows circular form and rounded edges.
HCP’s shapes
Components
Buttons
HCP’s buttons
Cards
HCP uses cards format to present key information in an interesting way.
HCP’s cards
Motion
HCP’s uses motion to make the user experience interesting and enjoyable..
Stats animation
HCP uses a horizontal carousel format to show stats and details about the hornbills.
Hornbill stat's pop-up animation