Designing DullesJustice.org

#NoBanNoWall

Source: Artist Sam Machado.

JANUARY 27, 2017, President Donald Trump signed an Executive Order that started prohibiting US entry of all refugees regardless of nationality and all individuals from seven majority-Muslim countries. That same Friday, Customs and Border Patrol officials began denying entry and detaining Muslim travelers at airports. Lawyers, volunteers, and protesters started showing up at airports.

JANUARY 28: By Saturday, conditions were especially bad for detained travelers and their families at Dulles International Airport (IAD). An estimated 50 to 60 travelers were being detained, some for up to 20 hours without food or access to lawyers. An estimated 100 lawyers arrived on site at IAD.

Dulles Justice volunteers standing tall to resist the Executive Order with signs for Muslim travelers at IAD. Source: @DullesJustice.

JANUARY 29: Lawyers like Mirriam Siddiq, Justin Eisele, Sirene Shebay, Ofelia Calderon, Hailly Korman, Hassan Ahmad, and many others congregated at baggage claim #13 at IAD to offer pro bono legal advice. They sported homemade signs reading “Free Legal Advice” and “If you saw anyone detained, talk to us: we are lawyers.”

Dulles Justice volunteers in action at baggage claim #13 at IAD.

JANUARY 30: By Monday, an estimated 500 lawyers and volunteers were at IAD and the grassroots efforts were taking shape; Dulles Justice Coalition (DJC) was formed.

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

JANUARY 30 @ 7pm EST: My colleague, Dean Baker, and I were invited to a Google Hangout by Erek Dyskant to partner with DJC. We learned that DJC needed a logo for Twitter and designs for DJC’s planned website. Dean and I jumped at the opportunity.

DESIGN TEAM: Dean and I paired to design DJC’s website and brand. We worked remotely from the core team and used Slack for about 98% of our communication.

TIMEFRAME: January — March 2017.


Design Challenge

  • Design a logo and the brand.
  • Design a website that drives visitors to a Google signup form in order to recruit volunteers.
  • Coordinate content strategy with the content team.
  • Seek design review and approval (to get overall consensus) on the #Design Slack channel.
  • Use photos from the Social Media team on the ground at IAD for visuals and to avoid photo consent forms.

Personas

We asked the newly formed group a simple question:

“Who is our target audience for the website?”

Answers were not clear, ranging from ‘distressed travelers’ to ‘lawyers’ to ‘volunteers at IAD’ to ‘the media.’ While the group was naturally focused on helping distressed travelers, we quickly realized the website needed to instead focus on recruiting and coordinating volunteers as the top priority.

PRIMARY PERSONA:

  • Volunteers (including lawyers and nonlawyers) to coordinate volunteer efforts at IAD.

SECONDARY PERSONAS:

  • Muslim travelers arriving at IAD needing legal assistance.
  • Family and friends of Muslim travelers in the DC area.
  • Members of the media.
  • Potential financial donors.

Website Goals

Dean and I identified the primary goal of the site was to drive volunteers (lawyers and nonlawyers alike) to a Google signup form in order to coordinate volunteer efforts at IAD. The secondary goal of the site was to direct traveler’s friends and family as well as the media to free legal resources.


Design Principles

  • TIMELY AND ACTION ORIENTED: Given the sudden and chaotic nature of the Executive Order, the site needed to provide potential volunteers with the latest breaking news.
  • EASY TO SKIM: Given the amount of confusion around the travel ban, the site needed to be concise and easy to understand.
  • TRUSTWORTHY: The site needed to convey a sense of trust and transparency so that people — Muslim travelers, lawyers, volunteers, and donors alike — would consider engaging with DJC.
  • RESOURCEFUL: The site needed to point the right people to the right information to take advantage of online resources.
  • NONPARTISAN: DJC founders expressed a specific request that the site and organization at large be patriotic, yet nonpartisan.

Branding Exploration

Dean and I worked on DJC’s logo and identity first, since the team needed an immediate presence on Twitter.

Identity explorations.

Given the short timeframe, our first pass at a logo took a small number of the logo ideas and applied the blue from IAD’s brand. We presented the logo options shown below, the group voted, and we moved forward with option B.

Logo recommendations shared over Slack: the group voted for option B.

Here are some points of the feedback that came out of the review process that were unexpected:

  • Option A’s hashtag was too specific to Twitter and not universal enough.
  • Option D looked too similar to “shackles” to some of the team.
  • Option G did not go over well, since “flames” and “airplanes” (like those that fly to IAD…) do not pair well.

After voting to move forward with logo option B, we next created assets for Twitter, Instagram, and Mailchimp eblasts. Shown below are samples of business cards, web banners, and cover photos that Dean and I produced:

Sample of web banners and business cards designed for DJC.
Sample of cover photos using a duotone effect to minimize inconsistent quality iPhone photos.

Wireframes

We focused on the site hierarchy and flow while the content strategy team was finalizing web copy with the lawyer stakeholders.

Whiteboarding.
First three homepage concepts shared with the team.

MVP Design Pass Off

JANUARY 30 @ 11pm EST:

The initial MVP wireframe fro the homepage was shared at 11pm EST over Slack.

We then received feedback, iterated on the homepage, and extended the design to the secondary pages for Legal Assistance, Media Inquires, and the Take Action sections.

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

APPROVAL AND FEEDBACK PROCESS: Progress was shared early and often over Slack.

DONE IS BETTER THAN PERFECT: We needed to launch the site in a timely manner to keep up with the travel ban, so we kept to the lean design methodology and designed a minimalist, responsive MVP site. Many ideas were cut or placed on hold until the MVP site launched.

AUTHENTIC IMAGERY: The team wanted to share real photos “from the ground” at IAD to increase authenticity and to avoid consent waivers. Because the team was sharing low quality smartphone photos, I applied a blue duotone effect on the photos to compensate for low resolution.

Sample web banner styled for the website and Twitter cover photo.

CSS STYLE GUIDE: To speed up CSS styling for the developers, I provided a style guide, shown below.

CSS style guide provided to developers.

TRELLO BACKLOG: Trello was used for the backlog.

Sample backlog cards on Trello.

ONGOING ITERATIONS: After we launched the MVP site, we asked for more and more feedback to tweak and improve the site. Here are sample wires we produced, where we tried to clean up and improve site hierarchy, content, images, and more:


Results

Within three days of launch, the website and Twitter increased the number of lawyers and volunteers from 100 to 1,200.

While the travel ban was still active, 5 to 8 travelers received legal assistance per day from DJC.

Looking beyond the numbers, our goal was to connect lawyers to travelers affected by the travel ban. Here are photos of some of the travelers helped by DJC:

Source @DullesJustice.

FEBRUARY 5: US citizen and DC-resident Achmed Abdulle, his wife, and 13-year-old daughter from Somalia were affected by the ban at Dulles.


Source @DullesJustice.

FEBRUARY 5: Texas-resident Roslyn Sinha had issues returning to the US after visiting her mother, who suffered a stroke, in the United Arab Emirates.


Source @DCist.

FEBRUARY 6: The Yemeni Aziz brothers reunited with their dad at Dulles.


Source @DullesJustice.

FEBRUARY 6: MB Theisen sought out free legal advice from DJC and changed his return flight home to the US, thanks to DJC’s Twitter presence.


Source @DullesJustice.

FEBRUARY 7: Amar and Marwa were reunited at Dulles.


Source @DullesJustice.

FEBRUARY 7: After learning he was sick, this man’s emergency visa was approved so his mother could be with him as he was receiving dialysis in the ICU.


Source @DullesJustice.

MARCH 3: Khizr Khan visited the Dulles Justice team at IAD, just days before his travel privileges went under review.


As of August 2017, Dulles Justice has received honors from three organizations: the Capital Area Muslim Bar Association, the American Immigration Lawyers’ Association (DC Chapter), and the National Immigration Project of the National Lawyers’ Guild.


A big thanks to my design partner, Dean Baker, for pairing on this project with me. It was a pleasure working with you.