1
00:00:01,313 --> 00:00:07,534
The style for an expanded accordion
panel is found in our components file.

2
00:00:07,534 --> 00:00:12,093
I'm only going to create one
expanded panel for my demo.

3
00:00:12,093 --> 00:00:14,611
With Dispatcher Dulcea in mind,

4
00:00:14,611 --> 00:00:18,284
I'll choose "what if I need
help understanding English?"

5
00:00:18,284 --> 00:00:24,286
As that's information I'd like to
present as simply as possible.

6
00:00:24,286 --> 00:00:27,198
I'll start by expanding the mobile frame

7
00:00:33,005 --> 00:00:38,058
and by moving the bottom accordion
panel out of the way to make room for

8
00:00:38,058 --> 00:00:39,462
my new information.

9
00:00:49,044 --> 00:00:52,730
I'll change the plus symbol
to a minus to indicate

10
00:00:52,730 --> 00:00:57,137
that the accordion panel is expanded and
can be collapsed.

11
00:01:28,129 --> 00:01:33,093
To create a smaller sized heading,
I need to check the font

12
00:01:33,093 --> 00:01:38,273
size documentation of
the United States Web Design System.

13
00:01:38,273 --> 00:01:43,261
The components document only
shows a 22 pixel heading,

14
00:01:43,261 --> 00:01:47,227
but it looks like I could
go up to 32 pixels for

15
00:01:47,227 --> 00:01:51,532
a larger heading or
down to 17 for a smaller one.

16
00:01:51,532 --> 00:01:56,925
Since I've been designing already
with the 22 pixel heading,

17
00:01:56,925 --> 00:02:00,758
I'll try 17 pixels for creating a subhead.

18
00:02:18,705 --> 00:02:21,998
Now, for my body copy, I'm noticing that

19
00:02:21,998 --> 00:02:26,852
the ACLU voting rights page
contains duplicate information

20
00:02:26,852 --> 00:02:33,046
in that your right to bring an interpreter
is explained in two different ways.

21
00:02:33,046 --> 00:02:36,614
The second paragraph uses plain language.

22
00:02:36,614 --> 00:02:41,228
So I'll copy that one and
paste it under a heading that reads,

23
00:02:41,228 --> 00:02:43,283
Bringing An Interpreter.

24
00:02:46,121 --> 00:02:51,266
For the next two sections,
Bilingual Election Assistance and

25
00:02:51,266 --> 00:02:56,120
Language Hotlines,
my goal is to simplify the language and

26
00:02:56,120 --> 00:02:59,241
make key information easier to find.

27
00:02:59,241 --> 00:03:04,386
I'll use a bulleted list to present
the language assistance requirements.

28
00:03:45,805 --> 00:03:50,770
This first phrase, "check whether
your county is required",

29
00:03:50,770 --> 00:03:55,001
was hyperlinked on the original site.

30
00:03:55,001 --> 00:03:58,133
I want to change this to my blue color.

31
00:03:58,133 --> 00:04:03,843
And I'm realizing I never really sampled
the blue color I'm using.

32
00:04:03,843 --> 00:04:06,911
I probably should have by now.

33
00:04:06,911 --> 00:04:11,925
I can get it from this Download PDF
button that I took from

34
00:04:11,925 --> 00:04:16,739
the design system,
press plus in my colors palette.

35
00:04:18,632 --> 00:04:24,310
And now I can highlight the desired text,
change the color,

36
00:04:24,310 --> 00:04:29,443
make it underlined, so
it's obviously a hyperlink.

37
00:04:31,343 --> 00:04:37,320
I'd like to create a table to make finding
the appropriate language hotline easier.

38
00:04:51,971 --> 00:04:57,643
Unfortunately, Adobe XD doesn't
include a tool for drawing tables.

39
00:04:57,643 --> 00:05:01,922
So I'll have to fake it by spacing
the text out horizontally.

40
00:05:30,156 --> 00:05:36,340
This last longer list of languages
won't fit very neatly in my table.

41
00:05:36,340 --> 00:05:41,054
But I think with some creativity,
I can figure that out.

42
00:05:41,054 --> 00:05:46,310
There's a hyperlink here for
Asian Americans Advancing Justice

43
00:05:48,742 --> 00:05:54,469
that provides help for
all the languages detailed here.

44
00:05:54,469 --> 00:05:59,591
I will try changing the label here

45
00:06:00,938 --> 00:06:04,594
to read Asian and Pacific Islanders

46
00:06:25,320 --> 00:06:28,601
and include an asterisk explaining that

47
00:06:28,601 --> 00:06:33,336
these are the languages grouped
under that designation.

48
00:06:46,980 --> 00:06:49,962
Fortunately, this table will be 
easy for developers

49
00:06:49,962 --> 00:06:55,512
to create when it comes time for 
the designer-developer handoff.

50
00:06:55,512 --> 00:07:00,050
I will make the text Asian and
Pacific Islanders a hyperlink

51
00:07:08,192 --> 00:07:10,768
in case users want more information from

52
00:07:10,768 --> 00:07:13,960
the Asian Americans 
Advancing Justice website.

53
00:07:15,560 --> 00:07:17,814
I'll adjust the vertical spacing a bit.

54
00:07:35,693 --> 00:07:38,220
And that looks like a completed design.

55
00:07:39,840 --> 00:07:43,911
I hope you've enjoyed this
exercise in using a design system.

56
00:07:43,911 --> 00:07:47,878
As you can see, implementing 
the rules of a design system

57
00:07:47,878 --> 00:07:51,608
involves really getting to
know the documentation.

58
00:07:51,608 --> 00:07:56,627
But once you do, creating a product
that matches the brand identity,

59
00:07:56,627 --> 00:08:01,486
and uses existing components
becomes a straightforward process.

60
00:08:01,486 --> 00:08:05,871
And the development team will be on
the same page as you when it comes time

61
00:08:05,871 --> 00:08:07,165
to build your designs.