Tangle

Tangle

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.

About Tangle

About Tangle

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.

Product Architecture

Product Architecture

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

Layout

Layout

Grid system

Tangle uses grid system to ensure clean and organized layout.

Tangle’s grid System

Color

Color

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

Zack Bonds 20224

Zack Bonds 20224