Ecoroots
Built a volunteer platform with organized information architecture for visitors, volunteers, and organizers. Created consistent patterns for impact metrics, event cards, and donation flows that make environmental data accessible and engaging across all pages.
Objectives
The primary objective of this project is to find volunteers, raise awareness about deforestation and the harmful effects of not properly disposing of waste, and conduct donation campaigns to support environmental conservation efforts.
Role
Tools and Technologies
Approach
To address these challenges, Ecoroots implemented a multi-faceted strategy:
- Volunteering Initiatives: Organizing community clean-up events, tree planting activities, and workshops to educate participants on sustainable practices.
- Donation Drives: Launching fundraising campaigns to support reforestation projects and waste management initiatives, and to provide resources for community education.
- Awareness Campaigns: Leveraging social media, local events, and educational programs to inform the community about the importance of proper waste disposal and the impact of deforestation.
Design Process
Whenever I create a web design, I typically begin by identifying direct competitors. Since working at startup companies often means limited time for comprehensive user research, conducting a competitor analysis is the next best approach.
If the company already has dedicated brand guidelines, competitor analysis and an inspiration board are usually already done, allowing me to move directly to creating wireframes. However, if there are no dedicated brand designers, I start by creating an inspiration board and establishing a quick color hierarchy to ensure consistency, even in the absence of formal branding.
Once the inspiration board and color hierarchy are set, I typically skip the traditional low-fidelity wireframes, as they can be time-consuming. Instead, I move directly to creating mid-fidelity to high-fidelity wireframes, which closely resemble the final product.
This approach saves time and allows me to focus on delivering the final output more efficiently. Rest assured, skipping the low-fidelity wireframes does not compromise the quality of the final design. I ensure that every step is carefully executed to maintain the integrity and effectiveness of the design.
Style Guide Creation
Features and highlights
Volunteering Initiatives
- An easy-to-use form for individuals to sign up and get involved in hands-on activities, such as clean-up drives, tree planting, and awareness campaigns.
- Tailored opportunities for volunteers to engage based on their interests and availability.
Awareness Campaign
- A visually compelling gallery of completed and ongoing projects, featuring before-and-after visuals, success stories, and milestones.
- Engaging visual that bring EcoRoots’ efforts to life and inspire action.
Ecoroots Stories
- A dedicated space to share EcoRoots' mission, vision, and story, highlighting the journey and values that drive the organization.
- Testimonials and stories from community members and partners showcasing the positive impact of their collaboration.
Heatmap Summary
Homepage Heatmap Insights
- Both desktop and mobile users show strong interest in the Become a Volunteer button, highlighting its importance as a primary call-to-action.
- The Donate Now button resonates well with desktop users but might need increased visibility or prominence for mobile users.
- Desktop users are focused on actions early in the page and disengage quickly, indicating a need for concise, impactful content above the fold.
- Mobile users scroll further, suggesting they are more likely to explore additional content.
About Us Heatmap Insights
- Desktop users are drawn to content about Our Work and Activities, indicating these are high-priority areas. Make sure these sections are visually appealing and well-organized.
- Mobile users rely heavily on the menu button, underscoring the need for a clear and functional navigation experience.
- Desktop users lose interest or find their needs met within the top 30% of the page. Highlight key information and calls to action early on for this audience.
- Mobile users scroll more extensively (up to 80%), so ensure engaging content is evenly distributed throughout the page.
Page speed
Our website is designed to deliver a seamless and efficient experience for all users. With an overall page speed score of 96 on desktop and 86 on mobile, we ensure quick loading times and smooth navigation whether you're at home or on the go. We're committed to providing you with the best online experience, so you can easily explore our initiatives, participate in volunteering, and support our environmental campaigns.
Desktop page speed
Mobile page speed
Related Design Project
Adventure Camp
Design a scout and camping tour brimming with activities for every age group. From thrilling nature hikes and rock climbing to serene stargazing and campfire stories, we’ve crafted the perfect adventure.
Shadow Quest
Shadow Quest is a free isometric RPG where you’ll explore mystical lands, uncover treasures, and battle fearsome foes, all with a striking Dark UI and stunning isometric visuals.
Pixel Pro
Pixel Pro Digital Agency is all about bringing bold ideas to life. I combine creative design, smart strategies, and custom digital solutions to help brands stand out.
Everbloom Mockups
Create a variety of mockups for Everbloom that showcase its products in a visually compelling way while maintaining a perfect balance between a premium aesthetic and an inviting, approachable feel.
Product Composites
Create a visually compelling product composite by seamlessly integrating the mockup with the background, ensuring a natural and realistic presentation that enhances the overall appeal.
Business cards
Create a business card that incorporates elements of bold typography and luxurious design, offering a unique and sophisticated brand representation.
Adventure Camp Brochure
Design a vibrant tri-fold brochure that seamlessly blends bold visuals with a fun, energetic feel—perfectly capturing the adventurous spirit of the Adventure Camp brand while keeping it engaging and easy to navigate.
Personal Portfolio
Hey, I’m John! I design websites that look great and feel effortless to use. My portfolio showcases a balance of aesthetics and usability, ensuring seamless experiences for users.
