1
00:00:00,360 --> 00:00:01,460
Welcome back.

2
00:00:01,460 --> 00:00:04,560
Let's take a look at the eight
sketches I completed

3
00:00:04,560 --> 00:00:06,590
using the Crazy Eights sketching method.

4
00:00:07,850 --> 00:00:14,960
Each of the nine questions on the ACLU
voting rights website is fairly lengthy,

5
00:00:14,960 --> 00:00:19,330
and I'm not sure I can shorten them much
without making the meaning less clear.

6
00:00:20,510 --> 00:00:23,010
I focused my sketches on mobile

7
00:00:23,010 --> 00:00:28,630
since organizing these longer blocks of
text on a small screen is a big challenge.

8
00:00:30,450 --> 00:00:34,710
I included the same banner
across the top of each sketch,

9
00:00:34,710 --> 00:00:38,350
to assure users this is an official
federal government site.

10
00:00:39,590 --> 00:00:44,160
I've also provided a dropdown where
the user can switch the page language.

11
00:00:46,440 --> 00:00:51,290
The Wikipedia mobile accordion
pattern inspired my first sketch.

12
00:00:52,640 --> 00:00:55,590
I've always enjoyed
using Wikipedia mobile.

13
00:00:55,590 --> 00:01:01,330
It loads quickly, the hierarchy of
headings and subheadings is obvious.

14
00:01:02,330 --> 00:01:05,705
And since most sections
are collapsed by default,

15
00:01:05,705 --> 00:01:10,347
I can scroll directly to the information
I'm interested in reading.

16
00:01:12,762 --> 00:01:19,753
My first sketch includes a COVID-19
specific warning I found on vote.gov

17
00:01:19,753 --> 00:01:24,553
since that site uses the United States
Web Design System, and

18
00:01:24,553 --> 00:01:29,815
since COVID-19 is likely to impact
voting rules in every state

19
00:01:29,815 --> 00:01:32,230
as of the making of this video.

20
00:01:34,530 --> 00:01:39,440
My sixth sketch is similar
in organization to my first

21
00:01:39,440 --> 00:01:42,320
but uses a full screen navigation pattern.

22
00:01:44,350 --> 00:01:48,700
For my remaining sketches,
I tried a broad variety of approaches.

23
00:01:49,940 --> 00:01:55,090
A search-driven site like my second
sketch probably isn't ideal,

24
00:01:55,090 --> 00:01:59,510
since my information is limited, and
many searches could come up empty.

25
00:02:01,230 --> 00:02:06,340
Using prominent icons like my third
sketch might be helpful to users

26
00:02:06,340 --> 00:02:11,480
with cognitive disabilities
or at a low reading level and

27
00:02:11,480 --> 00:02:15,150
could make the content
easier to scan visually.

28
00:02:15,150 --> 00:02:19,040
Though before I fall too
in love with this idea,

29
00:02:19,040 --> 00:02:23,960
I should check the icons page of
the United States Web Design System.

30
00:02:24,980 --> 00:02:29,820
It looks like the design
system uses Font Awesome, and

31
00:02:29,820 --> 00:02:35,060
I don't see permission anywhere
to include custom icons.

32
00:02:35,060 --> 00:02:39,440
So I would need to find icons
that resemble my sketch content

33
00:02:39,440 --> 00:02:40,740
on Font Awesome.

34
00:02:42,780 --> 00:02:48,210
My fifth and
seventh sketches attempt to use a tab bar.

35
00:02:48,210 --> 00:02:52,930
I have nine questions and
space for only five icons, but

36
00:02:52,930 --> 00:02:58,060
I figured I could fit multiple questions
underneath Know Your Rights and Get Help.

37
00:02:59,080 --> 00:03:04,050
I'm a bit worried about Get Help though,
as it might read as a junk drawer of

38
00:03:04,050 --> 00:03:08,120
leftover links, rather than
a distinct collection of information.

39
00:03:10,000 --> 00:03:12,980
Finally, my fourth and eighth sketches

40
00:03:12,980 --> 00:03:17,940
present the questions as steps you
might take when preparing to vote.

41
00:03:17,940 --> 00:03:21,190
The eighth sketch offers key questions.

42
00:03:21,190 --> 00:03:23,100
What state do you live in?

43
00:03:23,100 --> 00:03:27,650
Great, now I can provide information
that pertains only to your location.

44
00:03:28,690 --> 00:03:30,670
Are you registered to vote?

45
00:03:30,670 --> 00:03:34,010
If not, here's voter information for
your state.

46
00:03:35,050 --> 00:03:37,550
This approach means users have to complete

47
00:03:37,550 --> 00:03:41,930
two steps before the site
navigation appears, but

48
00:03:41,930 --> 00:03:46,700
it prevents the information overload
seen on some of the competitor websites.

49
00:03:47,900 --> 00:03:54,210
After reviewing my sketches, I'm ready to
combine my best ideas into a wireframe

50
00:03:54,210 --> 00:04:00,480
using the Adobe XD components file we
downloaded from the US Web Design System.