Design Explorations4:01 with Anwar Montasir
Welcome back. Let’s take a look at the eight sketches I completed using the Crazy Eights sketching method.
Welcome back. 0:00 Let's take a look at the eight sketches I completed 0:01 using the Crazy Eights sketching method. 0:04 Each of the nine questions on the ACLU voting rights website is fairly lengthy, 0:07 and I'm not sure I can shorten them much without making the meaning less clear. 0:14 I focused my sketches on mobile 0:20 since organizing these longer blocks of text on a small screen is a big challenge. 0:23 I included the same banner across the top of each sketch, 0:30 to assure users this is an official federal government site. 0:34 I've also provided a dropdown where the user can switch the page language. 0:39 The Wikipedia mobile accordion pattern inspired my first sketch. 0:46 I've always enjoyed using Wikipedia mobile. 0:52 It loads quickly, the hierarchy of headings and subheadings is obvious. 0:55 And since most sections are collapsed by default, 1:02 I can scroll directly to the information I'm interested in reading. 1:05 My first sketch includes a COVID-19 specific warning I found on vote.gov 1:12 since that site uses the United States Web Design System, and 1:19 since COVID-19 is likely to impact voting rules in every state 1:24 as of the making of this video. 1:29 My sixth sketch is similar in organization to my first 1:34 but uses a full screen navigation pattern. 1:39 For my remaining sketches, I tried a broad variety of approaches. 1:44 A search-driven site like my second sketch probably isn't ideal, 1:49 since my information is limited, and many searches could come up empty. 1:55 Using prominent icons like my third sketch might be helpful to users 2:01 with cognitive disabilities or at a low reading level and 2:06 could make the content easier to scan visually. 2:11 Though before I fall too in love with this idea, 2:15 I should check the icons page of the United States Web Design System. 2:19 It looks like the design system uses Font Awesome, and 2:24 I don't see permission anywhere to include custom icons. 2:29 So I would need to find icons that resemble my sketch content 2:35 on Font Awesome. 2:39 My fifth and seventh sketches attempt to use a tab bar. 2:42 I have nine questions and space for only five icons, but 2:48 I figured I could fit multiple questions underneath Know Your Rights and Get Help. 2:52 I'm a bit worried about Get Help though, as it might read as a junk drawer of 2:59 leftover links, rather than a distinct collection of information. 3:04 Finally, my fourth and eighth sketches 3:10 present the questions as steps you might take when preparing to vote. 3:12 The eighth sketch offers key questions. 3:17 What state do you live in? 3:21 Great, now I can provide information that pertains only to your location. 3:23 Are you registered to vote? 3:28 If not, here's voter information for your state. 3:30 This approach means users have to complete 3:35 two steps before the site navigation appears, but 3:37 it prevents the information overload seen on some of the competitor websites. 3:41 After reviewing my sketches, I'm ready to combine my best ideas into a wireframe 3:47 using the Adobe XD components file we downloaded from the US Web Design System. 3:54
You need to sign up for Treehouse in order to download course files.Sign up