Present Now: Website Redesign to better enable engagement and education

2021
Develop for Good is an intercollegiate 501(c)3 nonprofit organization that pairs, trains and supports student volunteers as they develop technical product solutions for nonprofits. Some of our most notable partners include UNICEF, the World Bank, and the World Health Organization. Learn more at https://www.developforgood.org/!

Project Summary

PRESENT NOW is focused on addressing the needs of children who are affected by parental abuse. The Presents Program responds to a growing demand from shelters to provide their resilient children with additional resources that can aid in their emotional recovery and wellbeing.

Our project was to improve the overall user experience and design of the PRESENT NOW website. The aim of this website redesign was to improve the user experience for a national audience of donors, volunteers, and shelter partners. As PRESENT NOW grows to become a national organization, their website needs to appeal to donors, volunteers, and shelters who expect a higher level of professionalism.

The Team
Product Manager:
Brinda Prasad (The University of Texas at Austin ‘22)

UX Designers: Abby Sigler (UC San Diego ‘20), Kate Yuan (Dartmouth University ‘23), Mai Phuong Vu (Grinnell College ‘21), Max Park (Indiana University Bloomington ‘22), Théo Geiller (L’École de design Nantes Atlantique ‘20).

Our goals were:

Technical

  • Improve the overall aesthetic of the website to be more contemporary and engaging
  • Integrate with Google Advertising
  • Identify the correct website platform (CMS) to use so that the PRESENT NOW nontechnical team can continue to maintain the website
  • Optimize the website for mobile screens

Organizational

  • Retain website viewers
  • Invite and inform Donors
  • Invite and inform Partners
  • Invite and inform Volunteers

Our Tasks

  • Reduce text on all landing pages
  • Move text to hidden pages/dropdowns
  • Improve navigation
  • Present data more impactfully
  • Create a more rich experience for new shelter partners
  • Create a seamless form integration into the website design
  • Various modifications to specific pages

The Challenge

  • Reorganizing the website’s page structure for ease of navigation
  • Researching and presenting a viable CMS option to switch to
  • Shifting project timelines to accommodate for WordPress website development needs

PRESENT NOW has four major target audiences with different user needs:

Donors

  • Need to easily access the option to donate via Kindest
  • Image carousel with images of children’s toys linking to Amazon Wishlist

Volunteers

  • Access to volunteer application form
  • Answers to frequently asked questions about PRESENT NOW volunteers

Corporate Sponsors

  • Information and visuals of various corporate events
  • Access to contact information for corporate inquires

Shelters

  • Access to shelter partner application form
  • Answers to frequently asked questions about PRESENT NOW volunteers

Our Solution

1 Evaluation

We began by doing a thorough review of the existing Wix site. We then looked through other websites of similar organizations to get a sense of best practices.

With the current Wix site and requested changes in mind, we evaluated and compared different CMS options. We presented our suggestions to the PRESENT NOW team and mutually agreed to implement the new website in WordPress.

2 Creating a new sitemap

In order to improve navigation and overall user experience, we reorganized the sitemap. We discussed pages that could be added, combined, or taken out completely.

We then proposed the new sitemap to the PRESENT NOW team as well as the client’s advertising agency representative.

3 Designing, wireframing, and prototyping

From here, we assigned 2–3 designers to work together on redesigning each page identified in the new sitemap. We set up a weekly design review with the client to gather feedback and incorporate any new changes.

For our low fidelity wireframes, we generally came up with two wireframe options for each page. We had discussions about elements we wanted to keep and take out both internally and with the client. After deciding on a version of each page, we began to implement the needed elements and make sure the pages all worked together.

For our high fidelity wireframes, we standardized the spacing, font sizes, image treatment, and other stylistic aspects before beginning to add in images and copy. We then incorporated the copy and selected images provided by the PRESENT NOW team into our high fidelity designs. We had multiple design reviews and incorporated the client’s feedback in each iteration of our high-fidelity designs.

Before presenting to the executive director, we created a Figma prototype from our updated high-fidelity wireframes to demonstrate the design’s navigation and functionality.

4 WordPress development

After multiple design reviews, we implemented our final high fidelity wireframes into the WordPress site using the Elementor plugin.

Impact

Important Links

Live site is at https://presentnow.org

Some screenshots

Site Map
Redesigned Home Page
Redesigned Partner Page