Overview
An end-to-end redesign of the Plymouth Education Foundation's website.
Without refreshing the site's design in over a decade, the site required an overhaul their existing designs by building a new site. This redesign included a new brand design, reorganization of the information architecture, and a streamlined user experience for the donation system. Through this work the foundation saw an increase in donations by 20% in the first month and new campaigns to further engage in the community.
Job Title: Web Designer
Timeline: 6 months
Tools: Wix, Figma, Miro, InVision, Donorbox
Before & After
Home Page
Brought focus to the donate button by bringing it into the header and making the header sticky. Focused on intentional white space, an organized layout, and an amiable UI and styling.
Grants & Applications
Brought two pages with similar content together to make it easier to learn more and apply to the grant programs sponsored by the organization. Added a photo of kids to bring attention to the impact the grants have.
Donate
Embedded a donation plugin to reduce additional clicks, offer more flexible payment options, and ensure security. Opened with a photo from an event and a testimonial to humanize a monetary experience.
Gala & Events
Harnessed the power of photos to transcend relatability and encourage excitement of the event. Embedded the ticket purchase experience within this page to offer one place to learn about the event and take the action necessary to attend.
Responsive Design - Mobile Version
The Process Overview
Determine the purpose
of the site & who is
the target audience?
Targeting the Plymouth, MA educational community:
-
teachers/educators
-
parents
-
sponsors
For the purpose of:
-
collecting donations
-
receiving grant applications
-
showcasing the work of the foundation
Problem Statement:
The Plymouth community needs a delightful platform that they trust to engage with the Plymouth Education Foundation.
Feedback from users through interviews & research:
​
Overall the site feels outdated contributing to a distrust in legitimacy and leaves the user questioning if this the foundation is currently active due to
-
Outdated and irrelevant information
-
Out of date design
-
Credit card processing without confirmation of transaction
-
Disjointed information hierarchy​
​
Goals described by the board:
-
Refresh and update the design of the brand and website
-
Receive more donations, applications, and better engage the community
-
An easier way to manage the content of the site
What changes are going to be made?
Refreshed design​
-
New style guide
-
Simplify information architecture
-
Move to a content management site
-
Remove outdated information
​
Easy, modern donations
-
Embed a new donation system
-
Streamline information collection forms
-
Adding a brand new donation campaign as requested by a board member
​
Content spotlights
-
Photos and testimonials from community engagement
-
Current updates from recent events
Solutions & Prototypes:
Ideas come to life in Figma and Miro
-
Site will be made in Wix
-
Using Wix compatible donations systems (Donorbox)​​
-
Styling will reflect costal Plymouth, MA using a starfish on the beach imagery for color, typography, and UI elements
-
Through a card sorting exercise, implement a new navigation bar and information organization on the pages
-
Design & prototype in Figma using the commenting feature for feedback
Put the plans into action.
Build the site, test, iterate, and repeat
With a goal of releasing the site by Giving Tuesday of 2022, the designs were to be completely built and tested in Wix. The release was successful and has since increased the community engagement.
Planning Methods
Competitive Research
1. Researched the practices of other education foundations
-
How do they receive donations?​​​
-
How do they engage their audience?
-
What is the user flow of their site?
​
2. Gathered branding inspiration for typography, colors, and styling​ choices
-
Moved from colonial inspired design to coastal inspired​
-
New logo needed which will be designed by an in-house connection
-
A need to create a more personal touch with photos and personal experiences
​
3. Aligned on the scope of project which resulted in:
-
Entire overhaul
-
Move to a content management site
-
New branding
-
Utilize automated systems to improve the user flow and backend processing
.png)
.png)
Style Tile
Reorganization of Information Architecture
Method: Card Sorting
Tool: Miro
​
Reasons to reconfigure:
-
Additional pages were requested by the stakeholders
-
Information was dispersed/duplicated across multiple pages
​
Outcomes:
-
Consolidated previous information into fewer pages to create space for newer initiatives​ and reduce clicks to improve user experience
-
Removed outdated information
Wireframe & Prototype Pages
Low-Fi Wireframe in Miro
Hi-Fi Wireframe & Prototype in Figma
​
Used visuals and quickly iterated to align stakeholders and highlight the impact of a complete redesign.
Low-Fi Wireframe in Miro
Hi-Fi Wireframe in Figma
Finished Project
Low-Fi Wireframe in Miro
Hi-Fi Wireframe in Figma
Finished Project
Low-Fi Wireframe in Miro
Hi-Fi Wireframe in Figma
Finished Project
New Pages
Starfish Honor
A new donation campaign to raise money while nurturing relationships in the educational community by sending cards on behalf of the PEF.
-
A personalized embed to capture information necessary for the outreach campaign a Starfish Honor donation will kick off.
-
Blended website styling with the styling of the Starfish Honor cards for a cohesive brand design.
Community Partners
A way to highlight the generosity of the most active donors and a subtle way to encourage other community members to become a sponsor for a return of free advertising.
​
-
Used logos for easy recognition
-
Set a hierarchy to convey biggest donors to smallest.
Go Live!
A few days ahead of schedule to the target release date, the new Plymouth Education Foundation site was launched and successfully began receiving donations and grant applications.
​
Within the first month, the new Starfish Campaign brought in 17 donations, many of which were new contributors.
​
On the backend, the data capture has significantly improved and streamlined into an exportable .csv lightening the workload for the board members and efficient record keeping.
​
The board was thrilled with their new site as it was "all and more than imagined". (quote from Susan, board member).
