Overview
Background
Empowered Girls Inc is a Non Profit that builds young girls into empowered women that are able to navigate life's challenges confidently and successfully. With two chapters based in Orlando, Florida and Omaha, Nebraska, they have successfully mentored a various communities of young girls, cultivating a safe space to learn and grow.
The founders of the organization asked me to revamp their website in order to inform donors and families about what they offer for their local communities.
Project Goals
1. Redesign the user interface in order to create a more engaging experience for the user
2. Restructure their website content in a way that is easy to read and user friendly
Research
Orignal Website
In the original website, all of the website's content was situated on the homepage. The page contained the organization's summary, program focuses, and call to donate. The user would have to continuously scroll in order to read all of the content on the page.
Problem #1: Lack of Organization
All of the website's content was placed on the same page, which can be overwhelming for the user. In addition, a lot of the information was not segmented, which caused confusion.
Distributing the website's content to different pages will make it easier for the user to digest information and search for specific content from Empowered Girls.
Problem #2: No User Direction
The original website layout was not ordered in a way that leads the user to take action. As I talked to the founders, the main goal for their website was to spread their website was to spread their mission to interested parents and inspire donors to give.
Utilizing hierarchy, contrast, and layout with varying colors and fonts can inspire the user to take certain actions.
Problem #3: Not Engaging
The original website lacked personality. It did not tell the story of Empowered Girls in a way that was true to the organization. It did not give the user a window to what the organization believes or does for the community.
Including pictures, the organization's history, and varying fonts/colors can bring the story of Empowered Girls to life.
Client Interviews
Before starting the brainstorming process, I met with the non-profit founders to hear their thoughts and opinions about their existing website. Ultimately, my clients wanted a digital space that informs their audience about their mission, events, and specialities that they offer to their local communities.
For parents, this website would inform them of the organization's program offerings and the necessary forms to enroll their girls. For donors, this website would reveal the organization's impact on their local communities and encourage sponsorships. They wanted the website to be engaging to both types of users for the purpose of telling their organization's story, whether it be including some sort of navigation and pictures of their organization. In addition, they stated that they wanted an event calendar, instagram feed, and separate location chapters in the website.
Competitive Analysis & Inspiration
I researched other non-profits that were direct and indirect competitors of Empowered Girls. I wanted to identify patterns and strengths that made each non-profit's website successful and efficient for their perspective users. Also, I wanted to understand how organization's inform their users about their mission, and ultimately, get them involved.
Ideation & Exploration
Site Map
With all of the previous website's information situated on one scrollable homepage, I knew that it was important to allocate the information in a logical, organized way. I organized the content by determining the organization's main purposes for the website. The founders wanted the users to learn more about the background of the organization and ways to get involved. After determining the purposes, I placed the website's content under each group.
Wireframes
Brand Guidelines
The logo and already existing colors were my inspiration for the visual design. Their printed materials utilized the logo and colors, so the website needed to be cohesive with the brand. Inspired by the research on the other competitors, I decided to illustrate some icons to bring personality and connection to the brand.
Final Design
Website Overview
Homepage
The Homepage immediately tells the story of Empowered Girls with relevant headings, short summaries about the organization, and photos. The user is directed to learn more about the organization through a new navigation tab and various buttons that lead to different parts of the website, specifically calling the users to get involved and/or donate.
Mission & Vision Page
For this specific page, I wanted the user to connect with the organization through illustrations, photos, and an engaging layout. In addition to including pertinent information related to the work of Empowered Girls, I used photos and illustrations to break up the layout and emphasize the program's offerings. At the bottom of the page, there is a call to action that invites the users to donate, volunteer, or enroll their child.
Chapter Pages
For the Chapter pages, the founders specifically requested that I include a calendar, instagram integration, and each chapter's contact information in the prototype. At the bottom, I included a "Get Involved" section for users to immediately access after looking through the event calendar and contact information for questions.
Reflections & Next Steps
This project was a great learning experience as it was my first time working with a non-profit to create a website. The biggest takeaway for me was realizing that the final design will not always look exactly like the prototype. Currently, I am working on creating the website on Squarespace and there have been design aspects that I've had to forego due to timing constraints and realistic expectations.
For next steps, I would like to conduct usability testing to determine what changes need to be made. Also, I would like to track analytics to determine how often the website pages are clicked.