The green economy is growing rapidly, but there's a massive access problem. While the world needs to double its green talent by 2050 to meet net-zero goals, the people who could fill these roles are being left behind.
The specific problems are:
-
Lack of Representation: Only 5-7% of clean-energy workers are from ethnic-minority backgrounds, despite these communities often being most affected by climate change.
-
No Career Guidance: 70% of young people have never received green-career guidance, meaning they don't even know these opportunities exist.
-
Invisible Barriers: Traditional career platforms assume everyone has the same starting point - they don't address real barriers like lack of networks, financial constraints, or unfamiliarity with "green" industries.
-
Scattered Resources: Information about green careers, training, funding, and mentorship exists but is spread across dozens of different websites and organizations.
Primary Impact: Black, Asian, and minority ethnic communities who face systemic barriers to accessing green career opportunities.
Secondary Impact:
- First-generation college graduates who lack professional networks
- People from lower-income backgrounds who can't afford unpaid internships
- Career changers who don't know how their existing skills translate to green jobs
- Young people in areas with limited green job visibility
Real People: We created three personas based on real experiences:
- Jamal Patel: 23, Environmental Science graduate struggling to break into the green sector despite his qualifications
- Aisha Rahman: 26, Policy Analyst wanting to transition to climate policy but lacking connections
- Rohan Singh: 29, Solar Installer looking to advance to project management roles
Greenovate Hub is a comprehensive platform that reimagines access to green careers specifically for underrepresented communities. Instead of just listing jobs, we create a complete support ecosystem.
1. Personalized Assessment & Guidance
- Interactive assessment tool that maps your existing skills to green career opportunities
- Shows you're not starting from zero - you already have valuable, transferable skills
- Provides personalized career pathways based on your background and goals
2. Removes Information Barriers
- All resources in one place: jobs, training, funding, mentorship
- Plain language explanations of what different green careers actually involve
- Real salary ranges and entry requirements for transparency
3. Community-Driven Development
- Built FOR underrepresented communities, not just ABOUT them
- Community feedback system where users shape platform development
- Peer networking and experience sharing
4. Practical Support
- Direct connections to mentors from similar backgrounds
- Information about grants and funding specifically for underrepresented groups
- Childcare-friendly training options and flexible learning paths
5. Confidence Building
- Success stories from people who look like you
- Skills-based approach that highlights your strengths
- Step-by-step guidance that doesn't assume prior knowledge
Frontend Architecture:
- Next.js 14 with React for the main application
- Tailwind CSS for styling with custom Octopus Energy brand colors
- TypeScript for type safety and better development experience
- Responsive design ensuring accessibility across all devices
Key Components:
-
Assessment Wizard (
modal-wizard.tsx)- 10-step interactive assessment
- Skills evaluation across 8 green career domains
- Personalized results and recommendations
- PDF export functionality for users to save their results
-
Green Skills Pyramid (
pyramid.tsx)- Visual representation of career progression
- Interactive tiers showing different experience levels
- Detailed information about roles at each level
-
Community Features
- Feedback submission system
- Community ideas voting platform
- Peer networking components
-
Accessibility (
accessibility-context.tsx)- Screen reader support
- Keyboard navigation
- High contrast mode
- Font size adjustment
Data Management:
- Static JSON files for configuration and learning content
- Local state management with React hooks
- Context API for global state (accessibility settings)
Current Architecture:
Frontend (Next.js) → Static Data (JSON) → User Interface
File Structure:
app/greenovate-hub/
├── page.tsx (Main landing page)
├── components/
│ ├── modal-wizard.tsx (Assessment tool)
│ ├── pyramid.tsx (Career progression visual)
│ ├── steps/ (Individual assessment steps)
│ └── accessibility-controls.tsx
├── contexts/
│ └── accessibility-context.tsx
└── data/
├── config.json (Platform configuration)
└── learning.json (Career and learning data)
Currently: No backend - the platform runs entirely on the frontend with static data. This was an intentional design choice for the hackathon to focus on user experience and rapid prototyping.
Data Sources:
- Career information stored in
data/learning.json - Platform configuration in
data/config.json - User responses stored in browser local storage
- Community feedback simulated with local state
Current State: No database - all data is static or stored locally in the browser.
Future Database Design (see Next Steps):
- User profiles and assessment results
- Community feedback and voting
- Mentor-mentee matching data
- Job listings and applications
- Learning progress tracking
1. Balancing Simplicity with Comprehensiveness
- Challenge: Green careers span dozens of industries - how do you make it comprehensive without overwhelming users?
- Solution: Created a tiered approach with the pyramid structure, allowing users to start simple and dive deeper as needed.
2. Accessibility Implementation
- Challenge: Ensuring the platform works for users with different abilities and technical comfort levels.
- Solution: Built accessibility features from the ground up, not as an afterthought. Added screen reader support, keyboard navigation, and visual adjustments.
3. Dark Theme Consistency
- Challenge: Maintaining readable text and proper contrast across all components while keeping the Octopus Energy brand aesthetic.
- Solution: Created a systematic color scheme with
octopus-dark,octopus-white,octopus-green, andoctopus-pinkclasses, then methodically applied them across all components.
4. Community Feature Design
- Challenge: How do you create meaningful community engagement without building complex social features?
- Solution: Focused on structured feedback and voting systems rather than open forums, making it easier to moderate and more focused on platform improvement.
5. Assessment Tool Complexity
- Challenge: Creating an assessment that's thorough enough to be useful but not so long that users abandon it.
- Solution: Broke it into 10 digestible steps with clear progress indicators and the ability to save/resume progress.
Iterative Design: We built, tested, and refined each component multiple times based on user flow testing.
Component-Based Architecture: Breaking everything into reusable components made it easier to maintain consistency and fix issues across the platform.
User-Centered Approach: Every design decision was evaluated against the question: "Does this help or hinder someone from an underrepresented background accessing green careers?"
Technical Skills:
- Advanced Next.js 14 features and routing
- Complex state management with React Context
- Accessibility implementation best practices
- Responsive design with Tailwind CSS
- TypeScript integration in a large project
Design Skills:
- Creating inclusive user experiences
- Balancing information density with usability
- Building trust through transparent design
- Color theory and contrast for accessibility
Problem-Solving:
- How to research and understand complex social problems
- Breaking down large problems into actionable solutions
- Prioritizing features for maximum impact
✅ Built a Complete Platform:
- 10-step interactive assessment tool
- Comprehensive career guidance system
- Community engagement features
- Full accessibility support
- Mobile-responsive design
✅ Created Real Value:
- Addresses genuine barriers faced by underrepresented communities
- Provides actionable career guidance, not just information
- Built with input from the communities it serves
✅ Technical Excellence:
- Clean, maintainable codebase
- Proper TypeScript implementation
- Comprehensive component library
- Performance-optimized with Next.js
✅ User Experience:
- Intuitive navigation and user flow
- Clear, jargon-free language
- Visual hierarchy that guides users naturally
- Consistent branding and design system
✅ Inclusive Design:
- Screen reader compatibility
- Keyboard navigation support
- High contrast options
- Multiple ways to access the same information
Phase 1: Backend Development (Next 3 months)
- Build user authentication system
- Create database schema for user profiles and assessments
- Implement API endpoints for data management
- Add real-time community features
Phase 2: Enhanced Features (Months 4-6)
- Live mentor matching system
- Integration with real job boards and training providers
- Advanced analytics and progress tracking
- Mobile app development
Phase 3: Community Growth (Months 7-12)
- Partner with organizations serving underrepresented communities
- Launch pilot programs with universities and community colleges
- Develop content partnerships with green employers
- Create certification pathways
Immediate Improvements:
-
Add Real Data Integration
- Connect to live job boards (Indeed, LinkedIn, specialized green job sites)
- Partner with training providers for real course listings
- Integrate with grant databases for funding opportunities
-
Enhanced Personalization
- Machine learning for better career matching
- Personalized learning paths based on assessment results
- Customized content based on location and background
-
Community Features
- Real user profiles and networking
- Mentorship matching algorithm
- Success story submission and sharing
- Local meetup coordination
Long-term Vision:
-
Ecosystem Integration
- API for other platforms to integrate our assessment tool
- White-label solutions for organizations
- Integration with HR systems for employers
-
Data-Driven Insights
- Analytics dashboard for partner organizations
- Research reports on green career accessibility
- Policy recommendations based on user data
-
Global Expansion
- Multi-language support
- Localized content for different regions
- Cultural adaptation for different communities
Success Metrics:
- Number of users completing assessments
- Career transitions tracked through the platform
- Community engagement levels
- Partner organization adoption
- Diversity metrics in green career placements
- Implement proper error handling and loading states
- Add comprehensive testing suite
- Optimize performance for large datasets
- Implement proper SEO optimization
- Add analytics and user behavior tracking
Short-term (1 year):
- 10,000 users complete career assessments
- 500 successful career transitions
- 50 mentor-mentee matches
- 20 partner organizations
Long-term (3 years):
- Measurable increase in diversity in green careers in partner regions
- Recognition as the go-to platform for inclusive green career development
- Policy influence on green career accessibility
- Sustainable business model supporting continued development
This project represents more than just a platform - it's a movement toward making green careers accessible to everyone, regardless of their background or starting point. By focusing on the real barriers people face and building solutions with the communities we serve, we're not just creating another job board - we're reimagining what career support can look like in the 21st century.