← Back to Documents
Document Overview
This comprehensive guide consolidates all visual design materials, wireframes, mockups, and user experience documentation for the Tally Sticks UK project. It serves as the central resource for designers, developers, and users contributing to the visual identity and user experience of the platform.
1. Visual Identity & Brand Guidelines
1.1 Logo System
The Tally Sticks UK visual identity centers on our constitutional principles:
Primary Logo Elements:
- Shield: Protection and governance
- Scales: Equity and fair dealing (Constitutional Principle 5)
- Lighthouse: Transparency and guidance (Constitutional Principle 3)
- Crown: Service to the realm ("SERVICE OVER POWER")
- Digital blocks: Modern blockchain transparency
Available Logo Versions:
tally-sticks-logo-simplified.svg - Primary use (120x140px)favicon.svg - Browser icons (32x32px)tally-sticks-crest-original.jpg - Ceremonial use only
1.2 Color Palette
Tally Blue Primary
#003366
Authority and trust
Tally Blue Accent
#005f9e
Action and clarity
Light Blue
#90c5ff
Accessibility and openness
White
#ffffff
Transparency and purity
Usage Guidelines:
- Primary blue for headers, navigation, and key actions
- Accent blue for hover states and secondary actions
- Light blue for highlights and subtle accents
- White for backgrounds and text contrast
1.3 Typography
Primary Font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial
Hierarchy:
- H1: 3em, weight 600 (Hero sections)
- H2: 1.8em, Tally Blue Primary (Section headers)
- H3: 1.4em, Tally Blue Accent (Subsections)
- Body: 1em, line-height 1.7 (Optimal readability)
2. User Interface Wireframes
2.1 Public Portal Layout
+------------------------------------------+
| [Logo] Tally Sticks UK [Navigation] |
+------------------------------------------+
| Hero Section |
| [Crest] Title [Motto] |
| "SERVICE OVER POWER" |
+------------------------------------------+
| Main Content |
| +------------------+------------------+ |
| | Transparency | Quick Access | |
| | Dashboard | - Documents | |
| | | - Claims | |
| | [Real-time | - Development | |
| | Updates] | - Contact | |
| +------------------+------------------+ |
+------------------------------------------+
| Footer |
| Links | Debt Clock | Copyright |
+------------------------------------------+
2.2 Government Employee Console
+------------------------------------------+
| [Secure Access] Department Dashboard |
+------------------------------------------+
| [Filter Controls] [Search] [Actions] |
+------------------+---------------------+
| Claims Queue | Analytics |
| - Pending | - Compliance |
| - In Review | - Performance |
| - Approved | - Audit Trails |
| - Flagged | |
| | [Quick Actions] |
| [Batch Actions] | - New Claim |
| | - Generate Report |
+------------------+---------------------+
2.3 Mobile-First Design
Mobile View (<768px):
+------------------------------------------+
| [☰] [Tally Logo] [Profile] |
+------------------------------------------+
| |
| Hero Banner |
| [Simplified Crest] |
| "SERVICE OVER POWER" |
| |
+------------------------------------------+
| Card-Based Content |
| +------------------------------------+ |
| | Documents Card | |
| +------------------------------------+ |
| | Development Card | |
| +------------------------------------+ |
| | Benefits Card | |
| +------------------------------------+ |
+------------------------------------------+
| Bottom Navigation |
| [Home][Docs][Dev][Contact][Support] |
+------------------------------------------+
3. Interactive Mockups
3.1 Document Viewer Modal
+------------------------------------------+
| [X] Document Viewer [Download] |
+------------------------------------------+
| |
| PDF Preview Area |
| |
| +------------------------------------+ |
| | | |
| | [Document Content] | |
| | | |
| +------------------------------------+ |
| |
+------------------------------------------+
| [View] [Embed] [Download] [Share] |
+------------------------------------------+
3.2 Transparency Dashboard
+------------------------------------------+
| Transparency Status |
+------------------------------------------+
| Stage: [Public] [Intimacy] [Private] |
| Duration: [Progress Bar] [Timer] |
+------------------------------------------+
| Current Claims |
| +------------------------------------+ |
| | Claim #001 | Status | Amount | Dept | |
| | Claim #002 | Status | Amount | Dept | |
| | Claim #003 | Status | Amount | Dept | |
| +------------------------------------+ |
| |
| [Filter: All | Today | This Week] |
| [Sort: Date | Amount | Department] |
+------------------------------------------+
3.3 Claims Management Interface
+------------------------------------------+
| New Claim Entry |
+------------------------------------------+
| Title: [_________________________] |
| Amount: [£______] Department: [____] |
| Description: |
| +------------------------------------+ |
| | | |
| | [Text Area] | |
| | | |
| +------------------------------------+ |
| |
| Attachments: [Choose Files] [Preview] |
| |
| [Save Draft] [Submit] [Cancel] |
+------------------------------------------+
4. User Experience Flows
4.1 Public User Journey
Entry → Information Gathering → Document Access → Understanding
↓ ↓ ↓ ↓
Landing → Benefits/About → Documents Page → Contact/Support
↓ ↓ ↓ ↓
Clear Value Prop Easy Access Easy Engagement
Value Understanding Modal Viewing Multiple Channels
4.2 Government Employee Flow
Authentication → Dashboard → Claims Management → Reporting
↓ ↓ ↓ ↓
Secure Login Overview &
Multi-factor Quick Stats Claims Progress Share Reports
4.3 Transparency Lifecycle
Private Stage → Intimacy Stage → Public Stage → Archive
↓ ↓ ↓ ↓
Initial Prep Review & Validate Full Access Historical
Restricted Department Only Public View Reference
6. Accessibility Standards
6.1 WCAG 2.1 AA Compliance
Color Contrast:
- Text on backgrounds: Minimum 4.5:1 ratio
- Large text (18pt+): Minimum 3:1 ratio
- Interactive elements: Clear visual indicators
Keyboard Navigation:
- All interactive elements accessible via keyboard
- Logical tab order throughout interface
- Visible focus indicators (2px outline, Tally Blue)
Screen Reader Support:
- Semantic HTML structure
- Alt text for all images and icons
- ARIA labels for complex interactions
- Descriptive link text
6.2 Universal Design Principles
Motor Accessibility:
- Touch targets minimum 44x44px
- Adequate spacing between interactive elements
- Support for assistive devices
Cognitive Accessibility:
- Clear, consistent navigation
- Simple language and terminology
- Progress indicators for multi-step processes
- Error prevention and recovery guidance
7. Contribution Guidelines for Designers
7.1 Design System Standards
File Organization:
/design-assets/
/logos/ # Brand assets
/wireframes/ # Functional layouts
/mockups/ # Visual designs
/prototypes/ # Interactive demos
/style-guides/ # Design specifications
Naming Conventions:
- Descriptive, kebab-case filenames
- Version control indicators (v1, v2, etc.)
- Platform indicators (web, ios, android)
- Component type prefixes (wireframe-, mockup-, prototype-)
7.2 Design Handoff Process
Required Deliverables:
- Wireframes (low-fidelity layouts)
- High-fidelity mockups (visual design)
- Interactive prototypes (user flows)
- Specifications document (measurements, colors, fonts)
- Asset exports (SVG, PNG, appropriate formats)
Review Process:
- Constitutional alignment check
- Accessibility compliance verification
- Technical feasibility assessment
- User experience validation
- Brand consistency review
7.3 Tools and Standards
Recommended Tools:
- Figma (primary design tool)
- Adobe Illustrator (logo and icon work)
- Principle/Framer (interactive prototypes)
- Sketch (alternative design tool)
Export Standards:
- SVG for icons and simple graphics
- PNG for complex images with transparency
- JPG for photographs only
- PDF for documentation
8. User Feedback Integration
8.1 Feedback Collection Methods
Direct Channels:
- Contact form on website
- Email feedback (ux@tallysticks.uk)
- GitHub issues for technical feedback
- Community forums (when available)
Analytics Integration:
- User journey tracking
- Heat mapping on key pages
- A/B testing for design decisions
- Performance monitoring
8.2 Iterative Design Process
Feedback Loop:
Design → Prototype → Test → Analyze → Refine → Deploy
↑ ↓
←←←←←←←← User Feedback ←←←←←←←←←←←←←←←←←←←←←←←←←
Version Control:
- All design changes tracked and documented
- User feedback categorized and prioritized
- Constitutional compliance maintained through iterations
- Regular design system updates based on learning
8.3 Community Involvement
Open Source Design:
- Design files available in public repository
- Community contributions welcomed
- Regular design critiques and feedback sessions
- Transparent decision-making process
User Testing Programs:
- Beta testing for new interface elements
- Accessibility testing with diverse user groups
- Usability testing sessions
- Regular user surveys
Next Steps for Contributors
For Visual Designers
- Review existing wireframes in
/docs/ui-ux/
- Study brand guidelines and logo system
- Propose improvements via GitHub issues
- Submit design contributions following handoff process
For UX Researchers
- Review user journey documentation
- Propose user testing methodologies
- Analyze existing user feedback
- Suggest accessibility improvements
For Developers
- Reference design specifications for implementation
- Ensure responsive design compliance
- Implement accessibility features
- Maintain design system consistency
For Users
- Provide feedback through established channels
- Participate in beta testing programs
- Share accessibility needs and requirements
- Contribute to community discussions