Enhancing Human Connections in Non-Profit Grant Management through a Website Redesign
MY ROLE
UX/UI design
Information architecture, Visual components, Wireframes, Lo-fi & Hi-fi prototyping, Responsive web design, Design iterations
‍
UX research
Technical analysis, Competitive analysis, Literature review, Interviews, Usability tests, Google Analytics
MY IMPACT
Completed launch to complete client satisfaction
Increased task completion rate to 97.5%
Enhanced brand identity
TEAM
3 UX Designers / Researchers (Me)
1 UX Writer
COMPANY
One Degree Impact (ODI)Established in 2003, ODI helps non-profits develop and execute strategies for the grant funding process. Their services include grants strategy, research, writing and reporting to maximize non-profit funding opportunities.
TOOLS
Figma, Google Analytics, Google Suite, Slack
DURATION
4 months, January - April 2024

ACHIEVEMENTS

97.5%

Task Success Rate

4.18/5

Task Ease Rating

85.3

SUS Score

Design Challenge

How to accentuate ODI's focus on creating impactful human connections while showcasing their differentiators?

With over 20 years of experience providing grant management service for non-profits, One Degree Impact has upheld its commitment to creating impactful human connections. However, their original website didn't convey this central tenant of their brand identity. In addition, this website didn't communicate their competitive advantage of providing flexible yet tailored services.

To address this, this project consists of a holistic assessment of the website's user experience, the creation of new designs which incorporate ODI's strong brand identity, and validating these designs with new and existing clients.

PROCESS

Collect qualitative and quantitative data to guide design iterations

The four stages of our redesign process includes: exploratory research, schematic design, evaluative research, and design iteration. This integration of research and design enabled us to create thoughtful data-driven solutions.

STAKEHOLDERS INTERVIEW

ODI wants to clarify the purpose of their website and reinforce their branding

The ODI leadership team expressed their motivations for collaborating with us. Their foremost goal was to gain a clear understanding of how their website would best serve their clients. In addition, ODI wanted their unique brand identity to be incorporated into the new design, as their original website has a narrow focus on providing details of their services.

Keeping their motivations in mind, we formulated three guiding principles

Delineate stakeholder relationships to identify opportunities

We created an ecosystem map delineating communication channels and relationships between stakeholders. Leveraging this with information gathered from stakeholder meetings, we discovered how different connections in this network create funding opportunities for ODI's clients. In particular, "superconnectors" such as tech platforms, service providers, and consulting firms play a crucial role in promoting ODI's services and bringing in key clients.

DISCOVERY

Reveal the information gaps between the original website and existing users

We conducted interviews to determine how we could emphasize ODI's differentiators and welcome all clients to the website. In addition, we supplemented client feedback by analyzing data extracted from Google Analytics. This led to 3 key insights.
Insight 1
The website could better convey ODI’s brand and value.
Clients gave the website a rating of 3.5 out of 5 for how well it aligned with their understanding of ODI’s services and value. They felt that, based on their experiences with ODI, there was an opportunity to better communicate the brand and what sets them apart from their competitors.
Insight 2
The website could better reflect ODI’s uniquely personalized membership plans.
We learned that a key differentiator of ODI is their flexible memberships. All of the clients we interviewed shared their positive experiences with the customization of services and projects offered. This gave them a sense that ODI is invested in their growth, but clients didn’t see this communicated on the current site.
Insight 3
The website is targeted towards new clients.
3 out of 4 participants said they felt that the website isn’t catered towards them, but rather towards potential clients. This sentiment is supported by usage data: Google Analytics showed that 97% of users in the past 90 days were new users.

DESIGN STRATEGY

ODI’s unique mission, services, and resources became the core of our design strategy

In developing a comprehensive design strategy for ODI’s website, we centered our approach around the organization’s mission, services, and resources. This focus guided our strategic decisions to ensure that both new and existing clients have a more engaging and informative experience.

INFORMATION ARCHITECTURE

Solve navigational inconsistencies and enhance the discoverability of educational resources

We conducted a technical analysis of the original website and identified opportunities for improving its usability and accessibility. On the original website (version 1), most labels on the navigation bar only navigated to the corresponding sections on the homepage, which violated users' expectations of navigating to separate pages.

After conducting comprehensive interviews and usability tests, we iterated on the design. The final version resolved the issue of unclear label names and enhanced the discoverability of the information that ODI wanted to highlight, such as the educational podcast and FAQs sections.

FEATURE HIGHLIGHTS

How can we redesign membership section to showcase ODI's customizable membership plan?

The pre-existing website did not effectively communicate the flexibility of ODI's membership plan. To address this issue, we proposed a calculator feature which enabled users to select specific services and see the estimated price of their bundles.

They were satisfied with this feature at the midterm of the project. However, at the end of the project, ODI decided to pivot away from this concept because they were continuously adjusting their membership structure.

After some more iterations, the final design outlines three membership tiers, along with the services and choice of project types included in each tier. This effectively communicates flexibility without the narrow focus on price.

How can we redesign the resources page to enhance discoverability across resource types?

On ODI's original website, there was a podcast page hidden from the homepage and separated from the blog page. In the interviews we conducted, existing users expressed that this is a significant resource which proved very helpful. Therefore, we conducted several revisions to showcase the range of resource types offered by ODI, including podcasts, blog articles, and eBooks.

Ultimately, we incorporated all resources into a single page and designed a set of tailored filters. This enhances the discoverability of each resource while giving users maximum flexibility to find the resources which meet their specific needs.

How can we redesign the funding road plan section to help users envision what it's like to work with ODI?

We discovered through usability testing that the original graphic for the funding success plan was not clear enough for users to understand it was describing the plan steps, and participants desired to see the timeline for undergoing a project.

Therefore, we redesigned the original outline, which arranged steps into a horizontal layout with two rows, into a simple vertical layout displaying each step as a point in a single timeline.

REFLECT

What others said
ODI was excited to implement our designs!
“Over the past 10 years as an entrepreneur, I’ve worked with probably a half a dozen or a dozen marketing companies, and when anybody pitches a website, I’m like, ‘I guess it looks good, I have no idea.’ So the fact that you guys have all the research behind it that shows people you tested, and people using it, that just really means so much to me because it feels so much more comforting. I really appreciate you guys and all the effort you put into this. It makes me feel comfortable that the website will be highly usable and valuable for our clients.”
Jess Merrell
Founder & CEO of One Degree Impact
Takeaway
The importance of being flexible and open-minded in the design process
From this project we found that, as designers, it is important to maintain flexibility and the ability to adjust to changes. While we were finalizing our designs, our client suddenly needed to modify their service structure.
This project also provided us with valuable experience, not only in designing a website but also in helping ODI reflect on their brand and service. ODI has an extraordinary mission and service, and I am glad to have helped them discover the best parts of themselves through our designs.
Next Steps
Documentation
ODI will build the website in the near future. To ensure our client can construct the website without barriers, we will provide them with a well-structured Figma file containing the elements and design rules they need. This includes color templates, font families, icons, and images.
Keeping Track
Given that ODI plans to build the website on WordPress, which has more limitations compared to custom coding, it’s essential to keep track of any issues encountered in translating our design into reality. Provide alternative design solution if needed.
© 2024 Liang-Yu Su. All Rights Reserved