women veterans outreach tool design phase 1
DESCRIPTION
The Women Veterans' Outreach Tool project is a collaboration between Pine Tree Legal Services of Maine and the NuLawLab at Northeastern University's School of Law. Through my internship at the NuLawLab this semester I have been designing new web interfaces and re-structuring the existing Women Who Serve Website that will be coded in Drupal over Summer 2015.TRANSCRIPT
Women VeteransOutreach Tool
NuLawLab
2
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 2015All Rights Reserved.
NuLawLabwww.nulawlab.org
3
5
6
9
12
28
38
46
62
70
about the designer
design process
design needs
new homepage features
user-indicated resource search tool
legal forms search tool
resource & legal forms search results page
frequently asked questions page
style & design guides
CONTENTS
4
5
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 CandidateFriend and Mentor
Jules Rochielle Sievert MFACreative Director of the NuLawLab
Dan JacksonExecutive Director of the NuLawLab
Nita Sturiale MFAFaculty Advisor, Studio for Interrelated Media Department Chair
ABOUT THE DESIGNER
6
THE GOAL OF THIS DOCUMENT is to brief stake-holders of the processes used to inform the visual design of this tool and give them an understanding of how this tool might function for the benefit of women veterans across the United States.
THE DESIGN PROCESS for this project employed collabora-tions across disciplines between law students, faculty, staff a design student, and women veterans. They sought to deter-mine 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.
7
THE GOAL OF THIS DOCUMENT is to brief stake-holders of the processes used to inform the visual design of this tool and give them an understanding of how this tool might function for the benefit of women veterans across the United States.
8
9
The current user interface leads users into a maze of resources. By providing a triage tool, users can be more quickly directed to the specif-ic 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.
(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
DEVELOPED BYN.U. Law Students Alexa Daniel, Sarah Heydemann and Rosie Nevins
DESIGN NEEDS
10
WOMEN WHO SERVE
Women with Military Service
11
WOMEN WHO SERVE
Women with Military Service
12
http://statesidelegal.org/
13
HOMEPAGERESPONSIVE MOBILE + DESKTOP
14
http://statesidelegal.org/
15
HOMEPAGE CRISIS TABRESPONSIVE MOBILE + DESKTOP
16
http://statesidelegal.org/
17
HOMEPAGERESPONSIVE MOBILE + DESKTOP
18
http://statesidelegal.org/
19
HOMEPAGE VIDEOS TABRESPONSIVE MOBILE + DESKTOP
20
http://statesidelegal.org/
21
HOMEPAGERESPONSIVE MOBILE + DESKTOP
22
http://statesidelegal.org/
23
HOMEPAGE LIBRARY TABRESPONSIVE MOBILE + DESKTOP
24
http://statesidelegal.org/
25
HOMEPAGERESPONSIVE MOBILE + DESKTOP
26
http://statesidelegal.org/
27
HOMEPAGE ONLINE INTAKERESPONSIVE MOBILE + DESKTOP
28
http://statesidelegal.org/
29
ONLINE INTAKE RESOURCESRESPONSIVE MOBILE + DESKTOP
30
http://statesidelegal.org/
31
ONLINE INTAKE RESOURCESRESPONSIVE MOBILE + DESKTOP
32
http://statesidelegal.org/
33
ONLINE INTAKE RESOURCESRESPONSIVE MOBILE + DESKTOP
34
35
36
37
38
http://statesidelegal.org/
39
ONLINE INTAKE LEGAL FORMSRESPONSIVE MOBILE + DESKTOP
40
http://statesidelegal.org/
41
ONLINE INTAKE LEGAL FORMSRESPONSIVE MOBILE + DESKTOP
42
http://statesidelegal.org/
43
ONLINE INTAKE LEGAL FORMSRESPONSIVE MOBILE + DESKTOP
44
http://statesidelegal.org/
45
ONLINE INTAKE LEGAL FORMSRESPONSIVE MOBILE + DESKTOP
46
http://statesidelegal.org/
47
SEARCH RESULTS LEGAL FORMSRESPONSIVE MOBILE + DESKTOP
48
http://statesidelegal.org/
49
SEARCH RESULTS LEGAL FORMSRESPONSIVE MOBILE + DESKTOP
50
http://statesidelegal.org/
51
SEARCH RESULTS LEGAL FORMSRESPONSIVE MOBILE + DESKTOP
52
http://statesidelegal.org/
53
SEARCH RESULTS LEGAL FORMSRESPONSIVE MOBILE + DESKTOP
54
http://statesidelegal.org/
55
SEARCH RESULTS LEGAL FORMSRESPONSIVE MOBILE + DESKTOP
56
http://statesidelegal.org/
57
SEARCH RESULTS LEGAL FORMSRESPONSIVE MOBILE + DESKTOP
58
http://statesidelegal.org/
59
SEARCH RESULTS LEGAL FORMSRESPONSIVE MOBILE + DESKTOP
60
http://statesidelegal.org/
61
HOMEPAGERESPONSIVE MOBILE + DESKTOP
62
http://statesidelegal.org/
63
OTHER PAGES FAQSRESPONSIVE MOBILE + DESKTOP
64
http://statesidelegal.org/
65
OTHER PAGES FAQSRESPONSIVE MOBILE + DESKTOP
66
http://statesidelegal.org/
67
OTHER PAGES FAQSRESPONSIVE MOBILE + DESKTOP
68
http://statesidelegal.org/
69
HOMEPAGERESPONSIVE MOBILE + DESKTOP
70
71
primary blue
1B57AFaccent blue
4E9CC3white
FFFFFF
accent orange
F7931Eaccent red
E01722
gray
333333black
000000
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.
STYLE GUIDE WEBSITE COLORS
72
73
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,
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.
STYLE GUIDE TYPOGRAPHY
74
75
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 respon-sive 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 readabili-ty 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.
STYLE GUIDE PAGE LAYOUTS
76
77
stateside logo size154p wide x 28p high
top blue banner size and hex 792p wide x 153p high #1B57AF
women with m. service title point sizeLobster 63pt 10% multiply drop shadow
white nav bar size792p wide x 37p high, 90% transparency
nav bar text size and stylesselected text 8pt Montserrat Bold #2E3192 100% opacity
other text 8pt Montserrat Regular #3162B0 90% opacity
women vet image size792p wide x 473p high 90% opacity
transparent blue shape size and position576p wide x 215p high #1B57AF 70% opacity
transparent blue shape textheading Montserrat Bold 18p white and #F7931E
body Montserrat Regular 12p white
right side tabs/drawers43p wide x 163p highred #FF0000 80% opacitywhite 70% opacity
text size and position for side tabsMontserrat Regular 16p black or white
‘how can we...’ header text sizeMontserrat Bold 24p
‘how can we...’ inside shape text stylesMontserrat Regular 18p
dimensions of shapes180p wide x 90p high18p rounded corners90% opacity3p border #3162B0
background imagedsc_0270.jpg 80% opacityon top of white
background color for videos sidebardrawer sidebar #4D4D4D
STYLE GUIDE HOMEPAGEMOBILE
78
79
stateside logo size368p wide x 66p high
top blue banner size and hex 2560p x 347p #1B57AF
women with m. service title point sizeLobster 152pt 10% multiply drop shadow
white nav bar size2560p wide x 88p high, 90% transparency
nav bar text size and stylesselected text 20pt Montserrat Bold #2E3192 100% opacity
other text 20pt Montserrat Regular #3162B0 90% opacity
women vet image size2560p wide x 1176p high 90% opacity
transparent blue shape size and position1814p wide x 515p high #1B57AF 70% opacity
transparent blue shape textheading Montserrat Bold 43p white and #F7931E
body Montserrat Regular 29p white
right side tabs/drawers107p wide x 222p highred #FF0000 80% opacitywhite 70% opacity
text size and position for side tabsMontserrat Regular 38p black or white
‘how can we...’ header text sizeMontserrat Bold 58p
‘how can we...’ inside shape text stylesMontserrat Regular 43p
dimensions of shapes617p wide x 217p high18p rounded corners90% opacity8p border #3162B0
background imagedsc_0270.jpg 80% opacityon top of white
background color for videos sidebardrawer sidebar #4D4D4D
STYLE GUIDE HOMEPAGEDESKTOP
80
81
stateside logo sizesame as homepage
top blue banner size and hexsame as homepage
women with m. service title point sizesame as homepage
white nav bar sizesame as homepage
nav bar text size and stylessame as homepage
right side tabs/drawerssame as homepage
text size and position for side tabssame as homepage
‘search results’ box size521p wide x 261p high18p rounded corners8p outline #1B57AF
‘search results’ box textMontserrat Bold 52p white
‘seach tool results/search for other’ bar720p wide x 25p high#1B57AFMontserrat Regular, Bold 18p white
body text area531p wide x 575p high18p bottom rounded corners60% opacity white18p Montserrat Bold, Regular#1B57AF, #F7931E12p, 10p Montserrat Regular black
STYLE GUIDE SEARCH RESULTS
82
83
stateside logo sizesame as homepage
top blue banner size and hexsame as homepage
women with m. service title point sizesame as homepage
white nav bar sizesame as homepage
nav bar text size and stylessame as homepage
right side tabs/drawerssame as homepage
text size and position for side tabssame as homepage
‘FAQS’ box size521p wide x 261p high18p rounded corners8p outline #1B57AF
‘FAQS’ box textMontserrat Bold 52p white
‘back to homepage’ bar720p wide x 25p high#1B57AFMontserrat Bold 18p white
body text area531p wide x 575p high18p bottom rounded corners60% opacity white
18p Montserrat Bold, Regular14p Montserat Regular black
STYLE GUIDE FAQS
84
85
MOBILE
blue window562p wide x 882p high18p rounded corners #1B57AF
header textMontserrat Bold45p white
subheader textMontserrat Regular14p black
question/answer textMontserrat Bold11p white
gray fields225p wide x 18p high9p rounded corners #333333
white triangles9p wide x 6.5p high
back/next buttons81.5p wide x 17.5p high9p rounded corners white11p Montserrat Regular #1B57AF
crisis button486p wide x 56p high9p rounded corners #E01722
16p Montserrat Regularwhite
exit tool button105p wide x 17.5p high9p rounded corners #333333
11p Montserrat Boldwhite
DESKTOP
blue window2300p wide x 1330p high72p rounded corners #1B57AF
header textMontserrat Bold110p white
subheader textMontserrat Regular30p black
question/answer textMontserrat Bold24p white
gray fields457p wide x 42p high6.5p rounded corners #333333
white triangles19p wide x 13p high
back/next buttons369p wide x 45p high9p rounded corners white28p Montserrat Regular #1B57AF
crisis button948p wide x 109p high9p rounded corners #E01722
28p Montserrat Regularwhite
exit tool button312p wide x 52p high9p rounded corners #333333
32p Montserrat Boldwhite
STYLE GUIDE TRIAGE
© 2015 NuLawLab. All Rights Reserved.