Weero: A UX/UI Design System for Cockatiel Cottage
A screenshot of the living style guide for the Weero Design System, showcasing color tokens.
Overview
Weero is a structured UX/UI design guideline created to improve the user experience and branding for Cockatiel Cottage, an online resource for bird care. This design system defines typography, color palettes, UI components, and accessibility guidelines to ensure a cohesive and user-friendly interface.
The project involved a detailed site assessment of the existing website, identifying usability issues, and developing a set of design tokens, components, and reusable patterns to enhance readability, accessibility, and overall aesthetics
The Problem
Inconsistent Design & Branding – The website lacked a unified visual identity.
Poor Readability – Font choices and contrast made content hard to read.
Non-Scalable UI Elements – Buttons, forms, and layouts were inconsistent.
Accessibility Issues – Color contrast and typography choices didn’t meet modern accessibility standards.
The Process
Site Assessment & Research
Evaluated the existing Cockatiel Cottage website for usability pain points.
Conducted color contrast tests to check for accessibility issues.
Identified typography inconsistencies that impacted readability.
Establishing Design Tokens
Defined core brand elements:
Primary Brand Color – #243966 (Used for key UI elements like navigation and buttons).
Secondary & Accent Colors – Supporting colors for visual balance and hierarchy.
Typography System – Selected Poppins for clean, modern readability while incorporating a handwritten display font to preserve the original site’s character.
UI Components & Reusable Patterns
Standardized Buttons (Primary, Secondary, Tertiary) for a cohesive user experience.
Input Fields & Form Styles for consistent interactions.
Cards & Layout Patterns to ensure structured content presentation.
Accessibility & Usage Guidelines
Improved color contrast for better readability.
Defined usage examples for each component to guide consistency.
Created a structured documentation system for future scalability.
The Solution: Weero Design System Features
Unified Color Palette – Ensures a consistent brand identity across all pages.
Accessible Typography Choices – Improves readability without losing personality.
Reusable UI Components – Buttons, forms, and layout patterns for visual consistency.
Scalable & Future-Proof – Designed to be expandable as the website grows.
A reusable button component for the Weero Design System.
A pattern for a contact form for the Design System.
Key Takeaways & Learnings
The balance between personality & usability is key – Keeping the fun, casual nature of the original site while improving its usability was a challenge.
Accessibility should be prioritized from the start – Color contrast and readability improvements make a huge impact on user experience.
Design systems provide long-term scalability – Establishing reusable components and patterns ensures future design consistency.