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
The mission of PRESENT NOW is to provide children in domestic violence shelters with experiences and gifts that bring them joy, comfort, and relief during a time of crisis.
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
Our main challenges for this project involved:
- 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
We completed the project in four phases:
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
The redesigned website will keep visitors on the PRESENT NOW website for longer, increase donations, and increase applications from volunteers and shelters. The redesigned website allows users to learn about PRESENT NOW and opportunities to get involved (donating, volunteering, partnering, and sponsoring). The website also provides access to relevant forms, content, and actions for each of PRESENT NOW’s target audiences. Overall, the redesigned website provides an improved aesthetic and user experience to PRESENT NOW’s audience as they expand to become a national organization.
Important Links
- Live Site Prototype (Figma): https://www.figma.com/file/ymgv7VCAbQW5MTr9QoWMl7/Live-Site-Hi-Fi-Prototype-v2?node-id=290%3A753
- Sitemap (Freehand): https://projects.invisionapp.com/freehand/document/pqBCV0yuY
Live site is at https://presentnow.org
Some screenshots
