Scattering Resources
Empowering the local community
Through our website redesign, Scattering Resources now offers an enhanced and accessible platform, positively impacting the community by streamlining information access and engagement
📓 Background Info
Local nonprofit outreach organization based in Atlanta, Georgia
Scattering Resources, established in 2009 in Atlanta, Georgia, aims to uplift disadvantaged individuals in the U.S. and Haiti. SR campaigns, offers workshops, and facilitates discussions to foster independence. Contributions include non-perishable items and resources sent to Haiti to combat poverty.
😫 The Problem
Challenges arising from low site visitor engagement
The current Scattering Resources website presents challenges with its layout, design, and navigation, hindering user-friendliness. Moreover, the lack of efficient integration among staff, volunteers, donors, and participants poses difficulties in centralizing nonprofit operations.
👥 Users
- Scattering Resources Board Members (Client)
- Atlanta's disadvantaged individuals
- Donors
🎯 The Goal
To increase website visitors to donate and inspire people to support Scattering Resources
Enhancing User Experience: Introducing a Resources Page and Streamlining Content on the 'Our Work' Page for Clarity and Accessibility
- Create a separate events page with an archive list of past events - This new redesign feature will allow visitors to see past events that the organization hosted and garner interests for participants interesting in attending learn more about upcoming events.
- Rewording the “Our Work” page and splitting the contents of the page in two. Thus allowing for users of the site to absorb as much information they need while also not being confused in terms of looking for their right information
Our Approach to the Redesign
Our design process is was to deliver the product asap since our project timeline as volunteer wasn't that long. It consists of three main phases: "Identifying The Issue" and "Designing the Solution". In the initial phase, we gather information about the user, their needs, and pain points. This information then guides our ideation process, where we brainstorm and generate ideas based off the research. We then create mockup designs in 2nd phase to test and refine our concepts before conducting user testing to validate our ideas.
Identifying weaknesses
💡 We discovered that
Strengthening Website Functionality: Addressing Weaknesses in Navigation, Call-to-Action Clarity, and Content Presentation
- Segregate webpages for volunteer work/recruiting and workshop services for clearer user understanding.
- Weak CTA section lacks context and visual cues, hindering user engagement. Also, "Our Partners" section is missing content.
- Revise "Our Work" tab to "Our Services" for improved clarity.
- Sections lack differentiation, making it challenging for users to understand workshop purposes.
- Enhance information hierarchy to prioritize key user information and offer related sub-information for a comprehensive experience.
💭 Things to consider
After taking in critique feedbacks from the current website. We start to question ideas for improvements
- How could we enhance the presentation to clearly convey the focus of each workshop?
- Could we explore ways to make it more compelling and engaging?
User Interviews
📝 Takeaways
I found out that there needs to be a simplified way to access information for "resources, events, and donation."
- The users of the website main criteria is that they needed the website to be simply where they can simply access information on the resources, events and donation.
🎨 Ideas We Referenced
Our client provided use with a couple of references she wanted us to take some ideas of and reimagined it into the new redesign.
- The World Wildlife Fund website (WWF.org)
- Americana Community Center Inc (americanacc.org)
✨ Inspirations
These are screenshots of various content design elements. We might consider implementing into the design.
- Creating a content card grid for the events
- Incorporate a horizontal clickable carousel of “financial tips”
Design Systems
Preserving Brand Identity: Maintaining Visual Consistency in Design System Development
In developing the design system, we remained aligned with the organization's existing branding and theme, ensuring a seamless continuation of its identity. Our focus was on maintaining visual consistency throughout the website while adhering to the established identity.
Lofi Digital Wireframes
Creating low-fidelity wireframes for quick iteration and exploration of design ideas without being too detailed. Saving time and energy
Low-fidelity wireframes are crucial for quick iteration and exploration of design ideas without being too detailed. They helped us focus on the website's overall structure and layout, ensuring that it was user-friendly and easy to navigate. Lo-fi wireframes saved time and resources by allowing us to make informed design decisions early on. Collaboration and feedback from stakeholders were facilitated by lo-fi wireframes, which helped to align everyone on the project goals and design direction.
🤔 Coming Up With Design Ideas
Design considerations: Client content preferences, Existing Layout Analysis, and Iterative Placement Mapping
- While devising the design concepts for the webpages, we remained focused on aligning with the client's content preferences and requirements.
- We closely observed the existing page layout and informational structure, integrating these insights into the redesign.
- Initiating the process, we mapped out potential placements for each content section and subsequently iterated through multiple versions to achieve client satisfaction.
Feedback & Changes
📝 Takeaways
Client suggest: Including more visual elements, creating a seperate page with dedicated topics, and improving information architecture.
- leverage visual elements like images and icons for enhanced engagement.
- Separate Workshops/Webinars from Necessities under an "Educational Services" section.
- Clarify content organization and navigation to highlight educational offerings.
📝 Takeaways
Refining workshop access and restructuring educational resources for better navigation
- Enhance workshop navigation with a dedicated tab.
- Separate and clarify necessities vs. educational resources.
- Create a section for financial literacy education.
High-Fidelity Designs
🩹 Implementing Changes for final design
Final Design Enhancements: Streamlined Content, Enhanced Workshop Sections, and Improved Resource Navigation
- Content information split into two separate pages.
- Workshop sections visually enhanced for easy identification.
- Workshop divided into four sections, each with info and registration.
- Resources section streamlined with a dropdown for specific info.
🤓 Reflection
In reflecting on the Scattering Resources project, I gained valuable experience as project manager and learned to balance the project plan with client requests. Managing changes to the website design proved challenging, but helped me develop skills in navigating client requests while maintaining project integrity. This project was a valuable learning experience that allowed me to grow both professionally and personally.