CS 247I: Reference Site
Published in
7 min readNov 4, 2019
Conceptual Design
Website purpose: Bringing college students who may vote absentee to a single, streamlined experience where they can learn about the voting and registration process.
Keywords: simple, concise, minimalist flat design
Site Design Rationale
Landing Pages:
Homepage — Easy to navigate big portions of the site, gives users the entire content layout of the site from the beginning. Since users will be coming to the site with different backgrounds, needs, and voter status situations, they will be able to jump in at whatever phase makes most sense for them. We chose tiles to indicate the lack of hierarchy amongst the choices, again emphasizing the user’s ability to explore. Furthermore, the tiles evoke simplicity and straightforwardness; there are no surprises and everything is broken down into six main categories. As a site catering to college students, we did not want the page to appear overwhelming or complicated, as they likely have little time to dedicate to deciphering a complex site on a topic that they are perhaps not interested in.
- We chose icons specifically to be cohesive and to appear as if they were from the same library, offering a clean and professional appearance.
- We went through several rounds of category naming debates; we chose the specific categories such that they encompassed as many of the categories from our cardsorting results (see Appendix). For example, “Historical Trends” encompasses categorizations from our cardsorts such as “history”, “background information”, “data & analysis”, and “voting background”.
- We gave the Registration Guide tile our accent color because it is the most actionable item from the group of categories; even if they do nothing else on our site, the user should visit that page and register to vote.
- Tiles take up the entire page to indicate that there is no more on the home page other than the tiles.
- We put the Explorable Explainer tile in the top left so that a user who comes to the site not knowing anything will be drawn to that by nature of reading left to right and top to bottom. It is the logical place to start on our site, as it explains and frames the problem.
Sidebar — we wanted easy access to any page at any point of the site experience. People come in with varying degrees of knowledge and will likely need to skip around.
- We put explore at the top because people’s eyes are naturally drawn to the first or last item. Users can click on the “absenti” logo to return to the homepage, but the sidebar is available on every page to allow users to reach any other page as well.
- We had some difficulties deciding whether or not to include a “Home” link to get back to the main page on the sidebar. Ultimately, we decided that users these days, especially college students who spend a lot of time online, have enough common knowledge to understand that clicking the website logo often takes them back to the home page.
Page Templates: Three Variations
- Grid View — Excellent for linking to external websites and resources. Gives most links equal importance (but relevance is still defined from top to bottom). This is useful for pages where we had a greater number of articles because it naturally encourages users to scroll. The user can see the other article tiles just above the fold and knows that there is more information to be discovered. We attempted to choose images that aligned with our color scheme of different shades of blue with red accent colors.
- Article View — Standard article page that is useful for designing our own content.
- Large Image Article View — This was part of the template for our site, but we did not use it because it gave too much emphasis to the picture instead of the content, which was non ideal. Our articles, by nature of their content, focus less on visuals and more on the words, thus it did not make sense for us to dedicate an entire half screen to an image. The benefit was that it gave a nice spot for the article source, but we ultimately did not use this page design.
- Article and Grid View — a good way of incorporating some background information and our explainer before linking the remaining articles. It lets the user interact with a nearly full-screen embedded Glitch project and then facilitates users browsing articles in the Grid View as in our normal Grid View pages.
Informational Hierarchy
We wanted each page to give a very concise listing of the available information for that subcategory.
Explorable Explainer
- People often clicked Explorable Explainer first (as it is the first option); placed in the center / top left of the homepage
- Contains our explorable explainer, which gives the user some introductory info to guide them into the process.
- Uses article view because this is content we created, embedded directly in the page.
Why Vote Absentee?
- Designed for students who have never voted absentee before and and wondering what it is.
- We chose grid view for this because it contains a few links for learning about the basics of absentee voting and why it is useful.
Historical Trends
- This page is for students who want to see the impact of absentee voting.
- This is again grid view because we want students to see the options and explore them.
Registration Guide
- Streamlined steps of action items; the most basic and important thing to take away from our website.
- This is an article view because we defined the most important steps to voting into a checklist (linear) and associated links with each one.
Voter Resources
- Federal websites with links to all state websites and verifiable information, all updated and in one place.
Current Events
- Designed to reflect current events and the impact of absentee voting. Students who are curious about what is going on currently and who might need a slight further push to register might benefit from this category.
- This is a grid view because it is just a stream of news sites. This feels comfortable for a reader who is used to consuming online news articles in such a way, by scrolling through a curated list of articles with pictures associated.
User Testing
User #1
- Liked the images and graphics.
- Felt like the subheaders in the registration guide could be a bigger font because it feels like it blends with the sub-sub point under the subheader too much.
User #2
- The explorable explainer is cool and helpful.
- The overall navigation of the website/sidebar is easy to use and understand, although “back to home” links might be nice to have on the pages.
- It’d be nice if the resources links opened in a new tab when you clicked it.
- The pages get kind of wonky in mobile view.
- Could use more visuals on registration guide, otherwise it’s mostly block text.
- The clickable map was very informative.
Appendix
Card Sorting Results
Categories chosen:
- General
- College
- Act of Voting
- Education/stats
- History
Categories chosen:
- Multimedia
- Detail & Analysis
- Practical & Concise
Categories chosen:
- College
- Voting Background
- Voting Process
- Voting Information
Categories chosen:
- How to Vote
- Hardships for Voting
- History/background of voting
- Importance of voting education
Categories chosen:
- Where to
- How to
- Why?
Categories chosen:
- General Info/Guidelines “how to absentee vote”
- Links on how to register in your state
- Extra material: beyond your vote
- What is the issue? Why does it happen?
- Importance of absentee
Categories chosen:
- Academic Papers on Students + Voting
- Voting Resources for College Students
- Presidential Elections
- Absentee Voting Resources
- Academic Papers on Absentee Voting
- General Voting Resources
Categories chosen:
- General
- College
- Act of Voting
- Education/stats
- History
Initial sketches of possible homepage designs
Initial sketches, process, and justification of creating the tiles design and categories.
Homepage design process
A selection of some of our interim designs, including considerations for color layouts, whitespace, icon choices, and background images, which we ultimately decided against.
