Project Overview
Hunger Free Oklahoma (HFO) is a Tulsa-based nonprofit dedicated to addressing hunger through statewide advocacy and resource distribution. HFO needed a complete website redesign to enhance usability, accessibility, and user experience, while also emphasizing their role as a key community resource. My role was to design seven custom, responsive pages that aligned with their mission and improved user engagement.
Challenge
The primary challenge was defining and structuring the user experience. At the start of the project, the client had multiple audience segments but lacked clarity on how to serve them effectively. Each audience had distinct goals, requiring a UX strategy that ensured users—regardless of their starting point—could navigate seamlessly to their intended destination without friction.
User Research & Persona Development
To refine the UX approach, I conducted:
- An SEO analysis to assess existing user behavior.
- Stakeholder interviews to define key user groups.
- Through this process, we identified three primary user personas:
- Community members seeking food assistance.
- Legislators looking for policy information.
- Potential community partners exploring collaboration opportunities.
With these personas in place, I mapped out tailored user flows to ensure each audience could achieve their objectives intuitively.
User Flows & Information Architechture
I developed custom user flows for each persona, aligning their journey with HFO’s key objectives. This allowed us to create a structured navigation system that simplified access to critical resources and action items, such as food assistance, legislative updates, and partnership opportunities.
UX/UI Design Implementation
With the user flows validated, I moved into the design phase, ensuring that the website would be both visually appealing and highly functional:
Brand Alignment: The design incorporated color blocking inspired by HFO’s logo, providing a clean, modern aesthetic.
Interactive Elements: Hover states and interactive buttons were integrated to enhance engagement.
Accessibility & Responsiveness: The design followed accessibility best practices for an inclusive user experience.
Development Readiness: AOS (Animate on Scroll) effects were planned for the homepage to enhance visual storytelling in development.
The final design delivered a streamlined, user-focused experience, ensuring that all visitors—regardless of background or objective—could navigate the site efficiently and without frustration.
Agency: Back40 Design | Designer: Amber Plaksin