NGO | UI Design + Full Stack Custom Website Development

Web Designer

Web Developer

UI Designer

Figma

Node.js

Tailwind CSS

Design System

Project Overview

The Grassroot Lab project was an exciting endeavor involving the creation of a website comprising four essential pages: Home 🏠, About Us 📜, Job Board 💼, Job Submission 📤, and Contact Us 📞. The client's design preference was Neobrutalistic 🖥️, in harmony with their commitment to innovative solutions for complex social issues.

About Grassroot Lab:

Grassroot Lab is a visionary organization dedicated to addressing complex social issues through a holistic approach. Their mission combines public-private partnerships, cutting-edge technology 🔬, a focus on first principles 🎯, and systemic solutions.

Project Objective

Upgrade user engagement, and impeccably convey Grassroot Lab's core values while infusing innovative element of Neobrutalistic design into the UI while keeping user engagement at the forefront.

Project Scope

Home Page: The first and foremost page, the Home Page, was designed to be welcoming and informative, serving as an entry point for visitors. It provides an initial glimpse into Grassroot Lab's work and mission.

About Us Page: The About Us Page dives deeper into the organization's core values, objectives, and their innovative approach to social issues. It was crafted to convey transparency and credibility.

Job Board: A central hub for job opportunities within Grassroot Lab and related initiatives, the Job Board presented a clear and structured layout for job listings, making it user-friendly.

Job Submission Page: The Job Submission Page streamlined the application process, ensuring easy access and submission of applications, reflecting Grassroot Lab's commitment to open opportunities.

Contact Us Page: The Contact Us Page was designed to encourage interaction and inquiries, featuring clear contact information and a user-friendly interface for reaching out.

Design Process

Client Consultation: 🗣️ We began by understanding Grassroot Lab's vision, mission, and design preferences. Clear communication ensured alignment with their goals.

Research and Planning: 📊 We conducted in-depth research into Neobrutalistic design principles and brainstormed ways to incorporate them into the website.

Design Development: 🎨 Our design team created mockups and prototypes, focusing on the Neobrutalistic design language, emphasizing simplicity and clarity.

Client Feedback: 🤝 We engaged in an iterative process, gathering feedback from the client and making necessary revisions to ensure alignment with their vision.

Development and Testing: ⚙️ Once the design was approved, our development team brought the website to life. Rigorous testing was conducted to ensure a seamless user experience.

User Personas:

We got to know our diverse audience inside out, embodying them in our design choices.

Persona 1 - Sarah, Tech-Savvy Activist

- 🚺 Age: 28

- 💼 Job: Social activist

- 💡 Needs: Seamless job hunting, intuitive navigation.

2. Persona 2 - Mark, Policy Maker

- 🚹 Age: 45

- 💼 Job: Government policy maker

- 💼 Needs: Detailed info on Grassroot Lab's mission and impact.

Information Architecture:

We built a user-focused structure, ensuring seamless navigation.

Components: Home, About Us, Job Board, Job Submission, and Contact Us.

- Home: The mission's visual showcase.

- About Us: Team profiles and milestones.

- Job Board: Intuitive job search.

- Job Submission: Easy job posting.

- Contact Us: Clear contact info and inquiry form.

Sketches and Wireframes:

Concept sketches guided us, and iterative wireframes shaped our design.

The goal: Optimize user journeys based on feedback.

- Visualized content placement and navigation elements.

Visual Design:

Neobrutalism, known for its bold and minimalistic design elements, was chosen as the design style. This design approach emphasized functionality and clarity.

In line with Grassroot Lab's innovative approach to social issues, Neobrutalism represented strength, honesty, and the willingness to confront challenges head-on. Neobrutalistic allure brought forth by:

⚫ High-contrast palette

⬛ Bold typography

Interaction Design:

Modernization through micro-interactions and animations:

💫 Animated buttons

🔄 Seamless page transitions

Usability Testing:

Usability testing with a small group of users in different age groups (ranging from 25 years to 60 years) helped identify and address minor issues with the design and user flow..

Outcome: Improved usability and accessibility.

- Enhanced mobile responsiveness.

- Improved form field accessibility.

Accessibility Considerations:

Inclusivity at the forefront.

Alt text for images.

Minimum contrast ratios.

Responsive Design:

Seamless adaptability across devices: - Mobile, tablet, desktop.

Development and Collaboration:

Collaboration drove development success:

Code reviews

Asset delivery and style guides

Final Design:

- Home: A captivating mission statement and visual impact representation.

- About Us: Team profiles and a milestone timeline.

- Job Board: User-friendly job search and filtering.

- Job Submission: Streamlined job posting form.

- Contact Us: Clear contact info and user-friendly inquiry form.

Results:

- Post-launch:

- 📈 18% user engagement surge.

- 📉 10% bounce rate reduction.

- 📊 21% conversion rate improvement.

Challenges and Lessons:

- Balancing Neobrutalistic design with user-friendliness:

- User feedback-driven refinements.

- The art of minimalism with usability.

Conclusion

The Grassroot Lab project is a testament to the power of design in conveying an organization's mission. The Neobrutalistic design enhances clarity and functionality, allowing Grassroot Lab to better communicate their multi-faceted approach to solving complex social issues.

Acknowledgments

We extend our gratitude to Grassroot Lab for entrusting us with this project and for their unwavering commitment to innovative solutions for challenging social issues. 🙏🌟

🎨 Ready to create a stunning, user-friendly digital experience? Our UI design service is here to make your project a success! 🚀

Dive Deeper into Our Services and Explore Our Most Recent Projects📂