Women Veterans Outreach Tool Design Phase 1

Women Veterans Outreach Tool

NuLawLab

A project of the NuLawLab at the Northeastern University School of Law in Boston, Massachusetts for Pine Tree Legal Services of Maine. This project is funded by the Legal Services Corporation of America.

This design guide for the Women with Military Service website is authored and designed by Applied Design Intern Alexander Armand Ribeiro Nally, a student of the Studio for Interrelated Media B.F.A. Program at the Massachusetts College of Art and Design in Boston, Massachusetts.

Š NuLawLab 2015 All Rights Reserved.

NuLawLab www.nulawlab.org

2

CONTENTS 5

about the designer

6

design process

9

design needs

12

new homepage features

28

user-indicated resource search tool

38

legal forms search tool

46

resource & legal forms search results page

62

frequently asked questions page

70

style & design guides

3

4

ABOUT THE DESIGNER ALEXANDER ARMAND RIBEIRO NALLY is an undergraduate student of the Studio for Interrelated Media Bachelor of Fine Arts program at the Massachusetts College of Art and Design in Boston, Massachusetts. Their passion for social justice, law and graphic design led them to seek an internship opportunity at the NuLawLab (Northeastern University School of Law) in Boston, Massachusetts with Jules Sievert and Dan Jackson. During the months of January to May 2015, they worked for the NuLawLab as an Applied Design Intern studying Applied Research and Design Strategies, Graphic Design, Information Design, Mobile Application Development, Logo Development, Co-Design Process, Community and Client Consultation, Data Visualization and Information Visualization. Upon completion of their BFA, they aspire to attend law school in pursuit of developing more accessible paths to justice for individuals of all backgrounds, and to continue to use visual art and communication design to broaden the accessibility of existing legal and social justice resources.

SPECIAL THANKS

Kate Akkaya JD Candidate Friend and Mentor Jules Rochielle Sievert MFA Creative Director of the NuLawLab Dan Jackson Executive Director of the NuLawLab Nita Sturiale MFA Faculty Advisor, Studio for Interrelated Media Department Chair

5

THE DESIGN PROCESS for this project employed collaborations across disciplines between law students, faculty, staff a design student, and women veterans. They sought to determine the needs of women veterans and understand how an outreach tool for them will be successful and useful. Although various different creative exercises and group activities were used throughout the semester, ultimately it was the effects of group dynamic and client consultation with stakeholders that projected a direction for this project.

THE GOAL O holders of the design of this of how this to women vetera

6

OF THIS DOCUMENT is to brief stakee processes used to inform the visual s tool and give them an understanding ool might function for the benefit of ans across the United States.

7

8

DESIGN NEEDS (1)

Content Navigation

(2)

User Indication

(3)

Crisis Line

(4)

Smaller Margins

(5)

Adjusted Stateside Logo

(6)

Unique Visual Identity

(7)

Inclusive Branding

(8)

Simplified Layout Design

The current user interface leads users into a maze of resources. By providing a triage tool, users can be more quickly directed to the specific resources they’re seeking.

By indicating what type of user someone is, the web page can show the user specific resources first to better their user experience.

In recognition of the needs for women veterans, the tool should have an always visible, accessible crisis tool with resources for women vets in need of help immediately.

To increase the emphasis of site content.

To increase user-friendliness of the site.

Redesign the navigation panel to give this tool its own visual identity that conveys more of a user experience relatable to women veterans.

Use imagery that is neutral and indicative of community rather than special women in service, with an emphasis on diverse representation.

Descriptors and links should be simplified to fewer words to give the user a more concise and direct experience. Organize as much of the web page into three categories as possible to simplify the web site’s organization.

DEVELOPED BY N.U. Law Students Alexa Daniel, Sarah Heydemann and Rosie Nevins 9

WOMEN WHO SERVE

Women with M

10

Military Service

11

http://statesidelegal.org/

12

HOMEPAGE RESPONSIVE MOBILE + DESKTOP

13

http://statesidelegal.org/

14

HOMEPAGE CRISIS TAB RESPONSIVE MOBILE + DESKTOP

15

http://statesidelegal.org/

16

HOMEPAGE RESPONSIVE MOBILE + DESKTOP

17

http://statesidelegal.org/

18

HOMEPAGE VIDEOS TAB RESPONSIVE MOBILE + DESKTOP

19

http://statesidelegal.org/

20

HOMEPAGE RESPONSIVE MOBILE + DESKTOP

21

http://statesidelegal.org/

22

HOMEPAGE LIBRARY TAB RESPONSIVE MOBILE + DESKTOP

23

http://statesidelegal.org/

24

HOMEPAGE RESPONSIVE MOBILE + DESKTOP

25

http://statesidelegal.org/

26

HOMEPAGE ONLINE INTAKE RESPONSIVE MOBILE + DESKTOP

27

http://statesidelegal.org/

28

ONLINE INTAKE RESOURCES RESPONSIVE MOBILE + DESKTOP

29

http://statesidelegal.org/

30

ONLINE INTAKE RESOURCES RESPONSIVE MOBILE + DESKTOP

31

http://statesidelegal.org/

32

ONLINE INTAKE RESOURCES RESPONSIVE MOBILE + DESKTOP

33

34

35

36

37

http://statesidelegal.org/

38

ONLINE INTAKE LEGAL FORMS RESPONSIVE MOBILE + DESKTOP

39

http://statesidelegal.org/

40

ONLINE INTAKE LEGAL FORMS RESPONSIVE MOBILE + DESKTOP

41

http://statesidelegal.org/

42

ONLINE INTAKE LEGAL FORMS RESPONSIVE MOBILE + DESKTOP

43

http://statesidelegal.org/

44

ONLINE INTAKE LEGAL FORMS RESPONSIVE MOBILE + DESKTOP

45

http://statesidelegal.org/

46

SEARCH RESULTS LEGAL FORMS RESPONSIVE MOBILE + DESKTOP

47

http://statesidelegal.org/

48

SEARCH RESULTS LEGAL FORMS RESPONSIVE MOBILE + DESKTOP

49

http://statesidelegal.org/

50

SEARCH RESULTS LEGAL FORMS RESPONSIVE MOBILE + DESKTOP

51

http://statesidelegal.org/

52

SEARCH RESULTS LEGAL FORMS RESPONSIVE MOBILE + DESKTOP

53

http://statesidelegal.org/

54

SEARCH RESULTS LEGAL FORMS RESPONSIVE MOBILE + DESKTOP

55

http://statesidelegal.org/

56

SEARCH RESULTS LEGAL FORMS RESPONSIVE MOBILE + DESKTOP

57

http://statesidelegal.org/

58

SEARCH RESULTS LEGAL FORMS RESPONSIVE MOBILE + DESKTOP

59

http://statesidelegal.org/

60

HOMEPAGE RESPONSIVE MOBILE + DESKTOP

61

http://statesidelegal.org/

62

OTHER PAGES FAQS RESPONSIVE MOBILE + DESKTOP

63

http://statesidelegal.org/

64

OTHER PAGES FAQS RESPONSIVE MOBILE + DESKTOP

65

http://statesidelegal.org/

66

OTHER PAGES FAQS RESPONSIVE MOBILE + DESKTOP

67

http://statesidelegal.org/

68

HOMEPAGE RESPONSIVE MOBILE + DESKTOP

69

70

STYLE GUIDE WEBSITE COLORS USE OF COLOR Colors for this website are used to provide high contrast to the visual field.

Combined with high contrast in text point size and weight, these colors help make the website as navigable as possible visually. The palette should be as restricted as possible to prevent the web experience from becoming too muddled or confusing to navigate. Accents should be avoided unless they are going to help the user either navigate to their next step or to return to their previous location on the site.

primary blue

accent orange

gray

1B57AF

F7931E

333333

accent blue

accent red

black

4E9CC3

E01722

000000

white

FFFFFF

71

72

STYLE GUIDE TYPOGRAPHY USE OF TYPOGRAPHY All of the typefaces used for this website design are open-source and available through Google for free. The reasoning for this is to make this tool as accessible as possible and by using typefaces that do not require a licensing fee, funds can be further put toward the site’s functionality and its rollout to women veterans.

Lobster is a script typeface that is clean and friendly while also looking great on websites and mobile devices. Montserrat is similar to other popular Humanist typefaces and serves also as a clean and friendly typeface that looks great on web and mobile devices.

While there should not be a strict typography guide–to allow for adjustments over time–keeping in mind that high contrast helps users navigate along a page.

By using contrast in weights and sizes next to each other, the user will be able to navigate the page easily. Bold, larger headers will guide users to paragraphs or pockets of smaller text they can focus into if they are interested.

lobster script 18pt

El ilibus ut aut volum, consectaspel inum cone num estia voles mossimus rest, montserrat regular 18pt

El ilibus ut aut volum, consectaspel inum cone num estia voles mossimus rest, montserrat bold 18pt

El ilibus ut aut volum, consectaspel inum cone num estia voles mossimus rest,

73

74

STYLE GUIDE PAGE LAYOUTS RESPONSIVE LAYOUTS To ensure accessibility of this website on as many devices as possible, it is highly recommended that this website be coded with as much versatility as possible. For example taking advantage of HTML5’s ability to provide responsive web pages that change based upon browser width or device size.

Additionally, it might be useful to employ similar tactics in developing CSS style sheets by using percentages for width sizes, text sizes et cetera. This guide displays specific dimensions for most elements on the sample pages, but so long as the visual aspect ratios are carried out, the specific pixel widths are not as important as the site’s ability to adapt to various devices. For side drawers that slide out into the center of the page, they should move left between 400-550 pixels from the right. For motions such as the web page moving leftwards to reveal videos hidden to the right, the page should move no more than 400 pixels to the left.

Suggestions of how the site might be responsive to a desktop I are included– both mobile and desktop versions of the homepage and triage menus. The visual ratios are fairly consistent between the two, the only difference is that the desktop view takes advantage of width and will add more, shorter columns to hold text as opposed to having fewer, taller columns. An emphasis on readability and accessibility is incredibly important to the future users of this site and by using responsive layouts we can ensure that most users will have sufficient web experiences regardless of their access platform or device. Aside from some minor drop shadow and transparency effects the layouts mostly have images or shapes that can be rendered through HTML, CSS and Java Script to lessen the amount of data a user would have to download to experience the site.

75

76

STYLE GUIDE HOMEPAGE MOBILE stateside logo size 154p wide x 28p high

‘how can we...’ inside shape text styles Montserrat Regular 18p

top blue banner size and hex 792p wide x 153p high #1B57AF

dimensions of shapes 180p wide x 90p high 18p rounded corners 90% opacity 3p border #3162B0

women with m. service title point size Lobster 63pt 10% multiply drop shadow white nav bar size 792p wide x 37p high, 90% transparency nav bar text size and styles selected text 8pt Montserrat Bold #2E3192 100% opacity

background image dsc_0270.jpg 80% opacity on top of white background color for videos sidebar drawer sidebar #4D4D4D

other text 8pt Montserrat Regular #3162B0 90% opacity women vet image size 792p wide x 473p high 90% opacity transparent blue shape size and position 576p wide x 215p high #1B57AF 70% opacity transparent blue shape text heading Montserrat Bold 18p white and #F7931E body Montserrat Regular 12p white right side tabs/drawers 43p wide x 163p high red #FF0000 80% opacity white 70% opacity text size and position for side tabs Montserrat Regular 16p black or white ‘how can we...’ header text size Montserrat Bold 24p 77

78

STYLE GUIDE HOMEPAGE DESKTOP stateside logo size 368p wide x 66p high

‘how can we...’ inside shape text styles Montserrat Regular 43p

top blue banner size and hex 2560p x 347p #1B57AF

dimensions of shapes 617p wide x 217p high 18p rounded corners 90% opacity 8p border #3162B0

women with m. service title point size Lobster 152pt 10% multiply drop shadow white nav bar size 2560p wide x 88p high, 90% transparency nav bar text size and styles selected text 20pt Montserrat Bold #2E3192 100% opacity

background image dsc_0270.jpg 80% opacity on top of white background color for videos sidebar drawer sidebar #4D4D4D

other text 20pt Montserrat Regular #3162B0 90% opacity women vet image size 2560p wide x 1176p high 90% opacity transparent blue shape size and position 1814p wide x 515p high #1B57AF 70% opacity transparent blue shape text heading Montserrat Bold 43p white and #F7931E body Montserrat Regular 29p white right side tabs/drawers 107p wide x 222p high red #FF0000 80% opacity white 70% opacity text size and position for side tabs Montserrat Regular 38p black or white ‘how can we...’ header text size Montserrat Bold 58p 79

80

STYLE GUIDE SEARCH RESULTS stateside logo size same as homepage top blue banner size and hex same as homepage women with m. service title point size same as homepage white nav bar size same as homepage nav bar text size and styles same as homepage right side tabs/drawers same as homepage text size and position for side tabs same as homepage ‘search results’ box size 521p wide x 261p high 18p rounded corners 8p outline #1B57AF ‘search results’ box text Montserrat Bold 52p white ‘seach tool results/search for other’ bar 720p wide x 25p high #1B57AF Montserrat Regular, Bold 18p white body text area 531p wide x 575p high 18p bottom rounded corners 60% opacity white 18p Montserrat Bold, Regular #1B57AF, #F7931E 12p, 10p Montserrat Regular black

81

82

STYLE GUIDE FAQS stateside logo size same as homepage top blue banner size and hex same as homepage women with m. service title point size same as homepage white nav bar size same as homepage nav bar text size and styles same as homepage right side tabs/drawers same as homepage text size and position for side tabs same as homepage ‘FAQS’ box size 521p wide x 261p high 18p rounded corners 8p outline #1B57AF ‘FAQS’ box text Montserrat Bold 52p white ‘back to homepage’ bar 720p wide x 25p high #1B57AF Montserrat Bold 18p white body text area 531p wide x 575p high 18p bottom rounded corners 60% opacity white 18p Montserrat Bold, Regular 14p Montserat Regular black

83

84

STYLE GUIDE TRIAGE MOBILE

DESKTOP

blue window 562p wide x 882p high 18p rounded corners #1B57AF

blue window 2300p wide x 1330p high 72p rounded corners #1B57AF

header text Montserrat Bold 45p white

header text Montserrat Bold 110p white

subheader text Montserrat Regular 14p black

subheader text Montserrat Regular 30p black

question/answer text Montserrat Bold 11p white

question/answer text Montserrat Bold 24p white

gray fields 225p wide x 18p high 9p rounded corners #333333

gray fields 457p wide x 42p high 6.5p rounded corners #333333

white triangles 9p wide x 6.5p high

white triangles 19p wide x 13p high

back/next buttons 81.5p wide x 17.5p high 9p rounded corners white 11p Montserrat Regular #1B57AF

back/next buttons 369p wide x 45p high 9p rounded corners white 28p Montserrat Regular #1B57AF

crisis button 486p wide x 56p high 9p rounded corners #E01722

crisis button 948p wide x 109p high 9p rounded corners #E01722

16p Montserrat Regular white

28p Montserrat Regular white

exit tool button 105p wide x 17.5p high 9p rounded corners #333333

exit tool button 312p wide x 52p high 9p rounded corners #333333

11p Montserrat Bold white

32p Montserrat Bold white 85

Š 2015 NuLawLab. All Rights Reserved.