FULL VERSION
SNAPPY VERSION

Designing to empower abuse survivors

Role
Duration
Tools
Skills

Pro Bono Design Contracter
‍‍July 2018 - September 2018
Sketch, Framer, Illustrator, Webflow
Branding, logo design, web design, illustration

Background

W.O.M.A.N. is a community-based multi-service agency founded in 1978 that serves survivors of domestic abuse in San Francisco and the Greater Bay Area. Last year, W.O.M.A.N. fielded over 9000 support line calls and managed 20,000 contacts and referrals.

I reached out to W.O.M.A.N. after coming across their website and noting substantial potential to maximize the safety of users, brand inclusiveness, and visual impact.

I set out to do the following for W.O.M.A.N.:

        1) Solidify an inclusive brand identity, including an organizational color palette, typographic language,
        iconographic set, and illustrative style.

        2) Create a new logo that communicates W.O.M.A.N.'s values of diversity, optimism, and kindness.

        3) Create a new website that is simple to use, maximally accessible, and safe above all.

The Challenge

W.O.M.A.N. stands for "Women Organized to Make Abuse Nonexistent." Despite W.O.M.A.N.'s name, the agency aims to be gender-inclusive in its representation and support survivors of domestic abuse.

One major challenge in forming the brand identity for W.O.M.A.N. was balancing inclusiveness with specificity. We wanted to create a brand that was inclusive of all races, gender identities, and socioeconomic backgrounds while addressing a highly specific issue: domestic violence.

Logo Design

One priority of the W.O.M.A.N. team was to replace their logo with a simpler and more distinguishable symbol. Their old logo looked like this: 

It was quite simplistic and not particularly memorable, serving as a placeholder rather than an icon that could stand alone and communicate W.O.M.A.N.'s values.

My first attempt at a logo completely missed the mark. While I was excited about what it represented--renewal, cyclical healing, and female strength--I created this logo before I was informed that W.O.M.A.N's target clients were not limited to women.

This completely changed the visual direction I was heading in. I realized I needed to create a logo that did not rely on gendered iconography. I needed to further abstract the values of W.O.M.A.N. in order to accurately visualize their identity.

The question thus shifted to:


"How to create a warm, accessible, gender-inclusive brand identity around a gendered name?"

I created several logo concepts in response to this question, focusing heavily on themes of healing, renewal, love, and strength.

Purple is the main color associated with ending domestic violence, so I wanted to retain some element of purple in the logo. I wanted to push this a bit further, however, and explore how the makeup of purple from red and blue hues can symbolize diversity and the overlap of identities.

The last logo concept was the favorite among both the team and myself. The team enjoyed its simplicity and its message of no-nonsense, love-centered outreach.

Web Redesign

W.O.M.A.N.'s original home page looked like this:

Within seconds of entering the home page, the following pop-up loaded onto the user's screen.

The website was in need of a refresh, visually and in terms of user safety. My primary concerns were the following:

(1) Information density made quick navigation difficult
(2) Value of UI components was asynchronous with informational hierarchy
(3) Exit pop-up invoked anxiety rather than comfort  and safety button was inaccessible

Hero

I played around with a few visual directions for the hero section of the home page.

The first direction was to create a collage of photographs that represented a diverse range of people in terms of age, race, and gender in order to visually depict W.O.M.A.N.'s commitment to helping domestic abuse survivors from any background. I wanted to immediately end any misconceptions a visitor might have about W.O.M.A.N. only providing outreach to women.

This was an interesting visual experiment, but we had some concerns about photographically depicting individuals on the home page, as it could easily become more isolating than it was accessible. What happens when you can't relate to anyone in the collage? It became apparent that the collage could not possibly capture the breadth of clients W.O.M.A.N. was interacting with--not merely in terms of race, gender, or age, but in terms of photographic context and tone. Most of the images being used were professionally shot and had an element of artificiality and artistic pretense.

I wanted to turn to an illustrative angle in order to invoke a welcoming visual presence, while sticking to W.O.M.A.N.'s push for brand inclusiveness.

The team resonated with this illustration. At this time we were also deciding on a cream vs. off-white template. I was pushing for the cream background because I felt that it was warmer, less sterile, and more inviting.

I also added in a small description of W.O.M.A.N.'s mission into the hero section in order to directly clarify W.O.M.A.N.'s mission, particularly since its name carries the risk of miscommunicating its values.

Exit Button

I felt that the exit button was one of-- if not the most important element of the website.

The exit button allows users to quickly navigate out of the website in the case that their abuser walks into the room. In addition, it automatically opens up a new tab to an innocuous website, like Weather.com. Certain exit buttons also fill up your search history with new searches in order to hide the website in your history log.

The original exit button was nested in the side panel and quickly disappeared as the user scrolled down the page.

A couple seconds after users opened up the home page, a pop-up filled the screen, warning users about computer monitoring. This message was a bit alarming to encounter as soon as the site loaded. Visually, the bright red, unfriendly text did not lend for legibility or comfort. Content-wise, I felt that this message was  redundant, obvious, and could easily be communicated more succinctly and readably.

I wanted to fix the exit button in an accessible location, so that users always had access to the safety mechanism. I also designed the site so that users could press "x" or "esc" to trigger the exit feature from their keyboards at any time. This required a bit of custom HTML.

In the next iteration, I modified the layout of the exit button to accommodate a brief description of how to exit the site by keyboard. I considered a pop-up, like the original site had, but felt that the pop-up was a bit too intrusive and came with its own dangers.

Resource Navigation

The original homepage listed resources in a straightforward list. While the information was clear, there was too much information listed without enough visual distinction between categories.

I aimed to clarify the distinction between resources for immediate assistance and long-term support programs that W.O.M.A.N. also offers.

I also organized the first tier of resources under the header "How can we support you?"  to reorient the homepage with more direct, need-centered language. I added in bright icons to further clarify the distinction between categories and make it easier to scan the page for resources.

 Mobile

I also adapted the web design as an accessible mobile website, designed for maximum accessibility.

Illustrations

I created these illustrations of diverse characters, many of whom were racially ambiguous or gender-ambiguous.

In my illustrative style I sought to invoke a sense of care, warmth, and dynamism. I wanted the individuals I was depicting to be active, empowered, and compassionate.

I used yellow flowers as a constant motif because of their historical connotations of joy, hope, and the bonds of friendship.

Brand Book

I wanted my redesign efforts to ground a broader effort to retain brand consistency across all print and digital mediums. I thus consolidated my typeface selections, color palette choices, iconography, etc. into a brand book. A few examples of pages are displayed below.

Takeaways

This project is still in progress, but thus far I've deeply enjoyed working with this team to reshape their digital identity. In particular, this project has helped me to understand the incredibly consequential ramifications that UX design has on the safety of real individuals.

It was incredibly daunting to develop site features that I knew would impact the safety of domestic abuse victims. At the same time, I'm honored to have been entrusted with this responsibility--and excited to see how an improved redesign shapes the long-term impact of W.O.M.A.N. and the incredible work this organization actualizes in the Greater Bay Area.

Designing to empower abuse survivors

Role
Duration
Tools
Skills

Pro Bono Design Contracter
‍‍July 2018 - September 2018
Sketch, Framer, Illustrator, Webflow
Branding, logo design, web design, illustration

Logo Development

Original Header

Hero Redesign

Original Resource Menu: Info-dense

Resource Menu Redesign

Illustrations

Old Exit Button: Unfixed and Formidable

Exit Button Redesigns: Fixed and Functional

Brand Book