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.