Tangle is a website designed for a wildlife conservation program focused on resolving the imbalance in nature. The website has been designed to inform visitors about the current status of wildlife, offer comprehensive details about the program, and present actionable ways for individuals to contribute to wildlife conservation efforts.
Tangle's user interface design is a testament to its dedication to wildlife conservation and restoring balance in nature. The website's interface seamlessly combines functionality with aesthetic appeal, providing users with an immersive and intuitive browsing experience.
Minimal aesthetics
Tangle 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.
Tangle'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.
Tangle's donation details
Grid system
Tangle uses grid system to ensure clean and organized layout.
Tangle’s grid System
Color theme
Tangle follows yellow and black color scheme which resembles the color of the Great Hornbill.
Tangle’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
Tangle’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.
Tangle’s type scale
Plus Jakarta Sans
Tangle uses the sans-serif typeface Plus Jakarta Sans as primary typeface.
Plus Jakarta Sans’ letterform
Plus Jakarta Sans compared to TT Norms
Iconography
Icons
Tangle’s uses hand-drawn line drawings as icons.
Tangle’s icons
Logo
Tangle’s logo features a hornbill emerging from its nest, symbolizing the program's focus on adoption of hornbill nests.
1. Tangle uses circles to create the logo.
2. Tangle’s logo
Shape
Categories
Components are grouped into shape categories based on their size.
Tangle’s shapes follows circular form and rounded edges.
Tangle’s shapes
Components
Buttons
Tangle’s buttons
Cards
Tangle uses cards format to present key information in an interesting way.
Tangle’s cards
Motion
Tangle’s uses motion to make the user experience interesting and enjoyable..
Stats animation
Tangle uses a horizontal carousel format to show stats and details about the hornbills.
Tangle stat's pop-up animation