Women Veterans Outreach Tool Design Phase 1

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


15

HOMEPAGE CRISIS TABRESPONSIVE MOBILE + DESKTOP

16


17


18


19

HOMEPAGE VIDEOS TABRESPONSIVE MOBILE + DESKTOP

20


21


22


23

HOMEPAGE LIBRARY TABRESPONSIVE MOBILE + DESKTOP

24


25


26


27

HOMEPAGE ONLINE INTAKERESPONSIVE MOBILE + DESKTOP

28


29

ONLINE INTAKE RESOURCESRESPONSIVE MOBILE + DESKTOP

30


31


32


33


34

35

36

37

38


39

ONLINE INTAKE LEGAL FORMSRESPONSIVE MOBILE + DESKTOP

40


41


42


43


44


45


46


47

SEARCH RESULTS LEGAL FORMSRESPONSIVE MOBILE + DESKTOP

48


49


50


51


52


53


54


55


56


57


58


59


60


61


62


63

OTHER PAGES FAQSRESPONSIVE MOBILE + DESKTOP

64


65


66


67


68


69


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


montserrat bold 18pt


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.

Documents

Women Veterans Outreach Tool Design Phase 1