Designing DullesJustice.org

Image for post
Image for post
Source: Artist Sam Machado.
Image for post
Image for post
Dulles Justice volunteers standing tall to resist the Executive Order with signs for Muslim travelers at IAD. Source: @DullesJustice.
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Dulles Justice volunteers in action at baggage claim #13 at IAD.
Image for post
Image for post
Efforts were taking shape: Dulles Justice Coalition (DJC) was formed and is here to stay, so long as Muslim travelers are being discriminated by the White House.

Design Kickoff

Design Challenge

Personas

“Who is our target audience for the website?”

Website Goals

Design Principles

Branding Exploration

Image for post
Image for post
Identity explorations.
Image for post
Image for post
Logo recommendations shared over Slack: the group voted for option B.
Image for post
Image for post
Sample of web banners and business cards designed for DJC.
Image for post
Image for post
Sample of cover photos using a duotone effect to minimize inconsistent quality iPhone photos.

Wireframes

Image for post
Image for post
Whiteboarding.
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
First three homepage concepts shared with the team.

MVP Design Pass Off

Image for post
Image for post
The initial MVP wireframe fro the homepage was shared at 11pm EST over Slack.
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
MVP secondary pages designed on January 30th, based on the approved homepage design.
On January 31, Erek Dyskant tweeted “Pulled @claytonhopkins+DeanBaker of @labzero into an urgent social justice project at 7pm yesterday, and we had wireframes at 11pm! Thanks!” Source: @edyskant.

Behind the Scenes

Image for post
Image for post
Sample web banner styled for the website and Twitter cover photo.
Image for post
Image for post
CSS style guide provided to developers.
Image for post
Image for post
Sample backlog cards on Trello.
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Results

Image for post
Image for post
Source @DullesJustice.
Image for post
Image for post
Source @DullesJustice.
Image for post
Image for post
Source @DCist.
Source @DullesJustice.
Image for post
Image for post
Source @DullesJustice.
Image for post
Image for post
Source @DullesJustice.
Image for post
Image for post
Source @DullesJustice.

Product designer focused on UX/UI and user research (he/him) claytonhopkins.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store