The goal is to create an updated, user-friendly website for the Urban League of Springfield that effectively communicates its mission and serves the needs of the community.
✦ Engagement: Improve navigation, user experience, and increase traffic to website
✦ Communication: Highlight key services and advocacy efforts.
✦ Accessibility: Ensure the site is inclusive and easy to use for all visitors.
We faced several challenges that required strategic solutions to design an efficient and impactful website for the Urban League.
✦ Limited Resources: Budget, manpower, and tech limitations thus the need for automated designs.
✦ Stakeholder Complexity: Navigated the diverse needs of staff, volunteers, donors, and their community
✦ Competitive Landscape: A lot of nonprofit causes exist so we needed to highlight the Urban League’s unique strengths to stand out in a crowded nonprofit sector.
We looked at comparable organizations to identify best practices and opportunities for enhancing the Urban League's website. This also helped us establish key areas for differentiation.
✦ Best Practices: Benchmarked design and functionality standards.
✦ Improvement Opportunities: Identified gaps in user experience and engagement.
✦ Differentiation: Highlighted ways to make the Urban League stand out online.
We conducted an initial survey to the Urban League’s email list, gathering insights into user needs, preferences, and behaviors. This data shaped our understanding of essential website features. We followed up after with one-on-one interviews with some of the people that took the initial survey to gain more incites.
✦ Comprehensive Survey: Focused on website usage, satisfaction, features, and demographics.
✦ Testimonials: Collected user feedback to build credibility on the site.
✦ One-on-One Interviews: Followed up with interested respondents for deeper insights.
✦ Affinity Diagram: Organized data to identify key features and functionality for the redesign.
Our research highlighted several key issues and user needs that guided our redesign efforts.
🛠️ To Work On
Outdated Information: Users found the current website content to be outdated.
Volunteer Needs: Desired details on the organization’s mission, impact, and schedule.
Donor Needs: Sought transparency on the organization’s impact and how donations were utilized.
We developed personas and user journey maps to deepen our understanding of user behavior. These tools helped us design a more effective user experience by identifying pain points and opportunities for improvement.
✦ Persona Creation: Defined key user groups based on research data.
✦ Journey Mapping: Tracked user interactions with the current website.
✦ User-Centered Design: Informed design improvements to enhance the overall experience.
We took a fresh approach to designing user flows by focusing on the key elements users need to complete their tasks. This method helped us prioritize essential features and improve overall navigation.
✦ Listed necessary elements for task completion on each page.
✦ Identified the most important features
To kick off the design process, we used a Crazy 8s exercise to generate a wide range of ideas for the page layouts and features. This rapid ideation helped us quickly explore creative possibilities before moving on to wireframes.
✦ Crazy 8s Exercise: Sketched layout ideas in one-minute intervals.
✦ Idea Generation: Encouraged a high volume of concepts for each page.
✦ Collaborative Review: Selected the best ideas to refine for wireframing.
We focused on the donation and program events at this stage and wanted to get external opinions early on. We use testing to see how people navigated the prototype without guidance
✦ Is the navigation intuitive?
✦ Is there were features/information missing they would have found useful?
✦ How did they felt during the process?
Our testing provided valuable feedback on the design, highlighting both strengths and areas for improvement. This guided our next steps in refining the website for a better user experience.
✅ Positives
✦ Website felt friendly and trustworthy.
✦ Testers easily located information.
🔨 To work on
✦ Unclear navigation labels caused frustration.
✦ The event calendar lacked sufficient detail.
The creation of a design system was key to delivering a unified and accessible experience aligned with the Urban League’s mission. This ensured visual harmony, intuitive navigation, and efficient high-fidelity design and development.
✦ Established consistent design elements across all pages.
✦ Prioritized inclusivity in layout and interactions.
✦ Simplified collaboration and maintenance with clear design guidelines.
The redesigned Urban League website boosted user engagement, accessibility, and community impact. These enhancements empowered the organization to further its mission of uplifting African American communities.
User Engagement and Satisfaction
✦ Increased Traffic: Significant rise in unique visitors post-redesign.
✦ Longer Sessions: Users spent more time exploring the site, engaging with relevant content.
Community Impact
✦ Higher Event Participation: Improved calendar design led to more community involvement.
✦ Boosted Donations & Volunteers: Streamlined processes increased volunteer sign-ups and donations.
Stakeholder FeedbackStaff
✦ Efficiency: Easier redirection of users with the resources page.
✦ Volunteer Growth: More volunteers due to simplified sign-up.
✦ Welcoming Design: Community members appreciated the inclusive, user-friendly interface.
Working on the Urban League redesign offered invaluable lessons, shaping my approach to user-centered design, collaboration, and accessibility.
User-Centric Design
✦ Understanding and prioritizing user needs led to a site that resonated deeply with the community.
✦Increased engagement and satisfaction post-launch
✦ Testing ideas with real users proved essential
Collaboration and Communication
✦ Effective teamwork was key, with open communication enabling us to align on a shared vision.
✦ Strong feedback loops improved project quality
✦ Stakeholder collaboration enriched the process
Accessibility and Inclusivity
✦ Prioritizing accessibility ensured the site was inclusive for all users.Enhanced design through best accessibility practices
✦ Small adjustments like color contrast had a big impact
✦ This project reinforced my commitment to user-centered, inclusive design principles.
Odyssey simplifies the travel experience and provides seamless accommodation options, ensuring that users can efficiently work and travel across the globe. Odyssey creates a user-friendly platform that integrates travel logistics with professional needs.
View Case Study