Passion For Life is a 503(C) non-profit which uses a fun, holistic system of workshop and after-school programs to inspire and equip under-resourced youth to turn their unique skills and talents into fulfilling careers.
With the start of the COVID-19 Pandemic, Passion For Life has had to drastically change the way it operates. Shifting to virtual workshops and programs, their website needs to be revamped so that donors, volunteers, and potential clients can quickly access the information they need.
Redesign the Passion For Life website to be responsive across all devices, easy to use and optimized for business-to-business marketing.
Product Designer
Pen and Paper, Google Forms, Figma, Whimsical, Maze
Market Analysis
Interviews
Persona
Site Map
User flow
UI Kit
Wireframes
Prototype
Usability Testing
Iteration
Project Takeaways
.jpg)
The organization's plan for the next 18 months is to generate revenue through workshops for third party use (business to business model). Through market analysis of various non-profits which engage in B2B sales, the following was determined:
• Organizations with high success have consistent, clear branding, clear navigation, a clean display of program information, and some sort of numerical display of past successes with program(s).
• Many organizations require that potential customers contact someone on their team in order to get detailed information about their program offerings. This could potentially be a pain point for a busy professional.
I interviewed 3 participants between the ages of 23-28 to better understand the motivations of companies and individuals who purchase B2B products/services, what they look for, and what frustrations/pain points arise during this process.
• Participants cited needs of their business as the primary motivation for purchasing from outside organizations. If it is something they cannot take care of themselves, they look to other companies to purchase products that will sate those needs.
• Participants need to be able to easily access information about the product/service they want to purchase; ie reviews, FAQs, pictures, easy access to customer service, a detailed list of what is contained in the package, etc.
• Participants expressed frustration with a lack of reviews in a website where they’re searching to purchase a product/service. They also were frustrated by vague descriptions about what a service offers, and having no way to contact someone with questions before purchasing. A lack of these items meant that users couldn't trust the company.
.png)
Jane Doe represents an average user of Passion For Life- someone who is motivated to enrich the lives of the youth around her through programs, but doesn't have a lot of time or money to justify a lengthy purchasing process. Jane's persona helped determine that Passion For Life's new website needed to have easy to understand products (curriculum) with reviews/testimonials to justify purchasing decision and easy-to-access points of contacts for any questions she might have. It also needs to be a website she can access at her desk or on the go- she is a busy school principal after all.
.png)
Before tackling the user interface design, decisions about the basic architecture and layout of Passion For Life's website had to be made. While the organization does have a website currently, it doesn't match current mission/vision.
Based on my research, and internal documentation provided to me by the marketing team at Passion For Life, I was able to redesign the site map, designing navigation around the four main goals of the organization- to inform the public of what they do(About) , market their curriculum/products (Our Programs), promote opportunities for community involvement (Get Involved), and obtain finances (Donation).
The main goal of the organization currently is to increase traffic to its programs page, and generate income through the sale of curriculum. The organization is not currently set up to allow purchases without human oversight, so interested parties are instead directed to a form, which will then connect them to a human representative who can facilitate curriculum sales. This was represented through the task flow.
The user flow more generally represented the different paths a user could take through the site, with a focus on the specific path that the persona Jane would take to inquire about purchasing a program's curriculum. It also gave me insight into which pages I would need to redesign for the organization.
Passion For Life already had existing branding, but I created a new UI Kit by scanning internal design documents from the company, as well as previous iterations of the website. These, along with my research into other non-profit organizations' websites, informed my UI decisions.
.png)
HOME- The landing page was redesigned to better showcase the achievements of the organization, as well as make it easy for volunteers and sponsors to get involved. Clickable buttons in the 'get involved' section allow for quicker navigation to associate pages. I also rewrote the copy, in order to create a clearer experience for the users.
Please click and swipe through each full-sized image for full details about the redesign of these pages.
ABOUT- Passion For Life's original About Page focused on the organization's mission, but was overall in need of a tuneup. I worked to revamp the copy and layout to be more informative, with the information I had from internal documentation as well as my own personal insight as a member of the Passion For Life team.
Please click and swipe through each full-sized image for full details about the redesign of these pages.
.png)
PROGRAMS- Passion For Life's Our Programs page originally gave a basic blurb about each program, with a CTA at the bottom directing interested parties to email the company for more information. I chose to give each program its own dedicated page, linked from the main page with its own CTA. This customizable program page would have room for any information, reviews, etc that the organization could add as they built out their program. As the organization currently prefers to deliver detailed information about programs through direct contact with a member of the team, I utilized the contact form at the bottom of the page for inquiries into programs.
Please click and swipe through each full-sized image for full details about the redesign of these pages.
GET INVOLVED- Passion For Life has a main page 'get involved' page for involvement opportunities, which links to individual pages for volunteering, internships, and sponsorships. These pages are also accessible via the dropdown menu directly, so I chose to remove the main 'get involved' page and revise the volunteer, sponsorship, and intern pages alone.
Please click and swipe through each full-sized image for full details about the redesign of these pages.
.png)
DONATION- Passion For Life currently relies on donations while they make the switch to a B2B model. The current website only gives information for mailing in checks, so I added a method for donating online, as well as clearer copy about passive donation methods (Amazon Smile, Kroger, etc).
Please click and swipe through each full-sized image for full details about the redesign of these pages.
• Overall, the design was well-received. The layout and color scheme were especially liked by the client.
• On the ‘finding my passions’ page, users wanted to see testimonials/success stories from students.
• There were no major errors in the UX/UI to be found; any complaints by users outside the organization had to do with content, which can be supplied by the client at a later time. The site redesign can be considered a success.
The redesign of Passion For Life was my first time working with a client. I got to learn a lot about the process of client-designer communications, and how flexible designers need to be. There were some snags in the communication, and I had to proceed without a lot of information I would have liked to have before proceeding with the redesign. Still, I believe I was able to create a product that will be a step in the right direction for the organization’s rebrand.
Were I to spend more time on this product, in addition to incorporating former client feedback into my design, I would experiment with different UI patterns. The original site was made in Wordpress, and my modular design was based on the template they used originally. However, I’d like to try UI patterns that are more modern- abstract shapes, and splashes of color, to convey a more fun feeling.
Overall, this project really taught me a lot. I learned so much about B2B marketing and non-profit operations, and I feel like my UI skills in particular truly bloomed during the course of this project. This is an ongoing project, and I plan to eventually present Passion For Life with a redesigned website that helps them extend their reach in our community.
