HER IDEA NGO
How I Designed an Accessible Platform That Connects Students with Real-World Mentors
Her Idea, an NGO non-profit devoted to empowering girls, was looking to refresh their website to better engage potential mentors and students.
Her Idea, an NGO non-profit devoted to empowering girls, was looking to refresh their website to better engage potential mentors and students.
Role: Product Designer
Tools Used: Figma, Asana, Slack, Wix
When Her Idea approached me, they had already begun the process of redesigning their main web interface. With a graphic designer already on board, I was introduced to a team of two others to complete the redesign using best UI/UX practices and strategy.
+ Perform a UX/UI audit on the current design
+ Perform an accessibility audit
+ List out discoveries
+ Create a redesign game plan
TARGET AUDIENCE:
Girls between the age of 14-19, parents, sponsors, and local high schools.
PROJECT CONSTRAINTS:
+ Fluctuating Collaboration Environment
This project relied on a dynamic but fluctuating team of contributors. This presented the challenge of coordinating efforts across varying schedules, skill sets, and levels of commitment. To address this, I developed project management flows using Asana and ensured progress remained consistent.
+ Website Builder Constraints
Developing the Her Idea website on a platform like Wix came with its limitations. The need to work within pre-existing templates and functionalities restricted certain customizations, requiring creative problem-solving to achieve a design that met both functional, aesthetic, and accessible goals.
UI/UX:
+ The original design of the site lacked design consistency and flow.
+ The imbalance and tightness of the UI was negatively impacting the storytelling of the home page.
+ Navigation and forms needed reworking for better functionality and clear communication.
WCAG Guidelines:
+ Alt text and consistent HTML text classes were not established
+ Mobile responsiveness needed to be built out
+ Color contrast scored far below 4.5:1 for text elements
+ Paragraph size was below 16px
Competitive Analysis: To better understand how to effectively market each page to our target audiences, I dedicated significant time to researching how similar NGOs approach building out their websites.
For example, Room to Read’s donation page is specifically tailored to appeal to key audiences such as sponsors and donors, showcasing a targeted approach to content design. Content like this was missing from our original design and needed to be implemented.
Design Inspiration: I was inspired by the format of Doctors Without Borders' site, which was easy to navigate, and well organized.
Wireframes & Sketches: Sketching out ideas on paper helps kickstart the brainstorming process for my designs. It allows me to quickly jot down the strategic placement of elements and step back to assess their flow.
In this process I remapped the sitemap, adjusted a form to make it both more informational and accessible, and sketched out an updated version of the home page.
UI Design: Once we had established a more accessible color scheme for the site, the design of the UI elements remained simple and clean. My client wanted designs with curved edges to convey a youthful and friendly vibe, while maintaining a professional undertone.
To the right, you can see the various iterations I developed for the homepage hero section.
Final Designs: Though the final designs are still in the workings, here are a few images of the current iteration we are working with.
Impact: This updated version of the site improves both accessibility and user experience. The design is now more intuitive and easier to navigate, allowing users to find relevant information quickly. Each page is streamlined with clear details about the programs offered, eliminating redundancies, and providing a more seamless experience for visitors.
Takeaways: Working on this project taught me the importance of balancing accessibility with a clean, user-friendly design. I learned how to prioritize user needs while ensuring that the website’s content is clear and easy to navigate.
This project honed my ability to think strategically about UI elements, refine designs with iteration, and focus on creating a product that serves both the audience and the organization’s goals.
Next Steps: Since this is an ongoing project, the next steps involve refining the design elements to clearly convey the professionalism and reliability of the organization. The goal is to ensure that Her Idea's mission and objectives are communicated well, making it a compelling choice for students, volunteers and potential sponsors.