Downtown Women’s Center

Designlab Capstone- Website Redesign

Role: UX/UI Designer & Researcher

Duration: 10 weeks

Tools: Figma

Downtown Women’s Center has successfully contributed to the safety of women in the Los Angeles area through donations and volunteers. The organization is constantly seeking to improve ways to increase online traffic

Problem

Research goals & methods

My research will seek to understand why and how people contribute to non-profit organizations and what methods are effective in achieving success. In doing so, I hope to redesign a current website that will not only increase voluntary action but also make such action more efficient

How might we engage users so that they are able to easily navigate and provide the necessary assistance to the organization?

1. Define the focus

To gain inspiration and identify the best practices for the redesign, I began my research with a competitor analysis. I chose three non-profit organizations with similar values as Downtown Women’s Center: New Friends Homeless Center, National Domestic Violence Hotline and Alexandria House.

Competitive Analysis

One common feature among 2/3 platforms was the click-to-exit button, which allows users to safely exit the page when selected. This button is important for this particular design because the a portion of the users are women who seek assistance from this organization. The ability to exit the page allows discretion for the user seeking safety.

Another common feature among all three platforms was the placement of the donate button. This serves as an important design pattern, as it emphasizes the main call to action.

User interviews were conducted to better understand the volunteer process and its experience. 4 participants who were active social advocates were interviewed

Some of the interview questions include:

  • Can you discuss the social issues you care about and why?

  • When choosing to be involved in a specific cause, what factors do you take into consideration?

  • Why have you volunteered at some but not another? Have you ever considered volunteering at another?

User Interviews

Interview Findings

Users were reassured in knowing how the organization planned to spend their donation

Participants found value in the org’s past achievements and how they planned to expand their accomplishments

When researching where to get involved, volunteers looked closely at who were leading these organizations and whether their values were consistent to their roles

First, I began by asking: What motivates users to invest time into learning more and how do they take action or show support? This allowed me to understand the user’s journey of how volunteers take action on social issues

Brainstorming Process

  • Affinity map

    Affinity map based on user interviews showed that credibility and impact of the organization were one of the most important

  • User flow

    By creating a user flow, I was able to narrow down the most important user tasks that were to be implemented in my designs

  • Persona #1

    Personas allowed me to look back at user pain points and focus on the issue at hand

  • Persona #2

2. Design and Ideate

Based on the user flows, I created low-fidelity wireframes on figma, which were then further developed onto mid-fi designs

Lo-fi designs

Home

Donate

Volunteer

Volunteer- filter open

A style guide was created for a consistent visual identity. I’ve kept the logo and primary colors the same as the original website for familiarity. Secondary colors were modified to create a more welcoming approach to the platform

Visual identity

3. Test and deliver

Usability testing was conducted with 4 participants to test three actions- sign up for newsletter, donate, and volunteer. Testing was conducted on Maze to track user paths. The feedback was positive, with 100% direct success on all three prototype actions. Heatmaps were used to make minor adjustments to the final design

Usability testing

Home

Because one of the main actions was signing up for newsletter, I added the option to sign up at the top of the page- right under donate, shop and volunteer option

Main actions and confirmation was moved to the top of the page for usability. By moving actions above impact images, users are able to focus more on the actions

Volunteer

Donate

Main action was also moved to be seen before background story so that users are able to complete tasks easily

Final prototype

4. Reflect and Analyze

This was the first project that I completed at Designlab from start to finish- from research to design and prototype. I’ve learned a lot about the research/design process and I’m excited for more growth to come as I continue to improve

Reflection

Key Takeaways

Document and save everything

This project was one where I began to use notion as a platform to organize and store my project timeline with links to reflect back on. Having a space where I could go back and view all my process was important to my overall success

Components and auto-layout are your friends

I was able to develop more of my sigma prototyping skills during this project by learning more about auto layout. YouTube has been particularly helpful for this. And although I still have a lot more to learn, I am proud of what I have learned about

If this was a real launch, the next steps would be to remeasure business metrics and compare them to the ones that have been measured previous to the start of the design process. The goal of this particular organization is to increase donations snd volunteers by x amount (i.e. 10% annually). If the donations and volunteers do not increase after the design change, it would indicate that the original design is more efficient in business goals. If this was the case, the design would be reverted back to the original and new design methods would have to be discussed to asses what went wrong and how we can improve them

Next steps

View my other case studies

Kaizen

Second Home