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.