NGO GOODdler Website Redesign

My Role

Design & Research

Company

GOODdler

Timeframe

3 weeks

group work

Web Redesign

UI Design

UX Research

Prototyping

After opening the webpage my first impression was "It looks good, do they really need to redesign it?", the thought was mainly influenced because of the eye-catching hero image, which makes the webpage modern and simple. However, upon further investigation, I discovered several issues that needed attention. To begin, I focused on understanding GOODdler's mission and target audience. The next steps was to conduct Heuristic Evaluation and Annotation to identify UX issues of webpage.

GOODdler:

GOODdler provides a software solution designed for public and private organizations engaged in aid, sustainability, and development efforts. Let’s do GOOD together!

Heuristic Evaluation Takeaways
  • The webpage loads quickly and has an engaging hero page photo.
  • Simple interface but it does not have enough information to help the user understand the organization.
  • Font is too small and inconsistent, especially in the nav bar.
  • Hard to navigate the website and orient yourself.
  • The icons are not very clear or universally understood.
UX Problems
Accessibility Issues
Improper and unclear card organization
Inconsistent font type and sizes
Unclear Language
Stakeholder interview

After gathering information about the webpage, a meeting was scheduled with stakeholder Tatiana to understand the pain points and reasons behind the need for a webpage redesign.

Pain Points
  • Website looks messy and is not intuitive, needs UI help.
  • Untraditional nonprofit structure leads to confusion about what    they do.
  • Lacking detailed information about campaigns.
Goals and Needs
  • A website that is clean and easy to navigate.
  • Clarify how things work and not overwhelm the user.
  • Have more traction on website.
Requirements
  • Have the GOODdler blue and orange.
  • Not be too modern and unfamiliar for users in an older demographic.
Usability Test Plan

After conducting research, which included proto persona, heuristic analysis, and a stakeholder interview, usability test plan has been formulated for the existing website.

Affinity Diagram and Priority matrix Key Takeaways
  • Onboarding is a big need; copy should be readily understandable.
  • The site should be more consistent in design, and should make donating easier.
  • Would like top nav, breadcrumbs, and scroll to top buttons.
  • Hero image large, content could be more definitive; draws away from navigation.
  • Would appreciate more navigation (top nav, breadcrumbs, etc.) and findable buttons.
  • Copy should be simplified wherever possible, avoid any complex phrasing or words.

All the research showed that GOODdler has two primary user groups: donors who visit the website to engage in charitable actions, and nonprofit coordinators who access the website to create their wish list. Which means User Insight and Problem Statements should be for both users.

User Insights
Donor

Mature, affluent donors want to make a direct impact and give back to their community. They’re looking for an anonymous, secure, and simple method in providing donations to non-profit organizations they’re passionate about.

Nonprofit Coordinator

Non-profit organizations want a trustworthy and simple platform where they can inventory needed donations for their donors to easily contribute to. They need a place to not only convey their organization’s mission but also connect with donors who can contribute to their organization’s needs.

Problem Statement
Donor

The lack of privacy, accessibility, and the ability to easily comprehend and navigate a website prevents donors of a mature demographic from donating on a digital platform.

Nonprofit Coordinator

Nonprofit coordinators strive to help their community but are often overwhelmed by complicated donation processes. Spending time researching for a secure platform and understanding how to use the website, takes away from the valuable time needed to build strong relationships with their donors.

User Flow
  • Mobile-first: Homepage with all main CTAs, along with menu to secondary pages and utilities.
  • Footer with contact us and miscellaneous.
  • Focus on Supporter’s flow of donating to campaign.
Competitor Analysis

Conducting a competitor analysis proved invaluable in identifying our          areas of improvement, enabling us to focus on addressing them while      creating the prototype.

Lo-Fi Prototype
Lo-Fi Prototype Usability Test Result
  • Create opportunities for user to go back and navigate around site.
  • Standardize terminology for content and orient user to action.
  • Copy should be simplified wherever possible, avoid any complex phrasing or words.
Style Tile

After taking into account stakeholders' preferences, we have created a style tile. It features a simple and modern font and the colors they wanted to keep, which have been modified slightly to pass all accessibility tests and ensure readability for everyone

Hi-Fi Prototype
Iteration after usability test
  • Home page reorganized so back to back images weren’t overwhelming.
  • “Donate” button added to  nav bar so users can find and click donate on any page.
  • “Message Us” in footer updated to “Contact Us” based on user feedback.

Final Results

previous
next