EmpowHer felt their website was dated and needed a fresh look. They also wanted to increase donation engagement through the website.
To redesign their website, and drive donation engagement.
My first initial research was to better understand the organization as a whole. EmpowHer is a non-profit organization in Los Angeles, CA. They focus on helping at risk teen girls in underserved areas. Some of the ways they help these girls is by offering mentors to the girls, curating events that help teach them how to make good decisions, and help teach them valuable skills that propel them into the future, positioning them as successful young women.
I conducted competitor organizations that did similar things. I found that some organizations did some things really well, while others did not.
Some of the things they did well were:
- Organize content
- Make content easy to understand
- Professional photography
- Bite size content
Some of the things they did poorly:
- Too much content
- Inconsistent visual styles
- Bad web typography
Another aspect of my research included conducting interviews of some of the volunteers for the program. This helped me to understand some of the pain points that they were having.
Pain points included:
- Confusing navigation
- Duplicated content among pages
- Inconsistent visual styles
- Hard to update
By about this time I started formulated some early opinions about what to do with the website based off my research. I definitely wanted to restructure some of the pages and make the sitemap more user friendly. I also wanted to somehow tell a story with the lives of the girls who have been positively impacted by the organization’s programs.
In order to better drive my design process I needed a better understanding of the user. With all the research I’ve conducted and having a strong core demographic established, I was able to create a user persona for a girl who would want to be a part of the EmpowHer program.
The next step was to develop a more streamlined approach to the content. The major things I wanted for the landing page was to be able to have the user easily understand what the company does, while not getting bogged down by information overload, and to have an immediate emotional draw with the content of the site. Thus began the process of wire framing content.
Prototyping and Design
Once I decided on the direction for the landing page, I took directly to WordPress. Being able to take my wireframe directly into WordPress, gave me the ability to quickly mockup the content in a way that both the client and I could see immediately. This time saver helped keep the project on track.
With the content laid out I really wanted to impact the user through the telling of the girls stories. I was able to approach a old classmate, Lauren Hurt, who I knew was doing great photography in the area, and she graciously offered to help photograph some of the girls.
By being able to combine stunning, and emotional photography, I was able to create a sophisticated and up to date design for the landing page.
Color & material
EmpowHer Institute had a predefined primary color already in place. To compliment it, I looked to incorporate two other colors. One that was in the same realm of the red color, and a yellow to help bring in some contrast into the organization. Together, the three colors exude a lively energy that helps showcase their passion for what they do.
Testing was done through the EmpowHer volunteers, a few choice girls from the program, and various people I personally knew, who were not familiar with the organization. Some of the questions I wanted to know was:
What emotion does the landing page illicit?
What types of things does the organization do?
Is there a way to learn more?
Can you figure out how to contact someone easily?
Is there a clear way to donate to the organization?
1. What emotion does the landing page illicit?
Various answers to this question were things like: powerful, emotional, caring, sensitive, impactful. All emotions that are great for when you’re trying to cater to a young teen demographic, as well as older people who want to be a part of something big.
2. What types of things does the organization do?
It was very clear by the answers, that users were able to understand clearly what the program does. Answers were clear and straightforward such as: “It’s a non profit that caters to underserved girls in the LA area.” “An organization that mentors girls around LA.”
3. Is there a way to learn more? YES
All the users felt there was the ability to learn more about other areas of the program, which helps cut down information overload on the landing page.
4. Can you figure out how to contact someone easily? YES
All users felt they could navigate to the appropriate contact page easily, or find the information elsewhere.
5. Is there a clear way to donate to the organization? YES
Having multiple ways for the user to donate was a done so the user can get familiar early on with the idea of donating, or if they already know they want to donate, it gives them easy access to do so.
New Design vs. Old Design
Another part of the testing phase was to take a comparison between the new design and the old one. Some of the things I wanted to test was:
- Does the new design speak to the core audience?
Does the new design look more fresh, and streamlined?
- Is the new design easier to read and navigate?
Another aspect of the redesign was to ensure that the site worked well on all devices. In order to achieve this I made sure to take a mobile first approach in the structuring of content. Some content needed to be displayed more for a scrollable environment, versus a clickable one found on a desktop. Testing was conducted on a variety of devices such as tablets, phones, and desktops.
Given the opportunity to redesign the EmpowHer website, gave me new experience in working with non-profits and the struggles they face. At times, it was tough to manage expectations and time due to the fact that it was a volunteer project and I had other work commitments, but all that effort really paid off in knowing that I helped create a better representation of their brand, and a richer user experience.
I felt like this project was a great way for me to work collaboratively with a non-profit, connect people I knew who could be of use to the program, and direct the design of the product to the final deliverable.
What I Did
User research, wireframing, ideation, content restructuring, sitemap restructure, responsive web design, WordPress development