Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice Using A Design System!
You have completed Practice Using A Design System!
Preview
Welcome back. Let’s take a look at the eight sketches I completed using the Crazy Eights sketching method.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up