Green Growth africa website redesign & Wordpress development
Figma
Wordpress
Project Description
Green Growth Africa is a sustainability-focused organization dedicated to empowering African youth, fostering environmental education, and driving green growth initiatives across the continent. This project involved redesigning and rebuilding their outdated website to better reflect their mission, showcase impactful programmes like the EcoHeroes Initiative and Mentoring for Research Programme, and improve user engagement. The redesign prioritized clarity, accessibility, and seamless navigation to highlight their environmental projects, partnerships, and educational resources.
Key Features
Visual Storytelling: Highlighted key initiatives like recycling projects, solar-powered solutions, and youth-led sustainability programs through immersive galleries and case studies.
Interactive Elements: Dynamic cards for programmes, animated impact statistics, and embedded videos to showcase success stories (e.g., converting plastic waste into building materials).
Integrated donation forms (via WordPress plugins like GiveWP) and newsletter subscriptions. Mobile-first design ensuring seamless experience across devices.
Accessibility features like alt text for images.
Challenges and Solutions
Challenge: Balancing dense content (e.g., project reports) with a clean design.
Solution: Used collapsible sections, tabs, and "Read More" buttons to prioritize key information without overwhelming users.
Challenge: Ensuring cross-browser compatibility for interactive elements.
Solution: Rigorous testing with BrowserStack and fallback designs for older browsers.
Challenge: Translating PDF-based impact data into engaging visuals.
Solution: Designed dynamic charts and infographics to visualize metrics like "1,200+ students trained" or "20% reduction in plastic waste."
Design Strategy & Process
Research & Discovery: Analyzed the existing website and organizational materials (e.g., PDF reports) to identify pain points: cluttered layout, outdated visuals, and poor mobile responsiveness. Collaborated with stakeholders to prioritize content hierarchy, focusing on youth empowerment, project impact, and donor engagement.
Wireframing & Prototyping (Figma): Created low-fidelity wireframes to map user journeys for donors, educators, and students. High-fidelity prototypes emphasized visual storytelling, with modular sections for programmes, impact stats, and success stories.
WordPress Development:
Theme Customization: Used Astra Theme + Elementor Pro for flexibility and speed.
Custom Plugins: Developed tailored solutions for project galleries, event calendars, and dynamic filtering (e.g., cohort years, project types).
SEO Optimization: Improved page speed (compressed images, lazy loading) and meta tags to boost search rankings
Content Migration: Restructured legacy content from PDF reports into digestible web pages, ensuring consistency with the new design. Integrated multimedia (e.g., videos, infographics) to enhance engagement.
Colour palette
#3A5525
#689A43
#000000
Typography
View Project
Impact
User Engagement: Increased average session duration by 40% post-launch.
Donation Uplift: Streamlined donation forms contributed to a 25% rise in contributions.
Stakeholder Feedback: Praised for modernizing the brand’s digital presence while retaining its mission-driven focus.
