Project Hope Foundation Process Non-Profit Organization Selected
Case Study Project Hope Foundation Responsive Site Design Shelby Parker 2020
Project Hope Foundation Process Client + Initial Research
Non-Profit Organization: Project Hope Foundation I was presented with a problem to choose any non-profit organization as the concept for my project. I was to find an organization that struggles visually and does not interact with its desired audience well. Thorughout this process, I developed an understanding of how to focus a design around the user experience instead of just a website that is appealing to the eye. Project Hope Foundation is an organization that provides services to those diagnosed with autism. Their services range from babies to elderly people. Their mission is to provide a lifespan of services for the autism community through programs that: help families, open minds, promote inclusion, and expand potential. Before begining the research and redesign process, I studied IDEO’s human centered design material.
Project Hope Foundation Process Digital Site Audit
Researching Project Hope Foundation’s Digital Presence As I explored their website, I found that it lacked organization and displays an overwhelming amount of information to the viewer. The heart of the content is so powerful, it just needs to be presented in a more developed design highlighting the information. However, they have a strong social media presence and chose to engage regularly with their audience. While the existing site design has a developed digital presence, it needs a blend of simplicity and eyecatching moments.
Project Hope Foundation Process Secondary Research | Interviews
Interviews I organized a meeting the the HR and communications manager to discuss what Project Hope Foundation’s values and mission are, as well as developing an understanding of their ultimate goal for their website. I grew to understand that Project Hope Foundation depends strongly on private donors, as well as grants. Also, the ultimate goal for the users is for them to gain quick understanding of who Project Hope is and what they stand for.
Project Hope Foundation Process Secondary Research | Similar Markets
Researching Similar Markets To gain an understanding within the design of non-profit websites, I explored similar organizations applying to Autism, as well as expanding to other non-proft organizations with different focal points. After looking into the non-profits focused on different subjects, I found two sites that had strong designs to adapt towards the redesign: 1. Acumen, a site that engages the viewers eye with subtle transitions of objects section to section. 2. Invisible Children, a site that displays excellent use of type over images.
Project Hope Foundation Process IDEO Challenge
Framing the Challenge The design challenge worksheet was present by IDEO to help the designer narrow down what the specific problem is that is attempting to be solved. This is done by created specific questions that the designer will ask. As I began this process, the challenge was simply “reaching families with an autistic member.” But the challenge changed to “providing information to a family with an autistic member on a website.”
Project Hope Foundation Process Users
Main Users + User Goals As I began determining who the audience was, I used the sticky note method to lay everything out there and then organize it. I came to the conclusion that there are two key audiences Project Hope is trying to reach and they are those affected by autism, most likely a parent searching for a service for their child and those looking to volunteer or work for the organization.
Project Hope Foundation Process Overarching Goals
Overarching Goals The overarching goals were determined by organizing the most important goals into categories for the client, the audience, and the website. these goals were then organized by priority.
Project Hope Foundation Process Specific Goals
Specific Goals The specific goals listed actions for each category of parents, therapists, teachers, students, and schools.
Project Hope Foundation Process Call to Action
Call to Action Project Hope Foundation has to primary audiences, the families looking for their service and people looking to volunteer. With this in mind, I believe there should be two main CTAs shown on the home page. For families that desire the services that Project Hope provides, they want a quick and easy way to get started. The two phrases I chose are enroll now and join the team.
Project Hope Foundation Process Style Tile
Style Tile The Style Tile aims to determine the direction of branding and ultimate “feel� of the website when a user interacts with it. To communicate who Project Hope is and how they want to come across I determined a few adjectives and then the typefaces as they are key to how the user feels when entering the website and the chosen type interacts with the user providing a warm and safe environment.
Project Hope Foundation Process Site Redesign Audit
Site Redesign Audit Following research, orignial site audit, and deterimining the main goals of the website, I conducted an audit of the current information on the site and organize the information into an easy navigated layout.
Project Hope Foundation Process Site Map
Project Hope Foundation Process Wireframes + User Testing
Wireframe + User Testing Next I developed a wireframe design for each page of the site and designed three main user flows. Each user flow represented one of my three main goals for my site, joining the team, enrolling, and donating. To ensure productive testing, I designed a protype for these user flow wireframes in Figma. I then had a handful of people test my design and identify problematic parts of the design. After receiving these results, I edited my designs and conducted a second round of user testing to ensure my design was stronger.
Project Hope Foundation Process Final Site Design
Project Hope Foundation Process Final Site Design
Project Hope Foundation Process Final Site Design
Project Hope Foundation Process Final Site Design
Project Hope Foundation Process Final Site Design
Project Hope Foundation Process Figma Prototypes
Figma Prototypes As the final step of the design process, I developed a working prototype for all three formats using an application called Figma. Linked below are the three prototypes: Mobile Site Frames Mobile Site Prototype Tablet Site Frames Tablet Site Prototype Desktop Site Frames Desktop Site Prototype