Discovery

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.

Competitor Research

I conducted competitor research into organizations that did similar things. I found that some organizations did 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

User interviews

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

Initial thoughts

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.

Planning

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.

User persona

Wireframing

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.

Wireframe for the desktop view. A large hero image with a clear call to action helps direct the user, and pulls them in to the 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.

Photography that illicit emotion helps draw in the user early on

Testing

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?

Observations

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.”

With clearly defined labels such as; mission, and vision, it helps the user identify what the organization is early on. Nesting content also has the added benefit of streamlining the user experience.

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.

Footer section with clear navigation, and a spot for their contact information makes it easy for the user to contact the organization.

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.

Offering the user different ways to donate early on helps give them choices, and makes them more cognizant of the idea of donating

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?

The old site had long line length, which made it more likely the user wouldn’t read the information

The new site incorporates a shorter line length, which enhances readability, and breaks content out into blocks

The old hero had unprofessional photography and no clear call to action

The new hero has a defining statement, clear call to action buttons, and professional story that identifies the target audience

Responsive Design

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.

Website Redesign vs. Old Design