All Survivors Project

Website Redesign
Project Overview
All Survivors Project researches and works with male survivors of sexual assault, and needed a refresh of the content and visual design of their website.

I was asked to help guide the visual and UI design of the new site, in collaboration with their team and front-end developers.
Role
VISUAL/UI Design
My Contributions
Style templates and Tiles, Mockups and Clickable Prototypes, Branding, UI Design, Responsive Screen Mockups, Site Style Guide (TK)
client
ALL SURVIVORS PROJECT
Timeline
DEC 2020–PRESENT
Site maps, wireframe mockups, porcess map and branding for Virginia Mason hospital.

Objective

All Survivors Project (ASP) conducts research and advocacy and facilitates inter-disciplinary dialogue and learning to improve the global response for every victim/survivor of sexual violence in situations of armed conflict and forced displacement. ASP is an independent, neutral and impartial international organization working with male survivors of sexual violence, governmental and non-governmental stakeholders to strengthen national and international efforts to prevent and respond to conflict-related sexual violence and to ensure that the rights of victims are fulfilled, and the dignity of all survivors is respected and protected.

As ASP's work has shifted and expanded, their current website does not communicate their work effectively. As a research and advocacy organization, a new website that accurately shows their work is extremely important.

Requirements

  • Full site redesign with new copy and images
  • Use provided wireframes as a starting point for the UI
  • Reports and Focus Countries should be more prominent on the homepage
  • ASP has an established brand presence, so the existing logo and primary brand colors are final.
  • The visual design should reflect ASP's mission as a serious research organization

Design Milestones

We set three major Design Milestones to keep the design process on track.

First Milestone:
Style Mockups to guide brainstorming and art direction

I developed several style tile mockups as a simple way to ensure that I was aligned with their vision for the site.

I incorporated the existing branding, but offered alternates and accents for the style. I iterated on these multiple times until I felt that they represented two distinct options.

Of the two shown below, ASP chose Option B (right). They expressed a clear preference for flat graphics, modern-looking sans-serifs, and bold, high-contrast colors.

Option A mockup, shows a collage of UI elements on light background.Option B mockup, showing UI elements arranged on a white background.

Second Milestone:
Homepage and Interior pages

I adapted the flat-style Option B into some initial landing page mockups. Here are some explorations on the hero image and ASP's mission statement.
‍
The use of photographic imagery in the example on the right resonated most with ASP.

Hero image mockup, optionA
Hero image mockup, option B
hero image, option c

Third Milestone:
Finalizing Designs (In Progress)

I'm currently in the process of finalizing the homepage UI and a few key screens and creating screen breakpoints for front-end dev. I'm currently working with ASP and their developers to bring this site to launch in late May 2021.

The screens below
show the finalized homepage and one of the Focus Countries pages.

Final mockup screen for the ASP homepage
Final mockup showing the Afghanistan focused page.
KRIS EVERSONLInkedininstagramdribbble