Introducing the Project

[MUSIC] 0:00 Hi, my name is Anwar. 0:09 I'm a designer, a developer and teacher at Treehouse. 0:11 Welcome to Practice Using a Design System. 0:14 For this practice session, 0:18 we'll be using Adobe XD to wireframe a homepage for votingrights.gov, 0:20 an imaginary website for the United States federal government 0:26 that informs citizens about their right to vote. 0:31 We'll start with a problem, a set of research, and 0:34 some design explorations in the form of rough sketches. 0:37 We'll then use the United States Web Design System to ensure the look and 0:42 behavior of our design are consistent with other federal government sites. 0:47 Understanding how, when, and where to vote can be an intimidating process, 0:53 especially as the rules vary from state to state. 0:59 I'm looking at a page called Voting On Election Day from a site called usa.gov, 1:03 and I might like to know whether I'm required to bring an ID on election day. 1:11 I've clicked a link called Find Out if You Need to Bring an ID to Vote, 1:18 and I'm taken to an external site called ncsl.org or 1:24 the National Conference of State Legislatures. 1:29 And wow, check out the length of this article and the tiny type. 1:33 Not exactly user friendly, is it? 1:40 Here's a voting rights resource provided by the American Civil Liberties Union. 1:44 This is much better, but I'm concerned about 1:50 the wall of words found under the headings 1:55 I am a voter with a disability and I speak English less than very well. 1:59 Users who don't speak English fluently or have cognitive disabilities 2:06 would benefit from a simpler presentation of this information. 2:11 Finally, here's one more voting rights site called vote.org. 2:17 The presentation of information on the election protection page is pretty good. 2:23 Lots of bulleted lists and short paragraphs. 2:29 But the link to get to this voting rights page would 2:33 be awfully hard to tap on a mobile device. 2:38 And some of the rights covered by the American Civil Liberties Union, 2:42 such as rules for voters with a disability and 2:47 voters who need help understanding English, are absent here. 2:50 All right, so we've established a goal for 2:56 our project: simplifying the presentation of the user's voting rights. 2:58 We'll need to ground our project in research, 3:03 which we'll examine in the next video. 3:06 But what else should we consider when planning a web project for 3:09 the United States government? 3:14 The United States Web Design System declares its goal as 3:16 making it easier to build accessible, 3:21 mobile-friendly websites for the American public. 3:24 Before we begin planning any project that uses this design system, 3:29 we need to make sure we familiarize ourselves with the design principles, 3:34 components. 3:42 design tokens, 3:47 and utilities found here. 3:52 We can also check out the showcase of sites using this design system. 3:58 The first example is a small site called vote.gov, 4:04 letting users know where and how they can register to vote. 4:10 The site contains a banner assuring us this is an official government website. 4:16 The other five sites found in this gallery should all look and 4:23 behave pretty similar to the first one. 4:28 This is what a design system achieves. 4:33 Finally, under the tab How to Use USWDS, 4:38 I see a link where designers can download resources for Sketch or Adobe XD. 4:43 I'll download the Adobe XD version 4:51 And I see a file full of colors and design components. 5:00 I've also been given a Fonts folder. 5:06 I should install these fonts if I don't have them already. 5:10 Go ahead and 5:15 spend a little time getting to know the United States Web Design System. 5:15 We'll check out our research in the next video. 5:20